echarts3/4带缺口多重/3层环形图问题解决

橙子yq

于 2024-05-20 14:02:19 发布

阅读量177

点赞数 1

文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/m0_49031950/article/details/138811714

版权

参考资料： https://www.cnblogs.com/023cq/p/12941604.html

按参考资料，改楼主四层的环形图改为3层的后，文字描述一直对不齐，如下图：

改了很多版都一直对不齐，最终后台同学帮忙把整个逻辑重新改了一版，代码如下：

option = {
  color: ['#44cc7e', '#4da0ff', '#fe9647'],
  grid: [ // 文字描述位置调整
    {
      // show: true,
      width: '4%',
      height: '15%',
      top: 100,
      bottom: '5%',
      left: '50%',
      containLabel: true
    }
  ],
  xAxis: { show: false },
  yAxis: {
   
    type: 'category',
    inverse: true,
    axisLabel: {
      width: 10,
      height: 10,
      show: true,
      inside: true,
      formatter: function (value, index) {
        return `{${index}|${value}%}`;
      },
      rich: {
        0: {
          height: 10,
          color: '#333333',
          fontSize: 16,
          padding: [-10, 0, 4, 0] // 对齐要慢慢调padding
        },
        1: {
          // height: 10,
          color: '#333333',
          fontSize: 16,
          padding: [-5, 0, 4, 0]
        },
        2: {
          color: '#333333',
          height: 10,
          fontSize: 16,
          padding: [10, 0, 4, 0]
        }
      }
    },

    axisLine: { show: false },
    axisTick: { show: false },
    data: [39.0, 22.0, 57.0,],
    interval: 0
  },
  legend: {
    textStyle: { fontWeight: 'normal', fontSize: 14 },
    top: 80,
    right: 190,
    show: true,
    orient: 'vertical',
    align: 'right',
    itemGap: 20,
    itemWidth: 20,
    itemHeight: 7,
    data: ['2023年', '2022年', '2021年']
  },
  series: [
    {
      type: 'pie',
      name: '2023年',
      data: [
        { name: '2023年', value: 27709.5 },
        { name: '', value: 43666.5, itemStyle: { color: '#eeeeee' } },
        { name: '', value: 23792.0, itemStyle: { color: 'transparent' } }
      ],
      itemStyle: { borderColor: 'transparent' },
      label: { show: false },
     radius: [196, 170],
      // center: [530,373],
      clockwise: false
    },
    {
      type: 'pie',
      name: '2022年',
      data: [
        { name: '2022年', value: 18532.5 },
        { name: '', value: 67665.15, itemStyle: { color: '#eeeeee' } },
        { name: '', value: 28732.55, itemStyle: { color: 'transparent' } }
      ],
      itemStyle: { borderColor: 'transparent' },
      label: { show: false },
     radius: [160, 134],
      clockwise: false
    },
    {
      type: 'pie',
      name: '2021年',
      data: [
        { name: '2021年', value: 93738.75 },
        { name: '', value: 70613.0925, itemStyle: { color: '#eeeeee' } },
        { name: '', value: 54783.9475, itemStyle: { color: 'transparent' } }
      ],
      itemStyle: { borderColor: 'transparent' },
      label: { show: false },
       radius:  [120, 96],
      clockwise: false
    }
  ]
};

效果如图（完美）