vue+echarts+vue-echarts 自定义饼状图背景图、格式化legend展示

Cookie686

已于 2022-08-02 14:01:28 修改

阅读量1.5k

点赞数 1

文章标签： echarts 前端 javascript

于 2022-08-02 11:38:23 首次发布

本文链接：https://blog.csdn.net/Cookie686/article/details/126119188

版权

echarts 自定义饼状图背景图、格式化legend展示使用插件 vue-echarts

代码示例

HTML部分

<v-chart ref="heartMap" class="heartMap" :option="option"></v-chart>

js部分

//饼状图配置项
option: {
        tooltip: {
          trigger: "item",
        },
        // color:['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'],
        color: ["#FE3939", "#FFAD1E", "#FDDE62", "#D632EE", "#0096FF"],
        // 设置背景图
        graphic: [
          {
            type: "image",
            left: "0",
            top: "0",
            z: -10,
            bounding: "raw",
            rotation: 0, //旋转
            origin: [510, 100], //中心点
            scale: [0.8, 0.8], //缩放
            style: {
              // 背景图
              image: require("@/assets/images/warning.png"),
              opacity: 1,
            },
          },
        ],
        legend: {
          icon: "circle",
          bottom: "1%",
          left: "center",
          selectorLabel: {
            verticalAlign: "bottom",
          },
          textStyle: {
            align: "bottom",
            //图例文字的样式
            color: "#fff",
            fontSize: 12,
          },
          formatter: function(name) {
            return getDurationFormat(name);
          },
        },
        series: [
          {
            name: "告警级别",
            type: "pie",
            center: ["50%", "45%"],
            radius: ["55%", "70%"],
            avoidLabelOverlap: false,
            // itemStyle: {
            //   borderRadius: 1,
            //   borderColor: "#0b293a",
            //   borderWidth: 10,
            // },
            label: {
              show: false,
            },
            labelLine: {
              show: true,
            },
            data: [],
          },
        ],
      }
       // 饼图 legend 格式化
    const getDurationFormat = (name) => {
      let target;
      let sum = 0;
      let durationArray = option.series[0].data;
      for (let i = 0; i < durationArray.length; i++) {
        sum += durationArray[i].value
        if (durationArray[i].name == name) {
          target = durationArray[i].value;
        }
      }
      let params = `${name} \n ${((target / sum) * 100).toFixed(2) + "%"}`
      let tmp = params.split("\n");
      let res = "" + params;
      for (let i in tmp) {
        res = res.replace(tmp[i], " ");
      }
      return res + params;
    };