1.案例1

1.1代码

option = {
  textStyle: {
    color: '#fff' // 标题文字颜色为白色
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    textStyle: {
      color: 'white'
    }
  },
  grid: {
    top: '15%',
    left: '4%',
    right: '4%',
    bottom: '7%',
    containLabel: true
  },
  xAxis:
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false // 隐藏Y轴的横线
      },
    },
  ],
  series: [
    {
      name: '供能',
      type: 'bar',
      barWidth: 8,
      data: [90, 50, 120, 132, 101, 134, 90, 230, 210, 150, 180, 220],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {offset: 1, color: '#42495d'},
            {offset: 0, color: '#f9564b'},
          ],
        },
        barBorderRadius: [10, 10, 0, 0],
      },
    },
    {
      name: '发电',
      type: 'bar',
      barWidth: 8,
      data: [80, 40, 220, 182, 191, 234, 290, 330, 310, 250, 280, 320],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {offset: 1, color: '#42495d'},
            {offset: 0, color: '#f3810d'},
          ],
        },
        barBorderRadius: [10, 10, 0, 0],
      },
    },
    {
      name: '供热',
      type: 'bar',
      barWidth: 8,
      data: [200, 210, 190, 222, 188, 233, 170, 165, 172, 200, 210, 211],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {offset: 1, color: '#414a5f'},
            {offset: 0, color: '#c1238d'},
          ],
        },
        barBorderRadius: [10, 10, 0, 0],
      },
    },
    {
      name: '供冷',
      type: 'bar',
      barWidth: 8,
      data: [0, 0, 0, 100, 150, 180, 200, 500, 420, 200, 0, 0],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {offset: 1, color: '#414a5f'},
            {offset: 0, color: '#06c9e1'},
          ],
        },
        barBorderRadius: [10, 10, 0, 0],
      },
    },
  ],
  barGap: '20%',
  barCategoryGap: '30%',
}

1.2效果展示

2.案例2

2.1代码

option = {
  xAxis: {
    axisTick: {
      show: false
      // 不显示坐标轴刻度线
    },
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        width: 2
        // 设置坐标轴线粗细为2px
      },
      color: '#F5F5F5',
    },
    type: