echart饼图下钻为极坐标图联动，有过渡动画

展示

先是一个饼图

点击饼图的时候会下钻到对应的分类数据，并以极坐标展示，切换的时候是有过渡动画的，这里就不截动图了。

代码

echarts 版本 5.4.3
用的vue，引入就不说了

这里是第一级饼图的代码

drawLine() {
      let myChart = this.$echarts.init(document.getElementById("left1Chart"));
      this.myChart = myChart
      this.barOption = {
      	//图标标题
        title: {
          text: "机构类型占比",
          show: true,
          target: "blank",
          textStyle: {
            "color": "#fff", "fontStyle": "normal", "fontWeight": "bolder", "fontSize": 14, "lineHeight": 30,
            "textBorderColor": "", "textBorderWidth": 1, "textBorderType": "solid", "textBorderDashOffset": 1,
            "textShadowColor": "transparent", "textShadowBlur": 1, "textShadowOffsetX": 1, "textShadowOffsetY": 1, "overflow": "none"
          },
          top: 0,
          left: 0
        },
        //图标右边对应的选择块
        legend: {
          orient: 'vertical',
          right: -7,
          top: 50,
          bottom: 20,
          itemStyle: {
            borderColor: '#C1C1C1'
          },
          textStyle: {
            color: '#C1C1C1'
          },

          inactiveColor: '#7C7C7C'
        },
        //工具 这里放了数据展示、刷新、下载
        toolbox: {
          right: 30,
          top: 10,
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        //鼠标悬浮展示内容
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
          // 机构类型<br/>
        },
        //数据
        series: [
          {
            id: 'sales',
            name: '机构类型',
            type: 'pie',
            radius: ['5%', '70%'], //大小
            center: ['35%', '60%'], //位置
            roseType: 'area',
            itemStyle: {
              borderRadius: 8,
              normal: {
                labelLine: {
                  length: 8
                }
              }
            },
            label: {
              show: false
            },
            data: [
              //grounpid很重要 关联子级数据的
              { value: 85, name: 'xxx1', type: '0', groupId: 'group0' },
              { value: 48, name: 'xxx2', type: '1', groupId: 'group1' },
              { value: 35, name: 'xxx3', type: '2', groupId: 'group2' },
              { value: 60, name: 'xxx4', type: '3', groupId: 'group3' },
              { value: 50, name: 'xxx5', type: '4', groupId: 'group4' }
            ],
            //过渡动画开启
            universalTransition: {
              enabled: true
            }
          }
        ]
      };
      let currentOption = this.barOption;
      myChart.setOption(currentOption, true);
      myChart.on('click', (param) => { //添加点击事件
      	//这里判断了下 因为极坐标点返回时会触发这里一次 不判断会报错
        if (param.seriesName == '机构类型') {
          //设置下级的数据
          let data = this.setDeepChart(param.data.type);
          //echart setOption
          myChart.setOption(data, true)
        }
      });
      setTimeout(() => {
      	//页面大小变化时 resizeEC函数放最后吧
        window.addEventListener("resize", this.resizeEC);
      });
    },

这里是第二级极坐标图的代码

//注释我就不写了 可以上echarts配置项里搜就知道了
setDeepChart(type) {
      let id = 'group' + type //根据type组一个id 跟上级数据的groupId对应
      let data = []  //数据的value
      let data2 = []  //数据的label
      if (type == '0') {
        data = [100, 20, 90, 60];
        data2 = ['xxxx1', 'xxxx2', 'xxxx3', 'xxxx4'];
      }
      if (type == '1') {
        // xxx
        data = [100, 20, 90, 60];
        data2 = ['xxxx', 'xxxx', 'xxxx', 'xxxx'];
      }
      if (type == '2') {
        data = [100, 20];
        data2 = ['xxxx', 'xxxx'];
      }
      if (type == '3') {
        data = [100];
        data2 = ['xxxx'];
      }
      if (type == '4') {
        data = [100];
        data2 = ['xxxx'];
      }
      let option = {}
      const scatterOption = (option = {
        polar: {
          radius: [40, '70%'],  //大小
          center: ['60%', '55%'],  //位置
        },
        angleAxis: {
          interval: 20,
          type: 'value',
          splitNumber: 2,
          max: function (value) {
            return value.max + value.max / 3; 
          },
        },
        radiusAxis: {
          interval: 0,
          type: 'category',
          nameLocation: 'end',
          axisLabel: {
            interval: 0,
            margin: 130,
            color: '#eee'
          },
          zlevel: 1,
          axisTick: {
            interval: 0,
            alignWithLabel: true,
            show: true,
            inside: false,
            length: 120, // 刻度长度
            lineStyle: {
              color: '#eee',
              width: 2, // 线宽
            }
          },
          data: data2
        },
        tooltip: { formatter: '{b}：{c}' },
        title: {
          text: "xxxxx2",
          show: true,
          target: "blank",
          textStyle: {
            "color": "#fff", "fontStyle": "normal", "fontWeight": "bolder", "fontSize": 14, "lineHeight": 30,
            "textBorderColor": "", "textBorderWidth": 1, "textBorderType": "solid", "textBorderDashOffset": 1,
            "textShadowColor": "transparent", "textShadowBlur": 1, "textShadowOffsetX": 1, "textShadowOffsetY": 1, "overflow": "none"
          },
          top: 0,
          left: 0
        },
        graphic: [
          {
            type: 'text',
            right: 50,
            top: 20,
            style: {
              text: '返回',
              fill: '#fff',
              fontSize: 18
            },
            onclick: () => {
              this.myChart.setOption(this.barOption, true);
            }
          }
        ],
        series: [{
          type: 'bar',
          showBackground: true,
          backgroundStyle: '#46505A',
          stack: 'total',
          barCategoryGap: '40%',
          data: data,
          itemStyle: {
            // 颜色按照数值从浅到深
            color: function (params) {
              var colorList = [
                ['#212EAA', '#BBDAF1'],
                ['#1C50EA', '#BBDAF1'],
                ['#1C83EA', '#BBDAF1'],
                ['#15BCE0', '#BBDAF1'],
                ['#21AA8B', '#BBDAF1']
              ];
              var colorItem = colorList[params.dataIndex];
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: colorItem[0]
              },
              {
                offset: 1,
                color: colorItem[1]
              }
              ], false);
            }
          },
          coordinateSystem: 'polar',
          id: 'sales',
          dataGroupId: id,
          universalTransition: {
            enabled: true,
          },
        }]
      });
      return scatterOption
    },

网上有关echarts极坐标图的资料很少，这里还是花了点时间的
本文章为作者日常记录。