Echarts在线免费图表

 
            let xData = ['550KV', '220KV'],
  yData = ['11', '12'],
  barData = ['9', '6']

 option = {
  backgroundColor: '#062544',
  grid: {
    top: '10%',
    left: '5%',
    bottom: '5%',
    right: '5%',
    containLabel: true,
  },

  tooltip: {
    trigger: 'item',
  },
  animation: false,
  xAxis: [
    {
      type: 'category',
      data: xData,
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        show: true, // 修改为 true 显示 x 轴线条
        lineStyle: {
          color: '#ddd',
        },
      },
      axisLabel: {
        textStyle: {
          color: '#ddd',
        },
        margin: 30,
      },
      interval: 1,
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLine: {
        show: false, // 修改为 true 显示 y 轴线条
        lineStyle: {
          color: '#ddd',
        },
      },
      axisLabel: {
        textStyle: {
          color: '#ddd',
        },
      },
      splitLine: {
        show: true, // 修改为 true 显示 y 轴分隔线
        lineStyle: {
          color: '#ddd',
          type: 'dashed', // 将分隔线设置为虚线
        },
      },
    },
  ],
  series: [
    {
      name: '上部圆',
      type: 'pictorialBar',
      silent: true,
      symbolSize: [40, 10],
      symbolOffset: [0, -6],
      symbolPosition: 'end',
      z: 12,
      label: {
        normal: {
          show: true,
          position: 'top',
          fontSize: 15,
          fontWeight: 'bold',
          color: '#5BFCF4',
        },
      },
      color: '#5BFCF4',
      data: yData,
    },
    {
      name: '底部圆',
      type: 'pictorialBar',
      silent: true,
      symbolSize: [40, 10],
      symbolOffset: [0, 7],
      z: 12,
      color: '#5BFCF4',
      data: yData,
    },

    {
      name: '部分停厂站',
      type: 'bar',
      barWidth: '40',
      barGap: '10%', // Make series be overlap
      barCateGoryGap: '10%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
            {
              offset: 0,
              color: 'rgba(210,210,210,0.3)',
            },
            {
              offset: 1,
              color: '#5BFCF4',
            },
          ]),
          opacity: 0.8,
        },
      },
      data: yData,
    },
    {
      name: '全停厂站',
      type: 'bar',
      barWidth: 40,
      z: 12,
      barGap: '-100%',
      itemStyle: {
        //lenged文本
        opacity: 0.7,
        color: function (params) {
          return new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#EB3B5A', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#FE9C5A', // 100% 处的颜色
              },
            ],
            false
          )
        },
      },

      data: barData,
    },
    {
      name: '上部圆',
      type: 'pictorialBar',
      silent: true,
      symbolSize: [40, 10],
      symbolOffset: [0, -6],
      symbolPosition: 'end',
      z: 12,
      color: '#EB3B5A',
      data: barData,
    },
    {
      name: '底部圆',
      type: 'pictorialBar',
      silent: true,
      symbolSize: [40, 10],
      symbolOffset: [0, 7],
      z: 12,
      color: '#FE9C5A',
      data: barData,
    },
  ],
}