Echarts在线免费图表

 
            const xData = ['设计项目总数', '已完成设计项目', '运行中设计项目', '已完成套图实际', '运行中套图计划'];
const seriseData1 = [20, 80, 30, 40, 30];
const seriseData2 = [10, 40, 50, 60, 20];
const option = {
   backgroundColor: '#010e1e',
   grid: {
      top: 30,
      left: 0,
      right: 0,
      bottom: 7,
      containLabel: true,
   },
   legend: {
      show: true,
      icon: 'rect',
      top: 0,
      left: 'center',
      itemWidth: 10,
      itemHeight: 6,
      textStyle: {
         color: "#fff"
      },
      data: [
         {
            name: '累计',
         },
         {
            name: '年度',
         }
      ]
   },
   xAxis: {
      data: xData,
      axisLine: {
         show: true,
         lineStyle: {
            color: '#0B7CC2'
         }
      },
      axisTick: {
         show: false //隐藏X轴刻度
      },
      axisLabel: {
         show: true,
         interval: 0,
         margin: 8,
         fontSize: 12,
         textStyle: {
            color: "#fff" //X轴文字颜色
         }
      },
   },
   yAxis: [
      {
         name: '单位(个)',
         nameTextStyle: {
            color: '#fff'
         },
         type: "value",
         splitLine: {
            show: true,
            lineStyle: {
               color: '#0B7CC2',
               type: 'dashed',
               width: 1
            },
         },
         axisTick: { show: false },
         axisLine: { show: false },
         axisLabel: {
            show: true,
            fontSize: 12,
            textStyle: {
               color: "#FFF" //X轴文字颜色
            }
         },
      },
   ],
   series: [
      {
         name: "累计",
         type: "pictorialBar",
         itemStyle: {
            color: "#92AAFF"
         },
         symbolRepeat: true,
         symbolMargin: 1,
         symbol: "rect",
         symbolClip: true,
         symbolSize: [10, 4],
         symbolPosition: "start",
         symbolOffset: [0, 0],
         data: [20, 80, 30, 40, 34, 90, 60],
         label: {
            show: true,
            position: "insideTop",
            distance: -12,
            fontSize: 10,
            color: "#fff"
         },
         z: 0
      },
      {
         name: "背景",
         type: "bar",
         itemStyle: {
            color: "rgba(41, 132, 229, 0.2)"
         },
         barWidth: 12,
         data: [100, 100, 100, 100, 100, 100, 100],
         z: 10,
         silent: true,
      },
      {
         name: "年度",
         type: "pictorialBar",
         itemStyle: {
            color: "#00F7FF"
         },
         symbolRepeat: true,
         symbolMargin: 1,
         symbol: "rect",
         symbolClip: true,
         symbolSize: [10, 4],
         symbolPosition: "start",
         symbolOffset: [0, 0],
         data: [10, 40, 30, 70, 24, 60, 50],
         label: {
            show: true,
            position: "insideTop",
            distance: -12,
            fontSize: 10,
            color: "#fff"
         },
         z: 10,
         barGap: '-80%'
      },
      {
         name: "背景",
         type: "bar",
         itemStyle: {
            color: "rgba(41, 132, 229, 0.2)"
         },
         barWidth: 12,
         data: [100, 100, 100, 100, 100, 100, 100],
         z: 10,
         silent: true,
      },
   ]
}