Echarts在线免费图表

 
            const types = [1, 2, 3]
const xData = [
   "0~5",
   "5~10",
   "10~15",
   "15~20",
   "20~25",
   "25~30",
   "30~35",
   "35~40",
   "40~45",
   "45~50",
   "50~55",
   "55~60",
   "60~65",
   "65~70",
   "70~75"
];
const dataObj = {}
const data1 = [], data2 = []
for (let j = 0; j <= types.length - 1; j++) {
   dataObj['data' + (j + 1)] = []
   let arr = []
   for (let i = 0; i <= xData.length - 1; i++) {
      arr.push(Math.ceil(Math.random() * 380))
   }
   dataObj['data' + (j + 1)] = arr
}

const margin = {
   left: 6,
   right: 5,
   bottom: 12,
}
const count = types.length, yMax = 400;
const perWidth = (100 - margin.left - margin.right) / count;

const grids = [{
   "width": (100 - margin.left - margin.right) + "%",
   "bottom": margin.bottom + "%",
   "left": margin.left + '%',
}], xAxis = [{
   "type": "category",
   "gridIndex": 0,
   "data": xData,
   show: false,
   // "axisLabel": {
   //    "interval": 0,
   //    "rotate": 45
   // },
   // "splitLine": {
   //    "show": false
   // }
}], yAxis = [{
   name: '次数',
   nameLocation: 'center',
   nameGap: 40,
   nameTextStyle: {
      color: '#000',
      fontSize: 16,
      fontWeight: 'normal'
   },
   max: yMax,
   show: true,
   "type": "value",
   "gridIndex": 0,
   "splitLine": {
      "show": true
   },
   axisLine: {
      show: true,
      lineStyle: {
         color: 'rgba(0,0,0,0)'
      }
   },
   axisLabel: {
      show: true,
      color: '#000'
   }
}], series = [{
   name: '其他',
   data: [0, yMax],
   "type": "bar",
   "xAxisIndex": 0,
   "yAxisIndex": 0,
   // slient: true,
   tooltip: { show: false, },
   itemStyle: {
      color: 'rgba(0,0,0,.0)'
   },
   cursor: 'default'
}], legendData = []

types.forEach((item, index) => {
   grids.push({
      "width": perWidth + "%",
      "bottom": margin.bottom + "%",
      "left": margin.left + (perWidth * index) + '%',
   })
   xAxis.push({
      "type": "category",
      "gridIndex": index + 1,
      "data": xData,
      "axisLabel": {
         "interval": 0,
         "rotate": 45
      },
      "splitLine": {
         "show": false
      }
   })
   yAxis.push({
      // name: index === 0 ? '次数' : '',
      // nameLocation: 'center',
      // nameGap: 40,
      // nameTextStyle: {
      //    color: '#000',
      //    fontSize: 16,
      //    fontWeight: 'normal'
      // },
      max: yMax,
      show: true,
      "type": "value",
      "gridIndex": index + 1,
      // "splitLine": {
      //    "show": true
      // },
      axisLine: {
         show: true,
         lineStyle: {
            color: 'rgba(0,0,0,.2)'
         }
      },
      axisLabel: {
         show: false,
         color: index === 0 ? '#000' : 'rgba(0,0,0,0)'
      }
   })
   series.push({
      name: "系列" + (index + 1),
      "type": "bar",
      "xAxisIndex": index + 1,
      "yAxisIndex": index + 1,
      "data": dataObj['data' + (index + 1)]
   })
   legendData.push('系列' + (index + 1))
})
option = {
   // backgroundColor: '#003',
   title: {
      left: 'center',
      bottom: 20,
      text: '风机功率',
      textStyle: {
         color: '#000',
         fontSize: 16,
         fontWeight: 'normal'
      }
   },
   tooltip: {},
   legend: {
      data: legendData
   },
   "grid": grids,
   "yAxis": yAxis,
   "xAxis": xAxis,
   "series": series
}