使用Echarts实现环形柱形图

采用Echarts实现双环条形图的实现方式的代码如下：

let TABLE_DATA = [
  [类型, 项数],
  [当年案件项数, 1602],
  [重大法律纠纷案件项数, 19236]
];
let maxValue = 0;
let x = [];
let y = [];
let y2 = [];
for (let index in TABLE_DATA) {
          
   
  if (index != 0) {
          
   
    maxValue += TABLE_DATA[index][1];
    x.push(TABLE_DATA[index][0]);
    y.push(TABLE_DATA[index][1]);
  }
  
}
for (let index in TABLE_DATA) {
          
   
  if(index){
          
   
    y2.push(maxValue);
  }
}
let colorList = [#FFD743, #4690FF]; //上层环背景
let bgList = [#293470,#293470]; //下层环背景

option = {
          
   
  //设置标题
  title:{
          
   
    text: maxValue + 
全部案件项目数,
    textStyle:{
          
   
      fontSize: 17,
      lineHeight: 52,
      color: rgba(255,255,255,0.85),
      fontWeight: 700,
    },
    textAlign: center,
    left: 49.5%,
    top:36%
  },
  
  //极轴设置
  angleAxis: {
          
   
    show: false, //隐藏角度轴
    max: maxValue, //一圈最大值
    startAngle: 90, //直角坐标系开始角度
    splitLine: {
          
   
      show: false //刻度线的隐藏和显示
    }
  },

  //设置柱子最大宽度
  barMaxWidth: 8,

  //设置极坐标分类
  radiusAxis: {
          
   
    show: false, //隐藏径的半径
    type: category,
    data: x
  },

  polar: {
          
   
    radius: [60, 144] //总体的最小半径，最大半径
  },

  legend: {
          
   },
  tooltip: {
          
   },
  series: [
    //上层圆环
    {
          
   
      type: bar,
      data: y,
      coordinateSystem: polar, //设置类型为极坐标
      roundCap: true, //柱状图末端呈现圆角
      itemStyle: {
          
   
        //设置每一个圆环的颜色
        color: (params) => {
          
   
          return colorList[params.dataIndex];
        }
      },
      animationEasing: bounceOut, //初始动画
      barGap: -100%, //柱间距离,用来将上下两种圆环重合
      z: 200 //圆环层级，和zindex相似
    },
    {
          
   
      //下层的圆环
      type: bar,
      data: y2,
      coordinateSystem: polar,
      roundCap: true,
      itemStyle: {
          
   
        //设置每一个圆环的颜色
        color: (params) => {
          
   
          return bgList[params.dataIndex];
        }
      },
      z: 100,
      barGap: -100% //柱间距离,用来将上下两种圆环重合
    }
  ]
};