【无标题】

最新推荐文章于 2024-10-11 17:39:47 发布

weixin_47560716

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量49

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/weixin_47560716/article/details/127126372

版权

echarts javascript ecmascript

echarts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

echarts进度条

在这里插入图片描述


var maxData = 2000;
option = {
  xAxis: {
    max: maxData,
    splitLine: { show: false },
    offset: 10,
    axisLine: {
     show: false
    },
    axisLabel: {
      show: false
    }
  },
  yAxis: {
    data: ['2013'],
    inverse: true,
    axisTick: { show: false },
    axisLine: { show: false },
    axisLabel: {
      show: false
    }
  },
  series: [
    {
      // current data 当前颜色深的块
      type: 'pictorialBar',
      symbol: 'rect',
      symbolRepeat: 'fixed',
      symbolMargin: '5%',
      symbolClip: true,
      symbolSize: 30,
      symbolBoundingData: maxData,
      data: [891],
      z: 10
    },
    {
      // full data 当前所有颜色浅的块，被压在下面的部分
      type: 'pictorialBar',
      itemStyle: {
        opacity: 0.2
      },
      label: {
        show: true,
        formatter: function (params) {
          return ((params.value / maxData) * 100).toFixed(1) + ' %';
        },
        position: 'right',
        offset: [10, 0],
        color: 'green',
        fontSize: 18
      },
     
      animationDuration: 0,
      symbolRepeat: 'fixed',
      symbolMargin: '5%',
      symbol: 'rect',
      symbolSize: 30,
      symbolBoundingData: maxData,
      data: [891],
      z: 5
    }
  ]
};