Echarts在线免费图表

 
            var yData = ["红色预警-(I级 特别严重)", "橙色预警-(II级 严重)", "黄色预警-(III级 较重)", "蓝色预警-(IV级 一般)"];
var xData = [270, 189, 157, 112];

option =  {
    grid: {
      left: '8%',
      right: '5%',
      bottom: 50,
      top: 10,
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'rgba(77, 128, 254, 0.2)',
          type: 'line',
        },
      },
      axisTick: {
        show: true,
      },
      axisLabel: {
        //  改变x轴字体颜色和大小
        show: true,
        textStyle: {
          fontSize: 16,
        },
      },
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisLabel: {
          show: true,
          formatter: (params) => {
            console.log(params);
            let str = params.split("-");
            return "{a| " + str[0] + "}\n{b| " + str[1] + "}";
          },
          rich: {
            a: {
              align: "right",
              padding: 4,
              color: "#666666"
            },
            b: {
              align: "right",
              padding: 4,
              color: "#B5B5B5"
            },
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: yData,
      },
    ],
    series: [
      {
        name: '',
        type: 'bar',
        zlevel: 1,
        label: {
          show: true,
          position: 'right', // 位置
          color: '#49D6F6',
          fontSize: 14,
          distance: 10, // 距离
          formatter: '{c}条' // 这里是数据展示的时候显示的数据
        }, // 柱子上方的数值
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: '#49D6F6',
              },
              {
                offset: 1,
                color: '#49D6F6',
              },
            ]),
          },
        },
        barWidth: 20,
        data: xData,
      },
    ],
  };