var dataInfo = [{ "name": "AB", "count": [{ "name": "AB", "point": "04", "total": 238 }, { "name": "AB", "point": "05", "total": 594 }, { "name": "AB", "point": "06", "total": 952 }, { "name": "AB", "point": "07", "total": 700 }, { "name": "AB", "point": "08", "total": 284 }, { "name": "AB", "point": "09", "total": 226 }, { "name": "AB", "point": "10", "total": 281 }, { "name": "AB", "point": "11", "total": 287 }, { "name": "AB", "point": "12", "total": 304 }, { "name": "AB", "point": "13", "total": 284 }, { "name": "AB", "point": "14", "total": 269 }, { "name": "AB", "point": "15", "total": 289 }, { "name": "AB", "point": "16", "total": 0 }, { "name": "AB", "point": "17", "total": 0 }, { "name": "AB", "point": "18", "total": 0 }, { "name": "AB", "point": "19", "total": 0 }, { "name": "AB", "point": "20", "total": 0 }, { "name": "AB", "point": "21", "total": 0 }, { "name": "AB", "point": "22", "total": 0 }, { "name": "AB", "point": "23", "total": 0 }, { "name": "AB", "point": "00", "total": 0 }, { "name": "AB", "point": "01", "total": 0 }, { "name": "AB", "point": "02", "total": 0 }, { "name": "AB", "point": "03", "total": 0 } ] }, { "name": "AC", "count": [{ "name": "AC", "point": "04", "total": 236 }, { "name": "AC", "point": "05", "total": 606 }, { "name": "AC", "point": "06", "total": 627 }, { "name": "AC", "point": "07", "total": 559 }, { "name": "AC", "point": "08", "total": 300 }, { "name": "AC", "point": "09", "total": 201 }, { "name": "AC", "point": "10", "total": 286 }, { "name": "AC", "point": "11", "total": 185 }, { "name": "AC", "point": "12", "total": 417 }, { "name": "AC", "point": "13", "total": 379 }, { "name": "AC", "point": "14", "total": 326 }, { "name": "AC", "point": "15", "total": 369 }, { "name": "AB", "point": "16", "total": 0 }, { "name": "AB", "point": "17", "total": 0 }, { "name": "AB", "point": "18", "total": 0 }, { "name": "AB", "point": "19", "total": 0 }, { "name": "AB", "point": "20", "total": 0 }, { "name": "AB", "point": "21", "total": 0 }, { "name": "AB", "point": "22", "total": 0 }, { "name": "AB", "point": "23", "total": 0 }, { "name": "AB", "point": "00", "total": 0 }, { "name": "AB", "point": "01", "total": 0 }, { "name": "AB", "point": "02", "total": 0 }, { "name": "AB", "point": "03", "total": 0 } ] }, { "name": "DE", "count": [{ "name": "DE", "point": "04", "total": 887 }, { "name": "DE", "point": "05", "total": 2207 }, { "name": "DE", "point": "06", "total": 2382 }, { "name": "DE", "point": "07", "total": 2202 }, { "name": "DE", "point": "08", "total": 1744 }, { "name": "DE", "point": "09", "total": 2105 }, { "name": "DE", "point": "10", "total": 2385 }, { "name": "DE", "point": "11", "total": 2238 }, { "name": "DE", "point": "12", "total": 1777 }, { "name": "DE", "point": "13", "total": 1760 }, { "name": "DE", "point": "14", "total": 1857 }, { "name": "DE", "point": "15", "total": 1898 }, { "name": "AB", "point": "16", "total": 0 }, { "name": "AB", "point": "17", "total": 0 }, { "name": "AB", "point": "18", "total": 0 }, { "name": "AB", "point": "19", "total": 0 }, { "name": "AB", "point": "20", "total": 0 }, { "name": "AB", "point": "21", "total": 0 }, { "name": "AB", "point": "22", "total": 0 }, { "name": "AB", "point": "23", "total": 0 }, { "name": "AB", "point": "00", "total": 0 }, { "name": "AB", "point": "01", "total": 0 }, { "name": "AB", "point": "02", "total": 0 }, { "name": "AB", "point": "03", "total": 0 } ] }, { "name": "FG", "count": [{ "name": "FG", "point": "04", "total": 759 }, { "name": "FG", "point": "05", "total": 1743 }, { "name": "FG", "point": "06", "total": 1768 }, { "name": "FG", "point": "07", "total": 1680 }, { "name": "FG", "point": "08", "total": 931 }, { "name": "FG", "point": "09", "total": 1108 }, { "name": "FG", "point": "10", "total": 1363 }, { "name": "FG", "point": "11", "total": 1173 }, { "name": "FG", "point": "12", "total": 722 }, { "name": "FG", "point": "13", "total": 1031 }, { "name": "FG", "point": "14", "total": 852 }, { "name": "FG", "point": "15", "total": 998 }, { "name": "AB", "point": "16", "total": 0 }, { "name": "AB", "point": "17", "total": 0 }, { "name": "AB", "point": "18", "total": 0 }, { "name": "AB", "point": "19", "total": 0 }, { "name": "AB", "point": "20", "total": 0 }, { "name": "AB", "point": "21", "total": 0 }, { "name": "AB", "point": "22", "total": 0 }, { "name": "AB", "point": "23", "total": 0 }, { "name": "AB", "point": "00", "total": 0 }, { "name": "AB", "point": "01", "total": 0 }, { "name": "AB", "point": "02", "total": 0 }, { "name": "AB", "point": "03", "total": 0 } ] } ]; var seriesColor = ["#00baff", "#3de7c9", "#f5222d", "#b96bc6"]; var legendData = []; var xaxisList = []; var metaDate = []; var serieData = []; for (var i = 0; i < dataInfo.length; i++) { legendData.push(dataInfo[i].name); var arrGroup = []; for (var j = 0; j < dataInfo[i].count.length; j++) { arrGroup.push(dataInfo[i].count[j].total); } metaDate.push(arrGroup); } for (var k = 0; k < dataInfo[0].count.length; k++) { xaxisList.push(dataInfo[0].count[k].point); } // console.log(legendData) // console.log(xaxisList) // console.log(metaDate) for (var v = 0; v < legendData.length; v++) { var serie = { name: legendData[v], type: "line", symbol: "circle", symbolSize: 10, itemStyle: { normal: { color: seriesColor[v] } }, //拐点样式 lineStyle: { // 系列级个性化折线样式 width: 1, type: "solid", color: seriesColor[v] }, data: metaDate[v] }; serieData.push(serie); } var option = { backgroundColor: '#0a2a43', tooltip: { trigger: "axis" //鼠标经过提示 }, legend: { icon: "rect", //icon为圆角矩形 top: "0", right: "0", itemWidth: 20, itemHeight: 20, data: legendData, textStyle: { //图例文字的样式 color: "#ffffff", fontSize: 15 } }, grid: { left: 0, top: "10%", right: "1%", bottom: "10%", containLabel: true }, xAxis: { type: "category", boundaryGap: false, data: xaxisList, axisLine: { lineStyle: { color: "#525e70", width: 1 } }, axisLabel: { interval: 0, color: "#9da3ad" }, axisTick: { show: false } }, yAxis: { name: "人", nameGap: 8, type: "value", splitLine: { show: false }, //去除网格线 axisLine: { lineStyle: { color: "#7a8290", width: 1 } }, axisLabel: { color: "#9da3ad" }, axisTick: { show: false } }, color: seriesColor, series: serieData };