echarts 进度条

echarts 进度条

  const colors = ['#f00', '#00f', '#ff0', '#0ff', '#f0f']
  const options = {
    title: {
      text: '世界人口总量',
      subtext: '数据来自网络'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      }
    },
    grid: {
      // left: '3%',
      // right: '4%',
      bottom: '1%',
      containLabel: true
    },
    xAxis: {
      show: false // 不显示x轴相关信息
    },
    yAxis: [
      {
        type: 'category',
        data: ['html5', 'css', 'js', 'vue', 'node'],
        axisTick: {show: false}, // 不显示刻度线
        axisLabel: {
          color: '#000'
        },
        axisLine: {
          show: false
        },
        inverse: true,
        max: 20
      },
      {
        type: 'category',
        data: [702, 350, 666, 555, 777],
        axisTick: {show: false}, // 不显示刻度线
        axisLabel: {
          color: '#000'
        },
        axisLine: {
          show: false
        },
        inverse: true,
        max: 20
      }
    ],
    series: [
      {
        name: '条',
        yAxisIndex: 0,
        type: 'bar',
        data: [70, 33, 60, 78, 69],
        // 修改第一条柱子的圆角
        itemStyle: {
          normal: {
            barBorderRadius: 20,
            color: function(params: any) {
              // params 传递过来的柱子对象
              // dataIndex 是当前柱子的索引
              var num = colors.length
              return colors[params.dataIndex % num]
            }
          }
          // color 可以修改柱子的颜色
          // color: 'orange',
          // borderRadius: 5 // 统一设置四个角的圆角大小
        },
        // 柱子之间的间距
        barCategoryGap: 1,
        // 柱子之间的宽度
        barWidth: 20,
        // 显示柱子内的文字
        label: {
          show: true,
          position: 'inside',
          formatter: '{c}%'
          // {c} 会自动解析为data中的数据
        },
        // 是否显示柱子背景色
        showBackground: true,
        backgroundStyle: {
          color: '#F2F2F2',
          borderRadius: 20 // 统一设置四个角的圆角大小
        }
      },
      {
        name: '框',
        yAxisIndex: 1,
        type: 'bar',
        data: [100, 100, 100, 100, 100],
        // 柱子之间的间距
        barCategoryGap: 5,
        // 柱子之间的宽度
        barWidth: 20,
        itemStyle: {
          color: 'none', // 填充色
          borderColor: '#F2F2F2',
          borderWidth: 1,
          barBorderRadius: 15
        },
        barCateGoryGap: 20 // 关键第二句：值或为百分比 ‘60%’ ，如果同一类目下的柱间距：barGap:20
      }
    ]
  }