Echarts在线免费图表

 
            let xLabel = ["市区"];
let data = {
   activeTotalForToday: 40,
   carTotal: 100,
};
option = {
   backgroundColor: '#002a4c',
   animation: true,
   grid: {
      top: "center",
      // bottom: "1%", //也可设置left和right设置距离来控制图表的大小
      left: ".5%", //也可设置left和right设置距离来控制图表的大小
      right: ".5%", //也可设置left和right设置距离来控制图表的大小
   },
   xAxis: {
      type: "value",
      gridIndex: 0,
      min: 0,
      max: data.carTotal,
      interval: 25,
      splitLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisLabel: {
         show: false,
      },
   },
   yAxis: [
      {
         data: ["市区"],
         axisLine: {
            show: false, //隐藏X轴轴线
         },
         axisTick: {
            show: false, //隐藏X轴刻度
         },
         axisLabel: {
            show: false,
         },
      },
   ],
   series: [
      {
         // 值
         name: "情况",
         type: "bar",
         barWidth: 20,
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                     offset: 1,
                     color: "rgba(65, 171, 184, 1)",
                  },
                  {
                     offset: 0,
                     color: "rgba(81, 242, 103, 1)",
                  },
               ]),
            },
         },
         data: [data.activeTotalForToday],
         z: 10,
         zlevel: 2,
         label: {
            show: false,
         },
      },
      {
         // 值分隔
         type: "pictorialBar",
         itemStyle: {
            normal: {
               color: "#002a4c",
            },
         },
         symbolRepeat: "fixed",
         symbolMargin: 6,
         symbol: "rect",
         symbolClip: true,
         symbolSize: [6, 20],
         symbolPosition: "start",
         symbolOffset: [0, 0],
         data: [data.activeTotalForToday],
         width: 15,
         z: 0,
         zlevel: 3,
      },
      {
         //辅助背景图形
         name: "背景条",
         type: "bar", //pictorialBar
         barWidth: "20",
         barGap: "-100%",
         itemStyle: {
            normal: {
               borderWidth: 0,
               color: "RGBA(13, 58, 82, 1)",
            },
            barBorderRadius: 10,
         },
         data: [data.carTotal],
         z: 0,
         zlevel: 0,
      },
      {
         // 背景分隔
         type: "pictorialBar",
         itemStyle: {
            normal: {
               color: "#002a4c",
            },
         },
         symbolRepeat: "fixed",
         symbolMargin: 6,
         symbol: "rect",
         symbolClip: true,
         symbolSize: [6, 20],
         symbolPosition: "start",
         symbolOffset: [0, 0],
         data: [data.carTotal],
         width: 15,
         z: 0,
         zlevel: 1,
      },
   ],
};