echarts + angular 柱状图进度条实现

最新推荐文章于 2024-08-19 17:39:38 发布

qq_23987787

最新推荐文章于 2024-08-19 17:39:38 发布

阅读量1.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_23987787/article/details/84572320

版权

效果图：
在这里插入图片描述

核心代码：

   const option = {
      color: this.color, //前景条的颜色
      tooltip: {
        show: true,
        formatter: '{c}%'
      },
      grid: {
        left: '3%',
        right: '4%',
        top: 'middle'
      },
      xAxis: [
        {
          show: false,
          type: 'value',
          max: 100 //可以设最大值
        }
      ],
      yAxis: [
        {
          show: false,
          type: 'category',
          data: ['1'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      series: [
      // 背景条
        {
          type: 'bar',
          barWidth: 12,
          silent: true,
          itemStyle: {
            normal: { color: '#003363', barBorderRadius: 45 }
          },
          barGap: '-100%',