vue+echarts 饼图legend文字超出省略，hover时显示tooltip及数据，取消点击事件

前言

提示：echarts饼图legend文字太长要截取，鼠标悬浮再显示所有的文字并显示数据比例。取消点击图例消失效果，保留hover显示tooltip

---

1.初始echarts

配置向代码如下（示例）：

chartProductDataOption:{
                tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                color: [
                "#00a0e9",
                "#ff455b",
                "#f39800",
                "#62ff85"
                ],
                graphic:{       //图形中间文字
                    type:"text",
                    left:'25%',
                    top:"center",
                    style:{
                        text:"营 销\n数 据",
                        textAlign:"center",
                        fill:"#05f6ff",
                        fontSize:15
                    }
                },
                legend: {
                    orient: 'vertical',
                    type:'scroll',
                    x: 'right',
                    data:['产品一','产品二','产品三','产品四','产品五'],
                    formatter: function(name){
                　　　　return name.length>8?name.substr(0,8)+"...":name;
                　　},
                    tooltip: {
                        show: true,
                        trigger: 'item',
                    },    
                    textStyle:{
                        color:'	#FFFFFF',
                        // fontSize:10
                    },
                    itemGap:6
                },
                series: [
                {
                    name:'产品营销数据',
                    type:'pie',
                    radius: ['70%', '90%'],
                    center:['30%','50%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[  {value:30, name:'产品一'},
                        {value:40, name:'产品二'},
                        {value:40, name:'产品三'},
                        {value:40, name:'产品四'}
                        ]
                },
                {
                    name:'',
                    type:'pie',
                    radius: ['49%', '50%'],
                    center:['30%','50%'],
                    hoverAnimation:false,
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center',
                            color: 'white',
                            formatter: ''
                        },
                        emphasis: {
                            show: false,
                        
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                    {value:30, name:'产品一'},
                        {value:40, name:'产品二'},
                        {value:40, name:'产品三'},
                        {value:40, name:'产品四'}
                    ]
                }
                ]
            },

动态渲染数据

2.通过legend的formatter来设置文字显示长度，hover显示tooltip,设为true

tooltip要显示百分比数据需要通过formatter自己去算

代码如下（示例）：

let that = this;
this.chartProductDataOption.legend.tooltip.formatter = function (tool) {
    let indexNum=0
    that.data.forEach(item => {
      if(item.proName === tool.name) indexNum = item.count
    })
    if(indexNum === 0){
    }else{
      return `${that.chartProductDataOption.series[0].name}</br>${tool.name}：${indexNum} (${(indexNum/that.numTotal*100).toFixed(2)}%)`
    }
}

computed:{
        numTotal:function(){
            let total = 0;
            for(let i=0;i<this.data.length;i++){
                total += parseInt(this.data[i].count);
            }
            return total;
        }
    }

3.取消legend点击事件，legend的selectedMode点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。改为false会把hover事件也关闭，所以不行。可以利用legendselectchanged事件实现

代码如下（示例）：

let that = this;
this.chartProductData.on('legendselectchanged', function(params) {
    // 前面配置项没定义selected，需先定义，否则找不到对象会报错
    that.chartProductDataOption.legend.selected ={};  
    that.chartProductDataOption.legend.selected[params.name] = true; // 相当于取消点击事件
    that.chartProductData.setOption(that.chartProductDataOption);
})

3.效果

legend图例hover的效果,百分比根据自己数据算出来的