安装echarts模块
npm install echarts -S
或者使用淘宝镜像安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
引入echarts
在main.js中
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
draw() {
// 绘制图表。
let Myechart = this.$echarts.init(this.$refs.pie);
Myechart.setOption({
title: {
text: this.dis + "各产业链规上工业企业个数",
x: "center",
y: "bottom",
top: "0%",
// itemGap设置主副标题纵向间隔,单位px,默认为10
itemGap: 30,
textStyle:{
color:'#fff',
fontSize:16
}
},
tooltip: {
trigger: 'item',
formatter:"{a} <br/>{b} : {c}"+ "个" + "({d}%)",
position: function(point, params, dom, rect, size){ // point: 鼠标位置
var tipHeight = point[1] + size.contentSize[1]; // contentSize: 提示dom 窗口大小
if(tipHeight > size.viewSize[1] ){ // viewSize: echarts 容器大小
return [point[0]+40, point[1]-size.contentSize[1]];
} else if(point[1] < size.contentSize[1]){
return [point[0]+40, point[1]+20];
} else {
return point;
}
},
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
color:this.color,
series: {
name: this.dis + "各产业链规上工业企业个数",
type: "pie",
minAngle: 5,
top:20,
// bottom:0,
// avoidLabelOverlap: true,
data: this.pieData,
// radius: "60%",
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
}
});
},
可能遇到的报错
"export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’
出现这个问题应该是echarts的版本比较新,我自己试了一下4.9版本的就没问题了
解决办法:
npm uninstall echarts
npm install echarts@4.9.0