echarts业务中常用属性设置记录

1.legend计算占比

//在data中定义两个字段
total:0,
znum:0
//计算上面两个值
this.data.forEach(val => this.total += parseInt(val.value));
for (let i = 0; i < nv.length; i++) {if (i != nv.length - 1) {this.znum = this.znum + Number(parseFloat((nv[i].value / this.total) * 100).toFixed(2));}}
//在legend中使用
formatter: function (name) {if (show == false) {return name + '  ' + '****';} else {for (let i = 0; i < that.data.length; i++) {if (that.data[i].name == name) {if (that.data[i].value != 0) {if (i == that.data.length - 1) {return name + '  ' + parseFloat(100 - that.znum).toFixed(2) + '%';} else {return (name +'  ' +parseFloat((that.data[i].value / that.total) * 100).toFixed(2) +'%');}} else {return name + '  ' + '0%';}}}}}

2.设置圆环中间文字的位置

title: {//圆环中间内容show: true,text: '第一行文字',left: '23.5%',top: '38%',subtext:'第二行文字',textAlign:'center',textStyle: {color: '#fff',fontSize: 16,align: 'center'},subtextStyle: {fontSize: 12,fontWeight:'bold',align: 'center',color: '#fff',align: 'center'}},

3.饼图设置动态切换

//1.定义两个字段
selectValue:"",
selectTitle:""
//主要属性dispatchAction 
//设置选中
this.echarts.dispatchAction({type: "highlight",//seriesIndex：number | array系列 index，可以是一个数组指定多个系列seriesIndex: [0,1,2],  //选中的维度//dataIndex：number 数据的 indexdataIndex: i
})//设置取消选中
this.echarts.dispatchAction({type: "downplay",//seriesIndex：number | array系列 index，可以是一个数组指定多个系列seriesIndex: [0,1,2],//dataIndex：number 数据的 indexdataIndex: i-2
})//整个逻辑this.$nextTick(() => {this.echarts = this.$echarts.init(this.$refs.echarts);this.setOption(this.show);let i=0;let j=0;this.timer=setInterval(()=>{if(i<this.pieData.length){this.echarts.dispatchAction({type: "highlight",//seriesIndex：number | array系列 index，可以是一个数组指定多个系列seriesIndex: [0,1,2],//dataIndex：number 数据的 indexdataIndex: i})i+=2;}else{i=0;this.echarts.dispatchAction({type: "highlight",//seriesIndex：number | array系列 index，可以是一个数组指定多个系列seriesIndex: [0,1,2],//dataIndex：number 数据的 indexdataIndex: i})i+=2;}if (j == this.data.length - 1) {this.selectValue=parseFloat(100 - this.znum).toFixed(2) + '%';this.selectTitle=this.data[j].typeName;j=-1;} else {this.selectValue=parseFloat((this.data[j].average / this.total) * 100).toFixed(2) +'%'this.selectTitle=this.data[j].typeName;}this.setOption(this.show);j+=1;setTimeout(()=>{this.echarts.dispatchAction({type: "downplay",//seriesIndex：number | array系列 index，可以是一个数组指定多个系列seriesIndex: [0,1,2],//dataIndex：number 数据的 indexdataIndex: i-2})},1200)},3000)});

4.设置数据修改后触发重新渲染动画

this.echarts.dispose(); //销毁实例
this.echarts = this.$echarts.init(this.$refs.echarts); //重新创建实例

5.设置颜色渐变

//bgColor为自定义的颜色数组color:new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 1,color: _this.bgColor.color1},{offset: 0,color: _this.bgColor.color2}
])

6.设置坐标轴的样式

//1.设置tooltip背景样式tooltip: {backgroundColor: 'rgba(30, 30, 30, 0.55)',borderColor: 'rgba(30, 30, 30, 0.55)',textStyle: {color: '#fff'}
},//2.设置坐标轴样式
xAxis: {// X轴-相关设置axisLabel: {// X轴-坐标轴刻度标签的相关设置。// show: true, // 是否显示刻度标签。默认为truecolor: '#1492C9',rotate: 0, // 刻度标签旋转的角度。默认为0margin: 5, // 刻度标签与轴线之间的距离。 默认8pxfontSize: 15,// 坐标轴刻度标签的显示间隔。// 0表示显示所有标签,1表示间隔一个显示标签interval: 0},axisTick: {// X轴-坐标轴刻度相关设置show: false},splitLine: {// X轴-分隔线show: false},axisLine: {// X轴-坐标轴轴线相关设置show: true,lineStyle: {color: '#384267'// type: 'solid' // 线的类型。可选'solid'等}},data: this.xAxis
},
yAxis: {// Y轴-相关设置nameTextStyle: {// Y轴-坐标轴名称的文字样式color: '#1492C9',padding: [0, 0, 10, 0],fontSize: 14},axisLabel: {// Y轴-坐标轴刻度标签的相关设置color: '#1492C9',fontSize: 15},axisTick: {// Y轴-坐标轴刻度相关设置。show: false,lineStyle: {color: '#384267'}},splitLine: {// Y轴-分隔线show: true,lineStyle: {color: 'rgba(56,66,103,0.5)'}},axisLine: {// Y轴-坐标轴轴线相关设置。// show: true// lineStyle: {//     color: '#384267',//     type: 'solid'// }}
},//3.设置小圆点发光
series: {large: true,type: 'line',smooth: false,itemStyle: option.seriesLineStyle || {width: 2.5,color: '#F2597F', //小圆点和线的颜色shadowColor: '#fff',shadowBlur: 15},showSymbol: true,symbolSize: 6,//设置折线下方阴影部分的样式areaStyle: option.areaStyle && {  opacity: 0.58,color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.6, [{offset: 0,color: option.areaStyle.color1},{offset: 1,color: option.areaStyle.color2}])},emphasis: {focus: 'series'},data: option.series || []
}