1.配置HighCharts环境

1.1安装HighCharts

npm install -S vue-highcharts
npm install -S highcharts

1.2 在main.js全局引入

import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(highcharts);

2.HighCharts的使用

<div class="charts"><div :id="id" :option="option"></div></div>

import HighCharts from "highcharts";

<template><div class="app-container"><div class="charts"><div :id="id" :option="option"></div></div></div>
</template><script>
import HighCharts from "highcharts";
export default {data() {return {id: "test",option: {chart: {type: "pie", //饼图backgroundColor: "rgb(242, 242, 242)",options3d: {enabled: true, //使用3d功能alpha: 60, //延y轴向内的倾斜角度beta: 0,},},credits: {enabled: false, //不显示LOGO},title: {text: "状态图", //图表的标题文字},subtitle: {text: "", //副标题文字},tooltip: {pointFormat: "{series.name}: {point.percentage:.2f}%",style: {color: "#000",},},plotOptions: {pie: {allowPointSelect: true, //每个扇块能否选中cursor: "pointer", //鼠标指针depth: 35, //饼图的厚度dataLabels: {enabled: true, //是否显示饼图的线形tipformatter: function () {return ('<span style="color:#000">' +this.point.name +"</span><br/><span>占比：" +this.percentage.toFixed(2) +"%</span><br/>" +"</span>");},style: {// textOutline: "0px 0px ",fontSize: 15,color: "#000",},},colors: ["#714fe3","rgb(153, 153, 255)","rgb(153, 51, 102)","rgb(255, 255, 204)",],},},series: [{type: "pie",name: "占比", //统一的前置词,非必须data: [{ name: "二级单位", y: 10 }, //模块名和所占比，也可以{name: '测试1',y: 12}{ name: "三级单位", y: 10 },{ name: "四级单位", y: 10 },],},],},};},created() {},mounted() {HighCharts.chart(this.id, this.option);},methods: {},
};
</script>

HighCharts的安装及使用相关推荐

3d饼图 vue_在Vue中如何使用highCharts绘制3d饼图
本篇文章主要介绍了在Vue中使用highCharts绘制3d饼图的方法,现在分享给大家,也给大家做个参考. highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用h ...
3d饼图 vue_在Vue中使用highCharts绘制3d饼图
highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖,所以弃用. 接下来,给各位伙伴简要的讲叙下hig ...
在VS2010下利用vue开发团队项目
开发一个项目,采用什么语言都可以,主要能熟练高效的开发都是合理的,这次我们采用vue来开发一个团队项目.在开始之前掌握vue的基本用法,如双向数据绑定.组件和路由等,建议先去看之前的文档(webpac ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
安装node和spm过程
2019独角兽企业重金招聘Python工程师标准>>> 安装nodejs 官网下载nodejs,我下的是v0.10.33版本,安装到d:\nodejs下. 1.新建目录d:\node ...
php后台数据显示到前端,php,前端_怎么在javascript中得到后台数据?，php,前端,javascript,highcharts - phpStudy...
怎么在javascript中得到后台数据? 最近在研究在网页中嵌入hightchart的表格在嵌入时发现需要在javascript中得到后台的一组数据代码如下 require_once('incl ...
Highchart插件下载与安装
提供完整的 Highcharts 资源包,包含实例文件.所有的 js 压缩版及源码.导出服务器文件等. 1.资源包的使用: 2.开放的CDN:http://img.hcharts.cn/ 二.High ...
【Python】又一个可视化神器Highcharts，Python版也有哦！
来源:Python数据之道作者:Peter 整理:Lemon 本文重点介绍的是可视化库 Highcharts 的相关基础知识,以及如何利用Highcharts来绘制不同场景和需求下的精美柱状图,主要 ...
又一个可视化神器Highcharts，Python版也有哦！
来源:Python数据之道作者:Peter 整理:Lemon 本文重点介绍的是可视化库 Highcharts 的相关基础知识,以及如何利用Highcharts来绘制不同场景和需求下的精美柱状图,主要 ...

HighCharts的安装及使用

1.配置HighCharts环境

1.1安装HighCharts

1.2 在main.js全局引入

2.HighCharts的使用

HighCharts的安装及使用相关推荐

最新文章

热门文章