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 数据的 index
    dataIndex: i
})

//设置取消选中
this.echarts.dispatchAction({
    type: "downplay",
    //seriesIndex：number | array系列 index，可以是一个数组指定多个系列
    seriesIndex: [0,1,2],
    //dataIndex：number 数据的 index
    dataIndex: 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 数据的 index
                dataIndex: i
            })
                
                i+=2;
        }else{
            i=0;
            this.echarts.dispatchAction({
                type: "highlight",
                //seriesIndex：number | array系列 index，可以是一个数组指定多个系列
                seriesIndex: [0,1,2],
                //dataIndex：number 数据的 index
                dataIndex: 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 数据的 index
                dataIndex: 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, // 是否显示刻度标签。默认为true
        color: '#1492C9',
        rotate: 0, // 刻度标签旋转的角度。默认为0
        margin: 5, // 刻度标签与轴线之间的距离。 默认8px
        fontSize: 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 || []
}