效果如图所示，一个页面四个div，每个div里面展示相应的数据，因为这种效果会有点麻烦，而且不太雅观我就换了一种写法，一个div里面用四个图表，共用一个图例，先放上这个方式的效果图和源码，后期会再发布一篇文章用来展示新的效果
<!-- 产能 产量 开工率 仓储 --> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/getParam.js" type="text/javascript" charset="utf-8"></script> <script src="js/dark.js" type="text/javascript" charset="utf-8"></script> <script src="js/macarons.js" type="text/javascript" charset="utf-8"></script> <script src="js/wonderland.js" type="text/javascript" charset="utf-8"></script> <script src="js/purple-passion.js" type="text/javascript" charset="utf-8"></script> <script src="js/chalk.js" type="text/javascript" charset="utf-8"></script> <title></title> <style type="text/css"> #main1{ /* background: #FF0000; */ display: inline-block; margin-left: 12%; margin-top: 40px; } #main2{ background: #000000; display: inline-block; margin-right: 12%; margin-left: 12%; } #main3{ display: inline-block; background: #008000; margin-left: 12%; margin-top: 40px; } #main4{ background: #808080; display: inline-block; margin-right: 12%; margin-left: 12%; } </style> </head> <body> <div> <select id="sel"> <option value="macarons">macarons</option> <option value="dark">dark</option> <option value="wonderland">wonderland</option> <option value="chalk">chalk</option> <option value="purple-passion">purple-passion</option> </select> <select > <option value="all">全部</option> </select> </div> <div id="main1" style="width: 30%; height: 300px;"></div> <div id="main2" style="width: 30%; height: 300px;"></div> <div id="main3" style="width: 30%; height: 300px;"></div> <div id="main4" style="width: 30%; height: 300px;"></div> <script type="text/javascript"> function load(){ var myChart1 = echarts.init(document.getElementById("main1"), 'chalk'); // var myChart2 = echarts.init(document.getElementById("main2"), 'macarons'); //公司名称数组 var companyRateOperation =[]; //产量公司数组,其实这个没必要,先放着 var companyYield =[]; //放入X轴的时间数组 var date=[]; //全部的产量数组,二维 var yield=[]; $.ajax({ url: "", dataType: "json", success: function(data){ //全部的公司名字 for(key in data.nameAndRateOperation){ companyRateOperation.push(key); } // console.log(companyRateOperation) //全部的时间数据,二维数组 for(var key in data.nameAndDateTime){ date.push(data.nameAndDateTime[key]) } // console.log(date) //最终放到lenged里面的公司数组,默认显示三个 var selectCompanyRateOperation = defaultDisplay(companyRateOperation); // console.log(selectCompanyRateOperation) //全部的产量数组,二维,每个公司的产量是一个数组 for(var key in data.nameAndYield){ yield.push(data.nameAndYield[key]) } // console.log(yield) //新的时间数组 var jValue1 = []; for (var i = 0; i < date.length; i++) { for (var j = 0; j < date[i].length; j++) { jValue1.push(date[i][j]); } } //对时间进行去重 jValue1 = delDuplicateArrayItem(jValue1); //去掉时分秒并且去重的时间数组(字符串类型) // console.log(jValue1) //每个公司里面的数据在时间轴上出现的位置 var index = findIndex(date,jValue1); // console.log(index) //声明数组,需要对之前的数组进行处理(改后的全部的价格数组,逗号已经改成0了) //注意为浮点型 var yield1 = ChangeCommas(yield); // console.log(yield1) //声明一个最终的价格数组(前面为空字符串,后面为empty空) var endDatePriceCompany = getEndPriceArray(date, jValue1, index, yield1); // console.log(endDatePriceCompany) //需要在series中进行填充数据的变量 var series_content = splicingSeries(companyRateOperation, endDatePriceCompany); // console.log(series_content) option = optionR(companyRateOperation,selectCompanyRateOperation,jValue1,series_content); myChart1.setOption(option); }, }); } load(); </script> </body> </html>