Echarts之饼图图例格式化

最新推荐文章于 2024-09-02 11:16:50 发布

熟悉有你的地方

最新推荐文章于 2024-09-02 11:16:50 发布

阅读量2k

点赞数 1

分类专栏： echarts

本文链接：https://blog.csdn.net/qq_43519782/article/details/114142536

版权

echarts 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

需求：
在这里插入图片描述

鼠标移入时：
在这里插入图片描述

容器：

<div id="pieChart" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>

在methods中：

methods:{
   initChart() {
      let colors = ["#5599EC", "#00EA9C", "#F9CE16", "#FF913F", "#00FFF8"];
      let name = "访问来源"; //中间文字及弹窗标题
      let danwei = "个"; //单位
      let datas = [
        { value: 1048, name: "搜索引擎" },
        { value: 735, name: "直接访问" },
        { value: 580, name: "邮件营销" },
        { value: 484, name: "联盟广告" },
        { value: 300, name: "视频广告" },
      ];
      // 计算总量
      function countTotal(arr, keyName) {
        let $total = 0;
        $total = arr.reduce(function (total, currentValue, currentIndex, arr) {
          return currentValue[keyName]
            ? total * 1 + currentValue[keyName] * 1 //转换为number类型
            : total * 1;
        }, 0);
        return $total;
      }
      let total = countTotal(datas, "value");
      /**
       * @introduction 把数组中key值相同的那一项提取出来，组成一个对象
       * @description 详细描述
       * @param {参数类型} array 传入的数组 [{a:"1",b:"2"},{a:"2",b:"3"}]
       * @param {参数类型} key  属性名 a
       * @return {返回类型说明}
       * @exception [违例类型] [违例类型说明]
       */
      /* 
        { value: 1048, name: "搜索引擎" }   ==>   "搜索引擎":{ name: "搜索引擎" ,value: "1048" }
      */
      function array2obj(array, key) {
        var resObj = {};
        for (var i = 0; i < array.length; i++) {
          resObj[array[i][key]] = array[i];
        }
        return resObj;
      }
      let legendData = [];
      for (var j = 0; j < datas.length; j++) {
        var data = {
          name: datas[j].name,
          icon: "rect",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            rich: {
              title: {
                color: "#A0B2D3",
                fontSize: 20,
                fontWeight: "bolder",
                width: 120, //文字宽度
                align: "left",
              },
              value: {
                color: colors[j],
                fontSize: 26,
                fontWeight: "bolder",
                fontFamily: "BoldCondensed",
                width: 80, //数据宽度
                align: "left",
              },
              unit: {
                //单位
                color: "#A0B2D3",
                fontSize: 20,
                fontWeight: "bolder",
                //   padding: [0, 50, 0, 0],
              },
            },
          },
        };
        legendData.push(data);
      }
      let objData = array2obj(datas, "name");
      let option = {
        title: {
          x: "16%",
          y: "center",
          top: "40%",
          text: "{a|" + total + "}" + "{b|" + "个}" + "{c|\n}{c|" + name + "}",
          textStyle: {
            rich: {
              a: {
                fontSize: 38,
                color: "#FFFFFF",
                align: "center",
                fontFamily: "BoldCondensed",
                fontWeight: "bolder",
              },
              b: {
                fontSize: 20,
                color: "#A0B2D3",
                align: "center",
                fontWeight: "bolder",
              },
              c: {
                fontSize: 20,
                color: "#A0B2D3",
                align: "center",
                fontWeight: "bolder",
              },
            },
          },
        },

        color: colors,
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.9)",
          textStyle: {
            fontWeight: "bolder",
            fontSize: 20,
            fontFamily: "SourceHanSansCN",
          },
          // position: "right",
          formatter: function (params) {
            return (
              params.seriesName +
              "<br/>" +
              params.marker +
              '<span style="color:' +
              params.color +
              '">' +
              params.data["name"] +
              "\n" +
              params.data["value"]
                .toString()
                .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
              danwei +
              "(" +
              params.percent.toFixed(2) +
              "%" +
              ")" +
              "</span>"
            );
          },
        },

        legend: {
          orient: "vertical",
          top: "center",
          left: "50%",
          itemWidth: 10,
          itemHeight: 10,
          data: legendData,
          formatter: function (name) {
            return `{title|${name}}{value|${objData[name].value
              .toString()
              .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,")}}{unit|${danwei}}`;//千分位分隔符
          },
        },
        emphasis: {},
        grid: {
          left: 0,
        },
        graphic: {
          type: "text",
          left: "24%",
          top: "60%",
        },
        series: [
          {
            name: name,
            type: "pie",
            radius: ["80%", "50%"], //图像大小
            center: ["25%", "50%"], //这个属性调整图像的位置
            hoverAnimation: false,
            label: {
              show: false,
              position: "center",
            },

            top: 5,

            labelLine: {
              show: false,
            },
            animationType: "expansion",
            data: datas,
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("pieChart"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
}