Echarts在线免费图表

 
            let xData = ['黑球兽', '布尼兽', '海狮兽', '独角兽', '巴鲁兽', '花仙兽']
let lastYearData = [3, 20, 122, 134, 55, 65]
let thisYearData = [11, 38, 23, 139, 66, 66]
let legend = ['战斗力', '颜值']
option = {
  backgroundColor: '#0a142f',
  color: ['#333FFF', '#23B899'],
  legend: {
    top: '0',
    right: 'center',
    width: '100%',
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 130,
    orient: 'horizontal',
    textStyle: {
      fontSize: 12,
      color: '#BAE7FF',
      height: 8,
      rich: {
        a: {
          verticalAlign: 'bottom',
        },
      },
    },
    data: legend,
  },
  grid: [
    {
      show: false,
      left: '5%',
      top: '15%',
      bottom: '11%',
      containLabel: true,
      width: '26%',
    },
    {
      show: false,
      left: '51%',
      top: '15%',
      bottom: '11%',
      width: '0%',
    },
    {
      show: false,
      right: '5%',
      top: '15%',
      bottom: '11%',
      containLabel: true,
      width: '26%',
    },
  ],
  xAxis: [
    {
      type: 'value',
      inverse: true,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitArea: { show: false },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.15)',
        },
      },
    },
    {
      gridIndex: 1,
      show: false,
    },
    {
      gridIndex: 2,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitArea: { show: false },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.15)',
        },
      },
    },
  ],
  yAxis: [
    {
      type: 'category',
      inverse: true,
      position: 'right',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitArea: { show: false },
      axisLabel: {
        show: false,
      },
      data: xData,
    },
    {
      gridIndex: 1,
      type: 'category',
      inverse: true,
      position: 'left',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: '#6A93B9',
        fontSize: 12,
      },
      data: xData.map((value) => {
        let str = value.length > 6 ? value.substring(0, 6) + '...' : value
        return {
          value: str,
          textStyle: {
            align: 'center',
          },
        }
      }),
    },
    {
      gridIndex: 2,
      type: 'category',
      inverse: true,
      position: 'left',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      data: xData,
    },
  ],
  series: [
    {
      name: legend[0],
      type: 'bar',
      barWidth: '30%',
      stack: '1',
      label: {
        normal: {
          show: true,
          position: 'left',
          color: '#fff',
          fontSize: 12,
          fontFamily: 'Bebas',
        },
      },
      itemStyle: {
        normal: {
          barBorderRadius: [30, 0, 0, 30],
        },
      },
      data: lastYearData,
      animationEasing: 'elasticOut',
    },
    {
      name: legend[1],
      type: 'bar',
      stack: '2',
      barWidth: '30%',
      xAxisIndex: 2,
      yAxisIndex: 2,
      label: {
        normal: {
          show: true,
          position: 'right',
          color: '#fff',
          fontSize: 12,
          fontFamily: 'Bebas',
        },
      },
      itemStyle: {
        normal: {
          barBorderRadius: [0, 30, 30, 0],
        },
      },
      data: thisYearData,
      animationEasing: 'elasticOut',
    },
  ],
};