多层环装图标echarts

164 阅读1分钟

1622875431(1).png

实现:

``` title: {
          text: '行业分析',
          left: 'right',
          textStyle: {
            color: '#66A3F3',
            fontSize: 15
          }
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b}: {c} ({d}%)'
          position: function(point, params, dom, rect, size) {
            dom.style.transform = "translateZ(0)";
          }
        },
        series: [{
            name: '行业分析',
            type: 'pie',
            radius: ['11%', '18%'],
            labelLine: {
              length: 40,
            },
            data: [{
                value: 3426000,
                name: '公路货运量',
                itemStyle: {
                  normal: {
                    color: "#3EE6E3"
                  }
                }
              },
              {
                value: 4634000,
                name: '货物运输量',
                itemStyle: {
                  normal: {
                    color: "#237271",
                  }
                }
              }
            ]
          },
          {
            name: '行业分析',
            type: 'pie',
            radius: ['28%', '35%'],
            data: [{
                value: 3426000,
                name: '公路货运量',
                itemStyle: {
                  normal: {
                    color: "#5DDCFF"
                  }
                }
              },
              {
                value: 4634000,
                name: '货物运输量',
                itemStyle: {
                  normal: {
                    color: "#408ba0"
                  }
                }
              }
            ]
          },
          {
            name: '行业分析',
            type: 'pie',
            radius: ['48%', '55%'],
            data: [{
                value: 3426000,
                name: '公路货运量',
                itemStyle: {
                  normal: {
                    color: "#FDBE01"
                  }
                }
              },
              {
                value: 4634000,
                name: '货物运输量',
                itemStyle: {
                  normal: {
                    color: "#664f09"
                  }
                }
              }
            ]
          },
          // 外圈的虚线
          {
            name: 'decorationTwo',
            type: 'pie',
            color: ['#FF6C38', 'rgba(255,255,255,0)'],
            radius: ['68%', '75%'],
            hoverAnimation: false,
            lable: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: new Array(200).fill(10).map(() => {
              return {
                name: '',
                value: 0,
              };
            }),
          },
        ]
        }