echarts实现饼图阴影，改变饼图的颜色，改变引导线的颜色

Bertha 。 2022-09-09 04:37 776阅读 0赞

## 一、实现效果如下： ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rip5bCP6bm_size_20_color_FFFFFF_t_70_g_se_x_16]

## 二、需求分析： ##

> 1、饼图阴影，就是在series中再加图层
    > 2、引导线labelLine->normal->lineStyle
    > 3、改变饼图的颜色后端返值＋itemStyle或者自己定义在option中color数组
    > 4、设置不同标识文字的颜色，在rich中写nameColor的样式
    >formatter: function (value) {
        
       let data = value.data;
       return ("{nameColor|" +data.name +"\n\n" +"}{green|" +data.value +"}{tColol|/" +"(条)}" +"\n\n");
    },

## 三、源码： ##

<template>
      <div class="operation-monitoring">
        <div class="power-monitoring-bottom">
          <div
            id="myChart"
            class="my-charts"
            style="width: auto; height: 400px"
          ></div>
        </div>
      </div>
    </template>
    <script>
    export default {
        
      data() {
        
        return {
        };
      },
      created() {
        },
      watch: {
        },
      mounted() {
        
        let that = this;
        that.drawEcharts();
      },
      methods: {
        
        drawEcharts() {
        
          // 如果后端传颜色的话，要是数据改变，感觉需要后端传
          // let data = [
          //   { name: "呼和浩特", value: 5.6, itemStyle: { color: "#684599" } },
          //   { name: "包头", value: 1, itemStyle: { color: "#D14874" } },
          //   { name: "鄂尔多斯", value: 0.8, itemStyle: { color: "#A8CE3B" } },
          //   { name: "乌兰察布", value: 0.5, itemStyle: { color: "#D6793E" } },
          //   { name: "阿拉善盟", value: 0.5, itemStyle: { color: "#39ABCD" } },
          //   { name: "锡林郭勒盟", value: 3.8, itemStyle: { color: "#394EA1" } },
          //   { name: "乌海", value: 3.8, itemStyle: { color: "#27A969" } },
          //   { name: "巴彦卓尔", value: 3.8, itemStyle: { color: "#D7CE29" } },
          // ];
          let data = [
            {
         name: "呼和浩特", value: 5.6 },
            {
         name: "包头", value: 1 },
            {
         name: "鄂尔多斯", value: 0.8 },
            {
         name: "乌兰察布", value: 0.5 },
            {
         name: "阿拉善盟", value: 0.5 },
            {
         name: "锡林郭勒盟", value: 3.8 },
            {
         name: "乌海", value: 3.8 },
            {
         name: "巴彦卓尔", value: 3.8 },
          ];
    
          let option = {
        
            color: [
              "#684599",
              "#D14874",
              "#A8CE3B",
              "#D6793E",
              "#39ABCD",
              "#394EA1",
              "#27A969",
              "#D7CE29",
              "rgba(0,0,0,0)",
            ],
            series: [
              // 主要展示层的
              {
        
                radius: ["45%", "60%"],
                center: ["50%", "50%"],
                type: "pie",
                hoverAnimation: false, //鼠标移入变大
                label: {
        
                  alignTo: "edge",
                  formatter: function (value) {
        
                    let data = value.data;
                    return ("{nameColor|" +data.name +"\n\n" +"}{green|" +data.value +"}{tColol|/" +"(条)}" +"\n\n");
                  },
                  minMargin: 15,
                  edgeDistance: 10,
                  lineHeight: 15,
                  rich: {
        
                    nameColor: {
        
                      fontSize: 20,
                      color: "#889BB4",
                    },
                    green: {
        
                      fontSize: 20,
                      marginBottom: 10,
                      color: "#4BA6B2",
                    },
                    tColol: {
        
                      fontSize: 14,
                      color: "#889BB4",
                    },
                  },
                },
                labelLine: {
        
                  length: 15,
                  length2: 0,
                  maxSurfaceAngle: 80,
                  normal: {
        
                    lineStyle: {
        
                      color: "#1B4668", // 改变标示线的颜色
                    },
                  },
                },
                labelLayout: function (params) {
        
                  var isLeft = params.labelRect.x < myChart.getWidth() / 2;
                  var points = params.labelLinePoints;
                  // Update the end point.
                  points[2][0] = isLeft
                    ? params.labelRect.x
                    : params.labelRect.x + params.labelRect.width;
    
                  return {
        
                    labelLinePoints: points,
                  };
                },
                data: data,
              },
    
              {
        
                name: "外边框",
                type: "pie",
                clockWise: false,
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: ["64%", "64%"], //边框大小
                center: ["50%", "50%"], //边框位置
                data: [
                  {
        
                    value: 10,
                    itemStyle: {
        
                      normal: {
        
                        borderWidth: 15, //设置边框粗细
                        borderColor: "rgb(9,37,71, 0.5)", //边框颜色
                      },
                    },
                  },
                ],
              },
            ],
          };
          var stackingBar = this.$echarts.init(document.getElementById("myChart"));
          stackingBar.setOption(option);
        },
      },
    };
    </script>

还有一位大佬实现如下图的样式，看了一下是利用到 type: “gauge”，仪表盘之类的，我把外边框的代码复制出来了，直接改就行，如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rip5bCP6bm_size_20_color_FFFFFF_t_70_g_se_x_16 1]

{
        
                name: "外边框",
                type: "pie",
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ["50%", "50%"],
                radius: ["70%", "70%"],
                label: {
        
                  normal: {
        
                    show: false,
                  },
                },
                data: [
                  {
        
                    value: 9,
                    name: "",
                    itemStyle: {
        
                      normal: {
        
                        borderWidth: 2,
                        borderColor: "#0b5263",
                      },
                    },
                  },
                ],
              },
              {
        
                name: "",
                type: "gauge", //主要是这里，仪表盘之类的
                radius: "80%",
                startAngle: 0,
                endAngle: 359.9,
                splitNumber: 100,
                hoverAnimation: true,
                axisTick: {
        
                  show: false,
                },
                splitLine: {
        
                  length: 20,
                  lineStyle: {
        
                    width: 4,
                    color: "#fff",
                  },
                },
                axisLabel: {
        
                  show: false,
                },
                pointer: {
        
                  show: false,
                },
                axisLine: {
        
                  lineStyle: {
        
                    opacity: 0,
                  },
                },
                detail: {
        
                  show: false,
                },
                data: data,
              },

大佬的地址：https://blog.csdn.net/wangxinxin1992816/article/details/88909962

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rip5bCP6bm_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/76dccde7913f40138c75a931aca051d2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rip5bCP6bm_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/0842183fbb214acabed3c5d009299794.png