Echarts横向条形图demo

---

前言

横向条形图demo

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
  }
];
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: ['甲', '乙', '丙'],
      axisLabel: {
        show: true,
        inside: true,
        textStyle: {
          color: '#000',
          verticalAlign: 'bottom',
          fontSize: 12,
          align: 'left',
          padding: [0, 0, 10, 0]
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      inverse: true
    },
    {
      type: 'category',
      data: [12, 23, 34],
      axisTick: { show: false }, //不显示刻度线
      axisLabel: {
        show: true,
        inside: true,
        textStyle: {
          color: '#000',
          fontSize: 12,
          verticalAlign: 'bottom',
          align: 'right',
          padding: [0, 0, 10, 0]
        }
      },
      axisLine: {
        show: false
      },
      inverse: true
    }
  ],
  series: [
    {
      name: ['甲', '乙', '丙'],
      yAxisIndex: 0,
      tooltip: {
        show: true //显示提示框
      },
      type: 'bar',
      data: [12, 23, 34],
      // 修改第一条柱子的圆角
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: colorFn
        }
        // color 可以修改柱子的颜色
        // color:"orange"
      },
      // 柱子之间的间距
      barCategoryGap: 10,
      // 柱子之间的宽度
      barWidth: 5,
      // 显示柱子内的文字
      label: {
        show: true,
        color: '#000',
        position: 'inside',
        formatter: '{c}%'
        // {c} 会自动解析为data中的数据
      }
    },
    {
      // name: '框',
      tooltip: {
        show: false //显示提示框
      },
      yAxisIndex: 1,
      type: 'bar',
      barGap: '0%',
      // 柱子之间的间距
      barCategoryGap: 10,
      // 柱子之间的宽度
      barWidth: 10,
      data: NumberList
    
    }
  ]
};