vue3 echarts图

开发工程师的心是浮躁的吗，总是想急于求成，echarts中那么多配置，要一个个沉下心去学，太耗费时间，但是有些做起来却很麻烦，要百度半天还找不到结果。其实也不是我们复杂，而是因为项目工期紧，那么为什么工期紧呢？
1 调整饼图与legend的位置
左侧lengend，与右侧饼图，距离太近了。

调试如下：

 legend: {
     type:'scroll',
     orient: 'vertical',
     left:100,
     top:5,
     bottom:5,
     padding:[0,0,0,0 ],
     formatter: (name)=>{
         let data = option.series[0].data
         return pieLengendPercentFmt(data,name)
     }
 },

左侧发生漂移，但是右侧环形图并没有发生变化，即legend是用来控制图例的

查看官方文档
series-pie

实践可以看到,设置left即可，

 series: [
      {
      left:50,
      // right:20,
      name: '商品金额',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
          show: true,
          position: 'center',
      },
      // 数据引线
      labelLine: {
          show: false
      },
      data: res.data
      }
  ],

那么这个50是什么距离呢？从下图可以看到是饼图与legend之间的距离，并不是到整幅图到最右侧距离,看来echarts用的是绝对位置

2 饼图选中后样式更改

tooltip: {
       trigger: 'item',
       confine:true,
       formatter: function (params) { // 提示内容太多隔行显示内容
           let data = option.series[0].data
           return pieSeriesFmt(data,params);
       },
   },

export const pieSeriesFmt = (data,params) =>{
    let total = 0
    let tarValue
    for (let i = 0; i < data.length; i++) {
        total += data[i].value
        if (data[i].name == params.name) {
            tarValue = data[i].value
        }
    }
    //计算出百分比
    let p = ((tarValue / total) * 100).toFixed(2) + '%'  
    var str = params.name + '<br>'
    str += '占比: ' + p + '<br>'
    str += '金额: ' + tarValue + '<br>'
    return str;
}