1、初始化Echarts图标
`let echarts = this.$echarts.init(document.getElementById('pieEcharts'))`
pieEcharts是div的id
2、tooltip：是鼠标触碰时的提示
（1）trigger: 'item'：一般的提示内容
（2）formatter: "{a} <br/>{b}: {c} ({d}%)"：formatter可以自定义提示内容
3、color:可以设置显示的颜色
4、title：一般用于饼状图，圆环内部显示的内容
（1）text; ''，//定义显示的内容；
（2）x: ''，//水平位置；
（3）y: '',//竖直位置；
（4）textAlign: '',//定义文字位置，一般”center“居中；
（5）textStyle：{}，//定义文字的样式：
a.rich{}，//在rich中单独定义每一个字体的样式；比如
`text: "{num|" + this.avg(data) + "\n}{name|总计}",`
则rich: {
num: {
fontWeight: 500,
fontSize: 40,
color: '#1DEF9A',
},
name: {
fontWeight: 500,
fontSize: 23,
color: '#fff',
},
},
title: {
text: "{num|" + this.avg(data) + "\n}{name|总计}",
x: "24%",
y: "25%",
textAlign: "center",
textStyle: {
rich: {
num: {
fontWeight: 500,
fontSize: 40,
color: '#1DEF9A',
},
name: {
fontWeight: 500,
fontSize: 23,
color: '#fff',
},
},
},
},
5、legend:外面的提示文字：
（1）top、bottom、left、right,设置上下左右的位置；
（2）textStyle：{}设置字体的样式，有color、fontSize；
（3）itemWidth、itemHeight设置提示图框的宽高；
（4）data设置提示的文字内容；
（5）formatter：自定义提示问题；
（6）icon：定义提示框的形状，‘circle’圆形, ‘rect’矩形, ‘roundRect’椭圆形, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’；
（7）orient设置提示是横着还是竖着布局，horizontal横着，vertical竖着，默认横着；
legend: {
top: '20%',
left: '44%',
orient: 'vertical',
icon: 'pin',
textStyle: {
color: "#fff",
fontSize: 14,
},
formatter: function(name){
let res = ""
let sum = that.avg(data)
for(var i=0;i<echartsData.length;i++) {
if (echartsData[i].name == name) {
res = echartsData[i].value
}
}
return name +' '+ res + ' ' + '(' + ((res/sum)*100).toFixed(2) + '%' + ')';
}
},
6、xAxis和yAxis：横轴（饼状图没有）
（1）type类型category和valu；
（2）data横轴坐标数据；
（3）axisLabel文字设置：
i.textStyle文字样式设置，color、fontSize等；
ii.show设置是否显示文字，true显示，false不显示，默认为true；
（4）axisLine设置线条：
i.lineStyle设置线的样式，color等；
ii.show设置是否显示文字，true显示，false不显示，默认为true；
（5）splitLine设置间隔线（分割线）：
i.lineStyle设置线的样式，color等；
ii.show设置是否显示文字，true显示，false不显示，默认为true；
（6）axisPointer设置鼠标放在柱状图上的背影：
i.type类型，line线性、cross十字准星、shadow阴影；
ii.lineStyle、crossStyle、shadowStyle设置样式；
iii.axisTick设置线的光滑，true有短的下线，false为光滑直线；
(7)inverse设置数据是否倒置，true倒置，false不倒置；
xAxis: {
type: 'value',
position: 'top',
axisLabel: {
show: false
},
axisLine: {
show: false,
postion: 'top',
lineStyle: {
color: "#fff",
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'category',
inverse: true,
data: ['工区1', '工区2', '工区3'],
axisLabel: {
color: '#fff'
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
}
},
axisTick: {
show: false
}
},
7、series：数据
（1）name名字，这个图标的名字；
（2）type类型，bar柱状图，line折线图，pie饼状图；
（3）label数值设置：
a.show设置显隐，true显示，false不显示；
b.position位置设置，top、center、left；
c.color颜色设置；
（4）center位置设置（饼状图），数据类型['25%', '33%']；
（5）radius饼状图设置，数据类型['38%', '50%']为圆环，[0, '50%']为圆；
（5）itemStyle样式的设置：
a.normal:{}
i.barWidth设置宽度（柱状图）；
ii.barBorderRadius设置圆角（柱状图）；
iii.color颜色设置，渐变颜色设置：
` color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#8EB8FF'
}, {
offset: 1,
color: '#AAE0FF'
}]) `
series: [
{
name: '',
type: 'bar',
barWidth: 20,
data: [103, 90, 83],
label: {
show: true,
position: 'right',
color: '#fff'
},
itemStyle: {
normal: {
barWidth: 12,
barBorderRadius: [0, 100, 0, 0],
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#8EB8FF'
}, {
offset: 1,
color: '#AAE0FF'
}])
},
},
}
series: [
{
name: '设备数量',
type: 'pie',
center: ['25%', '33%'],
radius: ['38%', '50%'],
avoidLabelOverlap: false,
clockwise: false,
label: {
normal: {
show: false,
position: "center",
},
},
labelLine: {
show: false
},
data: echartsData
}
]
8、echarts.setOption(option)引用option;
9、tools.loopShowTooltip(echarts, option, {loopSeries: true})动态显示tooltip;
