Echarts进度条状的柱状图demo

项目场景：

Echarts进度条状的柱状图

---

问题描述

@Override
	var colorList = [
  ['#00E8FF', '#429DFF'],
  ['#E1F24C', '#8AEC6A'],
  ['#2BF3E4', '#04DFCF']
];
function colorFn(params) {
  //params 传递过来的柱子对象
  // dataIndex 是当前柱子的索引
  var colorItem = colorList[params.dataIndex];
  return new echarts.graphic.LinearGradient(
    1,
    0,
    0,
    0,
    [
      {
        offset: 0,
        color: colorItem[0]
      },
      {
        offset: 1,
        color: colorItem[1]
      }
    ],
    false
  );
}
let sumNumber = [{ value: 100 }, { value: 100 }, { value: 100 }];
console.log(sumNumber);
let NumberList = sumNumber.map((v, index) => {
  return {
    value: v.value,
    itemStyle: {
      normal: {
        barBorderRadius: 15,
        color: 'none', //填充色
        borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: colorList[index][1]
          },
          {
            offset: 1,
            color: colorList[index][0]
          }
        ])
      },

      borderWidth: 2
    }
  };
});
 option = {
  // tooltip: {
  //   // trigger: 'axis',
  //   axisPointer: {
  //     type: 'shadow'
  //   }
  // },
  grid: {
    left: '10%',
    right: '4%',
    bottom: '0%',
    top: '10%'
    // containLabel: true
  },
  xAxis: {
    show: false //不显示x轴相关信息
  },
  yAxis: [
    {
      type: 'category',
      data: ["111111", "222222", "333333"],
      axisLabel: {
        show: true,
        inside: true,
        textStyle: {
          color: '#fff',
          verticalAlign: 'bottom',
          fontSize: 12,
          align: 'left',
          padding: [0, 0, 10, 0]
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      inverse: true
    },
    {
      type: 'category',
      data:[28.19, 15078, 11606],//显示的数据
      axisTick: { show: false }, //不显示刻度线
      axisLabel: {
        show: true,
        inside: true,
        textStyle: {
          color: '#fff',
          fontSize: 12,
          verticalAlign: 'bottom',
          align: 'right',
          padding: [0, 0, 10, 0]
        }
      },
      axisLine: {
        show: false
      },
      inverse: true
    }
  ],
  series: [
    {
      name:["111111", "222222", "333333"],
      yAxisIndex: 0,
      tooltip: {
        show: true //显示提示框
      },
      type: 'bar',
      data:[90, 40, 10],
      // 修改第一条柱子的圆角
      itemStyle: {
        normal: {
          barBorderRadius: 20,
          color: colorFn
        }
        // color 可以修改柱子的颜色
        // color:"orange"
      },
      // 柱子之间的间距
      barCategoryGap: 10,
      // 柱子之间的宽度
      barWidth: 5
      // 显示柱子内的文字
      // label: {
      //   show: true,
      //   color:'#fff',
      //   position: 'inside',
      //   formatter: '{c}%'
      //   // {c} 会自动解析为data中的数据
      // }
    },
    {
      // name: '框',
      tooltip: {
        show: false //显示提示框
      },
      yAxisIndex: 1,
      type: 'bar',
      barGap: '0%',
      // 柱子之间的间距
      barCategoryGap: 10,
      // 柱子之间的宽度
      barWidth: 10,
      data: NumberList
    }
  ]
};

---