Echarts在线免费图表

 
            const color = ["#F3DF3A", "#F3DF3A", "#F3DF3A", "#F3DF3A"]
const color1 = ["#FD5480", "#FF7826", "#C6FF00", "#1890FF"]
const xLabel = ["一级告警", "二级告警", "三级告警", "四级告警"]
option = {
   backgroundColor: "black",
   animation: false,
   grid: {
      top: "20%",
      bottom: "25%" //也可设置left和right设置距离来控制图表的大小
   },
   xAxis: {
      data: xLabel,
      axisLine: {
         show: false
      },
      axisTick: {
         show: false //隐藏X轴刻度
      },
      axisLabel: {
         margin: 10,
         textStyle: {
            fontSize: 11,
            color: "#DEEBFF" //X轴文字颜色
         }
      }
   },
   yAxis: [
      {
         type: "value",
         name: "次",
         axisLine: {
            show: true,
            lineStyle: {
               color: "rgba(255,255,255,0.3)"
            }
         },
         splitLine: {
            lineStyle: {
               color: ['rgba(255,255,255,0.3)']
            }
         },
         nameTextStyle: {
            color: "#DEEBFF",
            fontSize: 12,
            lineHeight: 0
         },
         axisLabel: {
            show: true,
            margin: 2,
            fontSize: 12,
            textStyle: {
               color: "#DEEBFF"
            }
         }
      }
   ],
   series: [
      {
         type: "bar",
         barWidth: 18,
         itemStyle: {
            color: (params) => ({
               type: "linear",
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
                  {
                     offset: 0,
                     color: color[params.dataIndex] // 柱子最高度% 处的颜色
                  },
                  {
                     offset: 1,
                     color: color1[params.dataIndex] // X轴处的颜色
                  }
               ],
               global: false // 缺省为 false
            })
         },
         data: [55.6, 78.9, 56, 45.8],
         z: 10,
         zlevel: 2
      },
      {
         // 值分隔
         type: "pictorialBar",
         itemStyle: {
            normal: {
               color: "#0F375F"
            }
         },
         symbolRepeat: "fixed",
         symbolMargin: 3,
         symbol: "rect",
         symbolClip: true,
         symbolSize: [20, 3],
         symbolPosition: "start",
         symbolOffset: [0, 0],
         // symbolBoundingData: this.total,
         data: [55.6, 78.9, 56, 45.8],
         width: 25,
         z: 0,
         zlevel: 3
      },
      {
         //辅助背景图形
         name: "背景条",
         type: "bar", //pictorialBar
         barWidth: "20",
         barGap: "-105%",
         itemStyle: {
            normal: {
               borderWidth: 0,
               color: "rgba(146,158,48,0.2)"
            },
            barBorderRadius: 10
         },
         data: [100, 100, 100, 100],
         z: 0,
         zlevel: 0
      },
      {
         // 背景分隔
         type: "pictorialBar",
         itemStyle: {
            normal: {
               color: "#0F375F"
            },
            barBorderRadius: 10
         },
         symbolRepeat: "fixed",
         symbolMargin: 3,
         symbol: "rect",
         symbolClip: true,
         symbolSize: [20, 3],
         symbolPosition: "start",
         symbolOffset: [0, -1],
         // symbolBoundingData: this.total,
         data: [100, 100, 100, 100],
         width: 25,
         z: 0,
         zlevel: 1
      }
   ]
}