echarts饼图设置图例垂直+右对齐_echarts图例右对齐-CSDN博客

本文链接：https://blog.csdn.net/weixin_43657954/article/details/135603865

该文章描述了一个关于电力服务中各类问题占比的饼图，通过AccessFrom分类展示了停电、业扩报表、抢修质量等十个问题的具体数值，旨在通过数据可视化展示服务中的主要痛点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

options = {
    title: {     //饼图中间的文字设置
          show: true,
          left: "24%",
          top: "42%",
          text: "十类问题",
          textStyle: {
            fontSize: 12,
          },
          subtext: "8800",
          subtextStyle: {
            fontSize: 20,
          },
        },
     tooltip: {
          trigger: "item",
        },
     legend: {    //图例设置
          type: "scroll",
          right: 15,
          top: "middle",
          bottom: 20,
          orient: "vertical", //垂直
          itemGap: 15,//图例之间间距
          textStyle: {  //数据右对齐样式
            color: "#687F96",
            rich: {
              name: {//legend左边的文字
                fontSize: 10,
                padding: [3, 10, 0, 0]//1.左边的文字添加右边距10(可自己调整)
              },
              value: {//legend右边的值
                fontSize:12,
                color: "#182F41",
                backgroundColor: "transparent",//2.右边的值添加背景色
                align: "right",//3.右对齐
                padding: [5, -100, 0, 0],//4.设置右边距为-100(-70/-80..可自己调整)
              }
            }
          },
          formatter: function (name) {
            let data = options.series[0].data
            let total = 0
            let tarValue
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            let v = tarValue
            return [`{name|${name}}` + `{value|${v}}`].join(""); 数据右对齐样式
          },

        },
        series: [
          {
            name: "Access From",
            type: "pie",
            center: ["30%", "50%"], //饼图位置
            radius: ["65%", "90%"], //圆环大小
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },

            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "停电" },
              { value: 735, name: "业扩报表" },
              { value: 580, name: "抢修质量" },
              { value: 484, name: "电压质量" },
              { value: 300, name: "抄表催费" },
              { value: 1048, name: "客户基本信息" },
              { value: 735, name: "检修安排" },
              { value: 580, name: "服务" },
              { value: 484, name: "电能计量" },
              { value: 300, name: "电动汽车服务" },
            ],
          },
        ],
}