包含关系饼图echart

1.演示图

image.png

2.配置

点击突出小圆形突出 ，点击图例同色系消失

import * as echarts from "echarts";
setChart5() {
    let _this = this;
//演示数据
    let arry =[
        {
        "shopType": 0,
        "isBorder": 1,
        "gmv": 7332.17
        },
        {
        "shopType": 0,
        "isBorder": 2,
        "gmv": 2370.15
        },
        {
        "shopType": 1,
        "isBorder": 1,
        "gmv": 570474.29
        },
        {
        "shopType": 1,
        "isBorder": 2,
        "gmv": 52894.14
        },
        {
        "shopType": 2,
        "isBorder": 1,
        "gmv": 901.39
        },
        {
        "shopType": 2,
        "isBorder": 2,
        "gmv": 4.02
        },
        {
        "shopType": 0,
        "isBorder": 0,
        "gmv": null
        },
        {
        "shopType": 1,
        "isBorder": 0,
        "gmv": null
        },
        {
        "shopType": 2,
        "isBorder": 0,
        "gmv": null
        }
        ]
      let chart = echarts.init(document.getElementById("Chart5"));
      if (chart) {
        chart.resize();
        chart.clear();
      } else return;

      let _data = [
        { value: 20, name: `shopee店铺`, shopType: 0 },
        { value: 12, name: `优选店铺`, shopType: 1 },
        { value: 5, name: `普通店铺`, shopType: 2 },
      ];
    //  <!-- 数据处理 -->
      arry.map((item, index) => {
        if (item.shopType == 0) {
          item.name=`shopee店铺`
        }
        if (item.shopType == 1) {
          item.name=`优选店铺`
        }
        if (item.shopType == 2) {
          item.name=`普通店铺`
        }
       item.value = Number(item.gmv).toFixed(2);
      });
   
    const res1 = arry.filter(item => item.shopType == 0);
    const res2 = arry.filter(item => item.shopType == 1);
    const res3 = arry.filter(item => item.shopType == 2);
  
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
     //   <!-- 背景圆 -->
       angleAxis: {
          interval: 1,
          type: "category",
          data: [
            `shopee店铺`,
            `优选店铺`,
            `普通店铺`,
          ],
          textStyle: {
            color: "red",
            fontSize: "14px",
          },
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#AFD8FF",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            interval: 0,
            show: false,
            color: "#181818",
            margin: 8,
            fontSize: 16,
          },
        },
        radiusAxis: {
          min: 0,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#AFD8FF",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            formatter: "{value} %",
            show: false,
            padding: [0, 0, 20, 0],
            color: "#AFD8FF",
            fontSize: 16,
          },
          splitLine: {
            lineStyle: {
              color: "#AFD8FF",
              width: 1,
              type: "solid",
            },
          },
        },
        polar: {},
        legend: {
          orient: 'horizontal',
          icon: 'roundRect',
          itemWidth: 10, 
          itemHeight: 10,
          itemGap: 20,
          bottom: '-5',
          x: 'center',
         data: [
         `shopee店铺`,
         `优选店铺`,
         `普通店铺`,    
          ],
        },
        series: [
   //     <!-- 中间小圆形 -->
          {
            name: '',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              fontSize: 14,
              show: false
            },
            color: ['#FF7E3D', '#5470C6', '#EDC948'],
            labelLine: {
              show: false
            },
            // // shopType: '1',//店铺类型 0 shopee店铺 1 优选店铺 2 普通店铺
            data: [
              { value: Number(res1[0].gmv)+ Number(res1[1].gmv), name:`${this.$t("site.shopee")}`, selected: this.defaultParams.shopType==0?true:false,shopType:0 },
              { value: Number(res2[0].gmv)+Number(res2[1].gmv), name:`${this.$t("site.Preferred")}`,selected: this.defaultParams.shopType==1?true:false,shopType:1},
              { value: Number(res3[0].gmv)+Number(res3[1].gmv), name:`${this.$t("site.Ordinary")}`,selected: this.defaultParams.shopType==2?true:false,shopType:2 },
              
            ]
          },
  //        <!-- 外圈圆形 -->
          {
            name: '',
            type: 'pie',
            radius: ['55%', '66%'],
            labelLine: {
              length: 30
            },
            tooltip: {
              show: true,
              formatter: function (params) {
                let {percent,name,value,data}=params
                let _name=""
                     // isBorder 0 其他 1 本土 2 跨境
                if (data.isBorder==2) {
                  _name=`(${_this.$t("site.isBorder1")})`
                }else{
                  _name=`(${_this.$t("site.isBorder2")})`
                }
                return `<div>${name}${_name} ： ${value}(${percent}%)</div>`;
              },
              
            },
            label: {
              show: false
            },
            // color: ['#E64700', '#FFB58F', '#8EC3FF','#5A82FF','#EEA22F','#FFEA9C',],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = [
                  '#E64700', '#FFB58F', '#8EC3FF','#5A82FF','#EEA22F','#FFEA9C'
                  ];
                  return colorList[colors.dataIndex];
                }
              },
            },
            data: arry
          },
          {
            type: "pie",
            radius: ["80%", "83%"],
            clickable:false,
            hoverAnimation: false,
            labelLine: {
              show: false,
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            tooltip: {
              show: false,
            },
            data: [
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#AFD8FF",
                  },
                },
              },
            ],
          },
        ]
      }

      chart.setOption(option);
 
    chart.off('click').on('click', function(obj) {

       // <!-- 更新数据 -->
       console.log(接口更新)
       // _this.initRefresh()
      });
   
      
    },