一个div多个图表共用一个图例
Posted 阿蒙不萌
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个div多个图表共用一个图例相关的知识，希望对你有一定的参考价值。
想实现一个图例（公司名），点击让div中三个图表进行显示相应的数据，并渲染到图表中（公司数据可能很多，让其默认显示三条数据），并且每个图表都有相应的标题和datazoom区域展示，点击下拉框会进行相应的数据进行渲染和主题切换
话不多说，放上效果图和代码供参考
有些代码里的方法是直接套用上一个里面的，有兴趣的可以去看看图表实战的其他内容，
可能注释有些不完整，参考其他内容里面的js插件
<!-- 产能 产量 开工率 仓储 --> <!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 id="region"> <option value="all">全部</option> </select> </div> <div id="main" style="width: 100%; height: 600px;"></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 myChart = echarts.init(document.getElementById("main"), \'chalk\'); var option = null; //公司名称数组 var companyRateOperation = []; //产量公司数组,其实这个没必要,先放着 var companyYield = []; //放入X轴的时间数组 var date = []; //全部的产量数组,二维 var yield = []; //开工率的数组 var rateOperation = []; //产能数组 var capacity = []; //仓储数组 var storageWithCompany = []; var companysB = []; var region = []; $.ajax({ url: "http://47.93.232.163:8081/shuju/b2/findAnodeStorageRelevant?username=haha2&password=bb3ebf61b8b249584da35f257aa90c3e", dataType: "json", success: function(data) { //取出来所有的地区:华南华北.... for (var key in data.regionAndCompany) { region.push(key); } // console.log(region) //渲染下拉框数据 for (var i = 0; i < region.length; i++) { $("#region").append("<option value=\'" + region[i] + "\'>" + region[i] + "</option>") } //接口取出来的仓储的数组 for (key in data.storageWithCompany) { storageWithCompany.push(data.storageWithCompany[key]) } // console.log(storageWithCompany) // //接口取出来的产能的数组 // for(key in data.nameAndCapacity){ // capacity.push(data.nameAndCapacity[key]) // } // // console.log(capacity) //接口取出来的开工率的数组 for (key in data.nameAndRateOperation) { rateOperation.push(data.nameAndRateOperation[key]) } // console.log(rateOperation) //全部的公司名字 for (key in data.nameAndRateOperation) { companyRateOperation.push(key); } // console.log(companyRateOperation) companysB = 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 endyieldCompany = getEndPriceArray(date, jValue1, index, yield1); // console.log(endyieldCompany) //声明开工率数组,对其字符串转为float型 var rateOperation1=ChangeCommas(rateOperation); // console.log(rateOperation1) //最终的开工率数组 var endrateOperationCompany=getEndPriceArray(date, jValue1, index, rateOperation1); // console.log(endrateOperationCompany) //声明仓储数组,float var storageWithCompany1=ChangeCommas(storageWithCompany); // console.log(storageWithCompany1) var endstorageWithCompanyCompany=getEndPriceArray(date, jValue1, index, storageWithCompany1); // console.log(endstorageWithCompanyCompany) // 需要在series中进行填充数据的变量 var series_content = seriesThree(companyRateOperation, endyieldCompany,endrateOperationCompany,endstorageWithCompanyCompany); // console.log(series_content) //下拉框选择并显示相应的公司图表数据 $(\'#region\').change(function() { //当下拉框值选择为全部的时候 if ($("#region").val() == "all") { //重新赋值公司数组 companyRateOperation=companysB; //重新赋值series接收的内容 series_content = seriesThree(companyRateOperation, endyieldCompany,endrateOperationCompany,endstorageWithCompanyCompany); //图表清除 myChart.dispose(); //初始化实例 let Theme = $("#sel").val(); // 基于准备好的dom，初始化echarts实例 myChart = echarts.init(document.getElementById(\'main\'), Theme); var selectCompanyRateOperation = defaultDisplay(companyRateOperation); //图表配置项内容 option=optionT(jValue1, selectCompanyRateOperation, series_content); myChart.setOption(option); } else { myChart.dispose(); //声明一个变量接收下拉框的值 var regionval = $("#region").val(); // console.log(data.regionAndCompany) //循环取出来下拉框里面的值所对应的公司名字 for(var key in data.regionAndCompany){ //当循环的值等于下拉框选定的值的时候 //key是汉字,就比如华北 if(key == regionval){ //赋值公司名字等于其相应地区里面的公司名字 companyRateOperation = data.regionAndCompany[key]; // 跳出来循环 break; } } //图表选中前三条数据但是点击相应的地区会还是默认显示全部的三条曲线,公司传过去了但是数据没有传过去造成曲线不变的情况 //声明一个else选择的数组,用来存放相应的公司里面的数据 var series_content2=[]; highchart 图例多个位置？图表中显示左侧的第一个图例和右侧的第二个图例