Echarts在线免费图表

 
            

var yName = ['2018', '2019', '2020', '2021'];
var xData = [0, 40, 70, 90];
var colorList = ['#5DFF3D', '#FFE028', '#F32424', '#54D9FF', '#987EFF'];


let maxNum = 0;
xData.forEach(v => {
  maxNum = maxNum > v ? maxNum : v
})
let bgData = []
yName.forEach((v, i) => {
  bgData.push({
    value: maxNum * 1.2,
    label: {
      position: 'right',
      show: true,
      color: colorList[i],
      formatter: (params) => {
        return `${xData[params.dataIndex]}`
      }
    }
  })
})

let option = {
  backgroundColor: '#000000',
  xAxis: {
    max: maxNum * 1.2,
    splitLine: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  grid: {
    left: 80,
    top: 20,
    right: 50,
    bottom: 20
  },
  yAxis: [
    {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: '#ff0000',
        fontSize: 14,
        verticalAlign: 'bottom',
        align: 'left',
        padding: [0, 0, 25, 10],
      },
      position: 'left',
      data: yName
    },
  ],
  series: [
    {
      // 背景样式
      name: '背景',
      type: "pictorialBar",
      barWidth: 10,
      // barHeight: 10,
      stack: '总量',
      barGap: '-100%',
      symbol: 'fixed',
      symbolRepeat: 'repeat',
      legendHoverLink: false,
      itemStyle: {
        normal: {
          color: 'rgba(233, 181, 122, 0.3)'
        },

      },
      data: bgData,
      symbolSize: [15, 25],
      symbolMargin: 8,
      animation: false, //关闭动画
      z: 0
    },
    {
      name: 'info',
      type: "pictorialBar",
      barWidth: 10,
      legendHoverLink: false,
      silent: true,
      itemStyle: {
        color: (params) => {
          return colorList[params.dataIndex]
        },
      },

      symbolRepeat: 'fixed',
      symbolMargin: 8,
      symbol: 'rect',
      symbolClip: true,
      symbolSize: [15, 25],
      symbolPosition: 'start',
      symbolOffset: [0, -1],
      data: xData,
      z: 1,
    },
  ]
};