使用Echarts实现环形柱形图

君のために一生を捧げた

已于 2024-02-07 08:16:03 修改

阅读量1k

点赞数

分类专栏： Echarts 文章标签： echarts

于 2022-07-28 11:29:43 首次发布

本文链接：https://blog.csdn.net/weixin_48474646/article/details/126031142

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

采用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 + '\n全部案件项目数',
    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%' //柱间距离,用来将上下两种圆环重合
    }
  ]
};