Echarts在线免费图表

 
            /* 数据 */
let xData = ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月", "9月", "10月", "11月", "12月"];
let barData1 = [45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45]; // 柱子信息1,外层
let barData2 = [15, 20, 30, 20, 30, 15, 20, 30, 20, 30, 20, 30]; // 柱子信息2,内层下 

/* 数据整合 */
let barDataList = [barData1, barData2]; // 合并数组，方便使用
let legendData = ["总批次", "检测批次"]; // legend

/* series整理 */
let seriesData = [];
let colorList = ["transparent", "#FE6369"];
let legendShowList = [];
legendData.map((item, index) => {
   if (index === 0) {
      seriesData.push({
         name: item,
         type: "bar",
         yAxisIndex: 0,
         barWidth: 24,
         barGap: "-96%",
         z: 1,
         itemStyle: {
            normal: { 
               color: colorList[index], 
               borderColor: '#FE6369',
               label: {
                 show: true,
                 position: "top",
                 color:"#fff"
               }, 
            }
         },
         data: barDataList[index],
      })
      legendShowList.push({
         name: item,
         itemStyle: {
            color: colorList[index],
            borderColor: '#FE6369',
            borderWidth: 2,  
         }
      })
   } else {
      seriesData.push({
         name: item,
         type: "bar",
         yAxisIndex: 0,
         barWidth: 20,
         barGap: "-92%",
         stack: "a",
         z: 1,
         itemStyle: { 
            normal: { 
               color: colorList[index],  
               label: {
                 show: true,
                 position: "insideTop",
                 color:"#fff"
               }, 
            }
         },
         data: barDataList[index],
      })
      legendShowList.push({
         name: item, 
      })
   }
})

option = { 
   backgroundColor: '#033766',
   tooltip: { 
      trigger: 'item',
      axisPointer: {
         type: 'none'
      },
      position: function (point, params, dom, rect, size) { // 提示框位置
         let x = 0;
         let y = 0;
         // 提示框位置
         if (point[0] + size.contentSize[0] < size.viewSize[0]) {
            x = point[0]
         } else if (point[0] > size.contentSize[0]) {
            x = point[0] - size.contentSize[0]
         } else {
            x = "30%"
         }
         if (point[1] > size.contentSize[1]) {
            y = point[1] - size.contentSize[1]
         } else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
            y = point[1]
         } else {
            y = "30%"
         }
         return [x, y];
      },
      formatter: params => {
         console.log(params)
         let childDiv = "<div>"
         legendData.map((item, index) => {
            childDiv += `<div style="font-size: 14px;font-family: Source Han Sans CN-Regular;font-weight: 400;color: #FFFFFF;margin-bottom:4px;">
            <span>${item}:</span><span style="margin-left:8px">${barDataList[index][params['dataIndex']]}</span>
            </div>`
         })
         return `
            <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:8px;">${params.name}年</div>
            ${childDiv}   
         `
      },
      extraCssText: 'opacity: 0.8;background-color:#050F1B;padding: 12px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
   },
   legend: {
      top: 20,
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 25, 
      icon: 'rect',
      textStyle: {
         color: '#fff',
         fontFamily: 'Source Han Sans CN-Regular',
         fontSize: 14,
         padding: [0, 0, 0, 5], 
      }, 
      data: legendShowList
   },
   grid: {
      top: "15%",
      left: "5%",
      right: "5%",
      bottom: "3%",
      containLabel: true,
   },
   xAxis: [{
      type: "category",
      data: xData,
      axisTick: {
         show: false,
      },
      axisLine: {
         show: false, 
      },
      axisLabel: {
         color: "#fff",
         fontSize: 14,
         fontFamily: 'Source Han Sans CN-Regular',
      },
   }],
   yAxis: [{
      type: "value",
      name: "单位：批次",
      splitNumber: 5,
      nameTextStyle: {
         color: '#ffffff',
         fontSize: 14,
         fontFamily: 'Source Han Sans CN-Regular',
         padding: [0, 0, 10, 20]
      },
      axisLabel: {
         color: "#ffffff",
         fontSize: 14,
         fontFamily: 'Source Han Sans CN-Regular',
      },
      axisLine: {
         show: false
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: "#015B89", 
            width: 1
         }
      },
      axisTick: {
         show: false,
      },
   }],
   series: seriesData,
};