Echarts在线免费图表

 
            let data = {
   xAxisData: ["业务受理", "方案答复", "设计审查", "中间检查", "验收接电"],
   seriesData: [
      [200, 85, 12, 275, 305],
      [123, 55, 20, 55, 305]
   ]
};
option = {
   backgroundColor: '#2255b4',
   color: ["#63caff", "#49beff", "#ddc854", "#ddc854"],
   grid: {
      top: '23%',
      left: '3%',
      right: '3%',
      bottom: '5%',
      containLabel: true,
   },
   tooltip: {
      trigger: 'axis',
      formatter: (params) => {
         return params[0].name + '</br>' +
            params[1].marker + '：' + params[0].value + '</br>' +
            params[4].marker + '：' + params[3].value;
      }
   },
   legend: {
      left: 10
   },
   xAxis: {
      type: 'category',
      data: data.xAxisData,
      splitLine: {
         show: false,
      },
      axisLabel: {
         color: "#ffffff",
         fontSize: 12,
         interval: 'auto', // x轴间距
         // rotate:40
      },
      axisTick: {
         show: false
      },
      axisLine: {
         lineStyle: {
            color: 'rgba(152, 212, 255, .5)',
         }
      },
   },
   yAxis: [{
      type: 'value',
      name: "单位：万元",
      nameGap: '30',
      min: 0,
      axisTick: {
         show: false
      },
      axisLabel: {
         show: true,
         fontSize: 12,
         color: "#fff",
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: 'rgba(152, 212, 255, .5)',
         }
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(152, 212, 255, .1)',
         }
      },
      nameTextStyle: {
         color: "#fff    ",
         fontWeight: 400,
         fontSize: 12,
      },
   }],
   series: [{
      data: data.seriesData[0],
      type: "bar", // 柱图
      barMaxWidth: "auto",
      barWidth: 20,
      name: "物资",
      itemStyle: {
         color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [{
               offset: 0,
               color: "#2A76FF"
            }, {
               offset: 0.5,
               color: "#00A8FF"
            }, {
               offset: 1,
               color: "#00D8FF"
            }]
         }
      }
   },
   {
      data: [1, 1, 1, 1, 1],
      type: "pictorialBar", // 底部
      barMaxWidth: "20",
      symbolOffset: [-13, "50%"],
      symbolSize: [20, 7]
   }, {
      data: data.seriesData[0],
      type: "pictorialBar",  // 顶部
      barMaxWidth: "20",
      symbolPosition: "end",
      symbolOffset: [-13, "-50%"],
      symbolSize: [20, 6],
      zlevel: 2
   }, {
      data: data.seriesData[1],
      type: "bar", // 柱图
      barMaxWidth: "auto",
      barWidth: 20,
      name: "服务",
      itemStyle: {
         color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [{
               offset: 0,
               color: "#d3a646"
            }, {
               offset: 0.5,
               color: "#d1a044"
            }, {
               offset: 1,
               color: "#e9ea61"
            }]
         }
      }
   },
   {
      data: [1, 1, 1, 1, 1],
      type: "pictorialBar", // 底部
      barMaxWidth: "20",
      symbolOffset: [13, "50%"],
      symbolSize: [20, 7]
   }, {
      data: data.seriesData[1],
      type: "pictorialBar",  // 顶部
      barMaxWidth: "20",
      symbolPosition: "end",
      symbolOffset: [13, "-50%"],
      symbolSize: [20, 6],
      zlevel: 2
   },

   ]
};