echarts饼图图例显示名字和数据

使用echarts饼图，实现以下效果：

第一步  设置图例垂直属性

  orient: "vertical",

第二步 显示名字和数据，并且数据右对齐

  legend: {
    type: "scroll",
    right: 35,
    top: "middle",//居中显示
    bottom: 20,
    orient: "vertical",//垂直
    itemGap: 15, //图例间距
    itemHeight: 10.5, //图例高度
    itemWidth: 10.52,//图例宽度
    textStyle: {
      // 数据右对齐样式
      color: "#fff",
      rich: {
        a: {
          // legend左边的文字
          width: 50,
          fontSize: 10,
          padding: [3, 10, 0, 0], // 1.左边的文字添加右边距10(可自己调整)
        },
        b: {
          // legend右边的值
          fontSize: 12,
          backgroundColor: "transparent", // 2.右边的值添加背景色
          align: "right", // 3.右对齐
          padding: [5, -100, 0, 0], // 4.设置右边距为-100(-70/-80..可自己调整)
        },
      },
    },
  },

第三步 在legend里写完，需要去组件里写一下，我这里是把配置写成.js文件后引入的，需要用到接口里的值，如果直接在组件里写，就写在配置里就行

        <div style=" width: 412px;height: 260px;">
            <VChart
              :option="optionPie"
              style="width: 100%; height: 250px"
              autoresize
            />
          </div>

\\\\\\\\\\\\\\\\\\\\
<script>
import { optionPie } from "./option";
export default {
    data(){
    return {
            optionPie: {}
        }
    },
    methods:{
    getOptions(){

        this.optionPie.legend.formatter = function (name) {
        let tarValue;
        //这里是后端返回的list
        this.optionPie.series[0].data.forEach((item) => {
          if (name === item.name) {
            tarValue = item.value;
          }
        });
        return [`{a|${name}}` + `{b|${tarValue}}`].join(""); //需要返回什么就加什么，但是a,b,对应配置里的a,b,样式和名字要对上，也可以添加多个样式，a,b,c,d……
      };

    }
   }  
}

注意：如果配置写在组件里，就这样写：完整代码

在methods里定义一个方法
methods:{
 getOptions = {
  this.optionPie = {
  color: ["#2e63e5", "#d54389", "#fdd851", "#51fd51", "#3ad6f2", "#6c3af2"],

  title: {
    show: true,
    left: "27%",
    top: "48%",
    text: "",
    // textStyle: {
    //   fontFamily: "DIN Alternate",
    //   fontWeight: 700,
    //   color: "#ffffff",
    //   fontSize: 32,
    // },
    subtext: "派发量(件)",
    subtextStyle: {
      fontFamily: "Alibaba PuHuiTi-Regular",
      color: "#ffffff",
      fontSize: 14,
    },
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    type: "scroll",
    right: 35,
    top: "middle",
    bottom: 20,
    orient: "vertical",
    itemGap: 15,
    itemHeight: 10.5,
    itemWidth: 10.52,
    textStyle: {
      // 数据右对齐样式
      color: "#fff",
      rich: {
        a: {
          // legend左边的文字
          width: 50,
          fontSize: 10,
          padding: [3, 10, 0, 0], // 1.左边的文字添加右边距10(可自己调整)
        },
        b: {
          // legend右边的值
          fontSize: 12,
          backgroundColor: "transparent", // 2.右边的值添加背景色
          align: "right", // 3.右对齐
          padding: [5, -100, 0, 0], // 4.设置右边距为-100(-70/-80..可自己调整)
        },
      },
    },
formatter:function (name) {
        let tarValue;
        //从接口里取
        this.optionPie.series[0].data.forEach((item) => {
          if (name === item.name) {
            tarValue = item.value;
          }
        });
        return [`{a|${name}}` + `{b|${tarValue}}`].join("");
      };
  },
  series: [
    {
      name: "",
      type: "pie",
      center: ["35%", "50%"],
      radius: ["55%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      itemStyle: {
        // borderRadius:10,
        borderColor: "#000329",
        borderWidth: 10,
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 40,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [],
    },
  ],
};
}
}

 第四步 中间文字显示

有两种办法：

1. 静态：值不会改变，只做展示
2. 动态：会根据后台返回的数据和名字改变

注意：我这里事先把默认文字显示关了

  series: [

    {

      name: "",

      type: "pie",

      center: ["35%", "50%"], //圆环上下，左右距离

      radius: ["55%", "70%"], //圆环内，外大小 粗细

      avoidLabelOverlap: false,

      label: {

        show: false, //显示中间文字，关闭

        position: "center",

      },

      itemStyle: {

        // borderRadius:10,

        borderColor: "#000329",

        borderWidth: 10,

      },

      emphasis: {

        label: {

          show: false, //鼠标一上去显示文字，关闭

          fontSize: 40,

          fontWeight: "bold",

        },

      },

      labelLine: {

        show: false, //关闭

      },

      data: [],

    },

  ],

 静态文字显示的缺就是，无法根据数据或者名字修改位置，使其一直保持在中间，位置是固定的

 optionPie = {
//显示中间的文字
  title: {
    show: true,
    left: "27%", //文字左边距离
    top: "48%",//文字上边距离
    text: "1234", //主标题(上边的文字)
    textStyle: {  //主标题上边文字的样式
        fontFamily: "DIN Alternate",
        fontWeight: 700,
        color: "#ffffff",
        fontSize: 32,
    },
    subtext: "派发量(件)", //副标题(下边的文字)
    subtextStyle: {        //副标题下边文字样式
      fontFamily: "Alibaba PuHuiTi-Regular",
      color: "#ffffff",
      fontSize: 14,
    },
  },
……
}

动态，我这里只需要根据后端返回展示数据就行，不用鼠标滑到那个上面，中间就显示哪个，所以 我这里是自己画了一个盒子，显示数据

          <div class="businessTypePie">
            <div class="businessType">
              <div style="margin-top: -15px">{{ allCount }}</div>
            </div>
            <VChart
              :option="optionPie"
              style="width: 100%; height: 250px"
              autoresize
            />
          </div>

、、、、、、、、、、

<style lang="less" scoped>
//这里使用了定位，使中间的文字数据始终保持在中间显示
    .businessTypePie {
      position: relative;
      height: 260px;
      margin-top: 20px;
      width: 412px;
      .businessType {
        position: absolute;
        width: 136.11px;
        height: 135.28px;
        border-radius: 50px;
        top: 58px;
        left: 78px;
        line-height: 135.28px;
        font-family: DIN Alternate;
        font-weight: 700;
        color: #ffffff;
        font-size: 32px;
        text-align: center;
//这里使用径向渐变调的色
        background-image: radial-gradient(
          rgba(6, 162, 255, 0.1) 45%,
          rgba(0, 134, 255, 0.42) 65%,
          #000329 86%
        );
      }
    }
</style>