Echar line 图标前台封装JS

数据格式是这样的

[{"DEPID":"2CD089F9C5AF47398143ED4191659E24","KCJG":0.08,"ORGNA_NAME":"管运部","RQ":"2020-03-25"},{"DEPID":"43C411B0368542C1A25212FB9F710020","KCJG":179.88,"ORGNA_NAME":"福通公司","RQ":"2020-03-25"}
]

效果图是这样的

可执行代码是这样的

data: []},yAxis: {type: 'value'},series: []};//Ajax得到的数据var ajaxData=[{"DEPID":"2CD089F9C5AF47398143ED4191659E24","KCJG":0.08,"ORGNA_NAME":"管运部","RQ":"2020-03-25"},{"DEPID":"43C411B0368542C1A25212FB9F710020","KCJG":179.88,"ORGNA_NAME":"福通公司","RQ":"2020-03-25"},{"DEPID":"4AE968A8468A437B9149E01A1CAC1FCE","KCJG":15.23,"ORGNA_NAME":"二车间","RQ":"2020-03-25"},{"DEPID":"55B15F6F132649BB8258B0DB3661EEC5","KCJG":29.92,"ORGNA_NAME":"三车间","RQ":"2020-03-25"},{"DEPID":"788EBC780E0747B586F1AA3CDB9D02BE","KCJG":81.93,"ORGNA_NAME":"四车间","RQ":"2020-03-25"},{"DEPID":"7B118F3FA6544966912393017CF2D3C6","KCJG":30.14,"ORGNA_NAME":"一车间","RQ":"2020-03-25"},{"DEPID":"DCDA4C76B8074999AEC92645015EF219","KCJG":0.95,"ORGNA_NAME":"福通机关","RQ":"2020-03-25"},{"DEPID":"FE8D3729C72C4CADA34E68EE1C46FE5C","KCJG":17.04,"ORGNA_NAME":"合作项目","RQ":"2020-03-25"},{"DEPID":"FE8D3729C72C4CADA34E68EE2C46FE5C","KCJG":4.58,"ORGNA_NAME":"油管厂","RQ":"2020-03-25"},{"DEPID":"2CD089F9C5AF47398143ED4191659E24","KCJG":0.08,"ORGNA_NAME":"管运部","RQ":"2020-03-26"},{"DEPID":"43C411B0368542C1A25212FB9F710020","KCJG":167.61,"ORGNA_NAME":"福通公司","RQ":"2020-03-26"},{"DEPID":"4AE968A8468A437B9149E01A1CAC1FCE","KCJG":8.82,"ORGNA_NAME":"二车间","RQ":"2020-03-26"},{"DEPID":"55B15F6F132649BB8258B0DB3661EEC5","KCJG":29.92,"ORGNA_NAME":"三车间","RQ":"2020-03-26"},{"DEPID":"788EBC780E0747B586F1AA3CDB9D02BE","KCJG":81.7,"ORGNA_NAME":"四车间","RQ":"2020-03-26"},{"DEPID":"7B118F3FA6544966912393017CF2D3C6","KCJG":24.52,"ORGNA_NAME":"一车间","RQ":"2020-03-26"},{"DEPID":"DCDA4C76B8074999AEC92645015EF219","KCJG":0.95,"ORGNA_NAME":"福通机关","RQ":"2020-03-26"},{"DEPID":"FE8D3729C72C4CADA34E68EE1C46FE5C","KCJG":17.04,"ORGNA_NAME":"合作项目","RQ":"2020-03-26"},{"DEPID":"FE8D3729C72C4CADA34E68EE2C46FE5C","KCJG":4.58,"ORGNA_NAME":"油管厂","RQ":"2020-03-26"},{"DEPID":"2CD089F9C5AF47398143ED4191659E24","KCJG":0.08,"ORGNA_NAME":"管运部","RQ":"2020-03-27"},{"DEPID":"43C411B0368542C1A25212FB9F710020","KCJG":164.29,"ORGNA_NAME":"福通公司","RQ":"2020-03-27"},{"DEPID":"4AE968A8468A437B9149E01A1CAC1FCE","KCJG":8.82,"ORGNA_NAME":"二车间","RQ":"2020-03-27"},{"DEPID":"55B15F6F132649BB8258B0DB3661EEC5","KCJG":29.92,"ORGNA_NAME":"三车间","RQ":"2020-03-27"},{"DEPID":"788EBC780E0747B586F1AA3CDB9D02BE","KCJG":78.31,"ORGNA_NAME":"四车间","RQ":"2020-03-27"},{"DEPID":"7B118F3FA6544966912393017CF2D3C6","KCJG":24.58,"ORGNA_NAME":"一车间","RQ":"2020-03-27"},{"DEPID":"DCDA4C76B8074999AEC92645015EF219","KCJG":0.95,"ORGNA_NAME":"福通机关","RQ":"2020-03-27"},{"DEPID":"FE8D3729C72C4CADA34E68EE1C46FE5C","KCJG":17.04,"ORGNA_NAME":"合作项目","RQ":"2020-03-27"},{"DEPID":"FE8D3729C72C4CADA34E68EE2C46FE5C","KCJG":4.58,"ORGNA_NAME":"油管厂","RQ":"2020-03-27"},{"DEPID":"2CD089F9C5AF47398143ED4191659E24","KCJG":0.08,"ORGNA_NAME":"管运部","RQ":"2020-03-28"},{"DEPID":"43C411B0368542C1A25212FB9F710020","KCJG":165.31,"ORGNA_NAME":"福通公司","RQ":"2020-03-28"},{"DEPID":"4AE968A8468A437B9149E01A1CAC1FCE","KCJG":8.82,"ORGNA_NAME":"二车间","RQ":"2020-03-28"},{"DEPID":"55B15F6F132649BB8258B0DB3661EEC5","KCJG":29.92,"ORGNA_NAME":"三车间","RQ":"2020-03-28"},{"DEPID":"788EBC780E0747B586F1AA3CDB9D02BE","KCJG":78.31,"ORGNA_NAME":"四车间","RQ":"2020-03-28"},{"DEPID":"7B118F3FA6544966912393017CF2D3C6","KCJG":25.6,"ORGNA_NAME":"一车间","RQ":"2020-03-28"},{"DEPID":"DCDA4C76B8074999AEC92645015EF219","KCJG":0.95,"ORGNA_NAME":"福通机关","RQ":"2020-03-28"},{"DEPID":"FE8D3729C72C4CADA34E68EE1C46FE5C","KCJG":17.04,"ORGNA_NAME":"合作项目","RQ":"2020-03-28"},{"DEPID":"FE8D3729C72C4CADA34E68EE2C46FE5C","KCJG":4.58,"ORGNA_NAME":"油管厂","RQ":"2020-03-28"},{"DEPID":"2CD089F9C5AF47398143ED4191659E24","KCJG":0.08,"ORGNA_NAME":"管运部","RQ":"2020-03-29"},{"DEPID":"43C411B0368542C1A25212FB9F710020","KCJG":164.24,"ORGNA_NAME":"福通公司","RQ":"2020-03-29"},{"DEPID":"4AE968A8468A437B9149E01A1CAC1FCE","KCJG":8.82,"ORGNA_NAME":"二车间","RQ":"2020-03-29"},{"DEPID":"55B15F6F132649BB8258B0DB3661EEC5","KCJG":29.92,"ORGNA_NAME":"三车间","RQ":"2020-03-29"},{"DEPID":"788EBC780E0747B586F1AA3CDB9D02BE","KCJG":77.24,"ORGNA_NAME":"四车间","RQ":"2020-03-29"},{"DEPID":"7B118F3FA6544966912393017CF2D3C6","KCJG":25.6,"ORGNA_NAME":"一车间","RQ":"2020-03-29"},{"DEPID":"DCDA4C76B8074999AEC92645015EF219","KCJG":0.95,"ORGNA_NAME":"福通机关","RQ":"2020-03-29"},{"DEPID":"FE8D3729C72C4CADA34E68EE1C46FE5C","KCJG":17.04,"ORGNA_NAME":"合作项目","RQ":"2020-03-29"},{"DEPID":"FE8D3729C72C4CADA34E68EE2C46FE5C","KCJG":4.58,"ORGNA_NAME":"油管厂","RQ":"2020-03-29"},{"DEPID":"2CD089F9C5AF47398143ED4191659E24","KCJG":0.08,"ORGNA_NAME":"管运部","RQ":"2020-03-30"},{"DEPID":"43C411B0368542C1A25212FB9F710020","KCJG":164.26,"ORGNA_NAME":"福通公司","RQ":"2020-03-30"},{"DEPID":"4AE968A8468A437B9149E01A1CAC1FCE","KCJG":8.82,"ORGNA_NAME":"二车间","RQ":"2020-03-30"},{"DEPID":"55B15F6F132649BB8258B0DB3661EEC5","KCJG":30.08,"ORGNA_NAME":"三车间","RQ":"2020-03-30"},{"DEPID":"788EBC780E0747B586F1AA3CDB9D02BE","KCJG":76.62,"ORGNA_NAME":"四车间","RQ":"2020-03-30"},{"DEPID":"7B118F3FA6544966912393017CF2D3C6","KCJG":26.09,"ORGNA_NAME":"一车间","RQ":"2020-03-30"},{"DEPID":"DCDA4C76B8074999AEC92645015EF219","KCJG":0.95,"ORGNA_NAME":"福通机关","RQ":"2020-03-30"},{"DEPID":"FE8D3729C72C4CADA34E68EE1C46FE5C","KCJG":17.04,"ORGNA_NAME":"合作项目","RQ":"2020-03-30"},{"DEPID":"FE8D3729C72C4CADA34E68EE2C46FE5C","KCJG":4.58,"ORGNA_NAME":"油管厂","RQ":"2020-03-30"},{"DEPID":"2CD089F9C5AF47398143ED4191659E24","KCJG":0.08,"ORGNA_NAME":"管运部","RQ":"2020-03-31"},{"DEPID":"43C411B0368542C1A25212FB9F710020","KCJG":159.9,"ORGNA_NAME":"福通公司","RQ":"2020-03-31"},{"DEPID":"4AE968A8468A437B9149E01A1CAC1FCE","KCJG":8.82,"ORGNA_NAME":"二车间","RQ":"2020-03-31"},{"DEPID":"55B15F6F132649BB8258B0DB3661EEC5","KCJG":27.4,"ORGNA_NAME":"三车间","RQ":"2020-03-31"},{"DEPID":"788EBC780E0747B586F1AA3CDB9D02BE","KCJG":74.94,"ORGNA_NAME":"四车间","RQ":"2020-03-31"},{"DEPID":"7B118F3FA6544966912393017CF2D3C6","KCJG":26.09,"ORGNA_NAME":"一车间","RQ":"2020-03-31"},{"DEPID":"DCDA4C76B8074999AEC92645015EF219","KCJG":0.95,"ORGNA_NAME":"福通机关","RQ":"2020-03-31"},{"DEPID":"FE8D3729C72C4CADA34E68EE1C46FE5C","KCJG":17.04,"ORGNA_NAME":"合作项目","RQ":"2020-03-31"},{"DEPID":"FE8D3729C72C4CADA34E68EE2C46FE5C","KCJG":4.58,"ORGNA_NAME":"油管厂","RQ":"2020-03-31"},{"DEPID":"2CD089F9C5AF47398143ED4191659E24","KCJG":0.08,"ORGNA_NAME":"管运部","RQ":"2020-04-01"},{"DEPID":"43C411B0368542C1A25212FB9F710020","KCJG":159.87,"ORGNA_NAME":"福通公司","RQ":"2020-04-01"},{"DEPID":"4AE968A8468A437B9149E01A1CAC1FCE","KCJG":8.82,"ORGNA_NAME":"二车间","RQ":"2020-04-01"},{"DEPID":"55B15F6F132649BB8258B0DB3661EEC5","KCJG":27.4,"ORGNA_NAME":"三车间","RQ":"2020-04-01"},{"DEPID":"788EBC780E0747B586F1AA3CDB9D02BE","KCJG":74.99,"ORGNA_NAME":"四车间","RQ":"2020-04-01"},{"DEPID":"7B118F3FA6544966912393017CF2D3C6","KCJG":26.09,"ORGNA_NAME":"一车间","RQ":"2020-04-01"},{"DEPID":"DCDA4C76B8074999AEC92645015EF219","KCJG":0.95,"ORGNA_NAME":"福通机关","RQ":"2020-04-01"},{"DEPID":"FE8D3729C72C4CADA34E68EE1C46FE5C","KCJG":17.04,"ORGNA_NAME":"合作项目","RQ":"2020-04-01"},{"DEPID":"FE8D3729C72C4CADA34E68EE2C46FE5C","KCJG":4.49,"ORGNA_NAME":"油管厂","RQ":"2020-04-01"}];setLinesChar(ajaxData,option);// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);//多图表char-数据源-图标配置对象function setLinesChar(ajaxData,option){//日期数组var dateArray=[];//部门数组var depArray=[];for(var i=0;i<ajaxData.length;i++){dateArray.push(ajaxData[i].RQ);depArray.push(ajaxData[i].ORGNA_NAME);}//数组去重dateArray=uniq(dateArray);depArray=uniq(depArray);alert(depArray.toString())//Y轴模型数组var yETArray=[];//循环部门for(var i=0;i<depArray.length;i++){var dep=depArray[i];//实体var et={ name:dep, stack:"总量", data: [], type: 'line'};//循环天for(var j=0;j<dateArray.length;j++){var date=dateArray[j];//根据天和部门获取数值et.data.push(getKCJG(dep,date,ajaxData));}yETArray.push(et);}//X轴option.xAxis.data=dateArray;//Y轴option.series=yETArray;//alert(JSON.stringify(option))}//列表查询-部门-日期-数据源function getKCJG(dep,date,dbArray){var kcjg=0;for(var i=0;i<dbArray.length;i++){var db=dbArray[i];if(db.RQ==date && db.ORGNA_NAME==dep){kcjg=db.KCJG;break;}}return kcjg;}//数组去重function uniq(array){var temp = []; //一个新的临时数组for(var i = 0; i < array.length; i++){if(temp.indexOf(array[i]) == -1){temp.push(array[i]);}}return temp;}</script>
</body>
</html>

Echar line 图标前台封装JS相关推荐

关系图d3、封装js
demo:https://github.com/binliuli/visual.git 有的时候需要自己封装js所谓的组件,参考:使用 data-* 属性来嵌入自定义数据 list: visual: ...
js 后台调用前台的JS
前台JS是这样的 function HoverLi(n){ //如果有N个标签,就将i<=N; for(var i=1;i<=3;i++){g('tb_'+i).className='no ...
封装js千分位加逗号和删除逗号
//封装js千分位加逗号和删除逗号alert( format(2545678754.020001) ) //2,545,678,754.03alert( format(-2545678754.0200 ...
uni-app 封装js方、页面的生命周期、数据双向绑定、封装组件
1.在外部封装js方法很多页面都会用到相同的方法,为了代码的复用,可以在外部封装相同的方法在项目中创建一个utils目录,存放外部封装的js方法在utils目录下创建getDate.js文件 e ...
手动封装JS库jQuery
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
封装js发送http请求
封装js发送http请求 var http = {};http.quest = function (option, callback) {var url = option.url;var method ...
前后台交互经常使用的技术汇总（后台：Java技术，前台：Js或者Jquery）
1:由于针对特定的前后台交互用到的知识总结,所以不大量贴代码,主要给出思路,方便自己以后脑补和技术总结,当然也希望可以帮助到别人. 后台Json和其他格式转化,之前总结过Json和对象,集合,字符串的 ...
springboot + vue 后台token生成拦截器 redis实现前台封装axios xueX 接口实现
后台后台程序图片新建token的基础类 public class Constants {public final static String TOKEN = "token";} ...
java需要前台封装对象吗_javaEE之-----------类反射直接封装前台传过来的参数
标签: 在JavaEE WEB中,我们收集form表单传过来的数据,通常是采用值对象的方式,一一去获取,封装,然后将值对象传到后台进行使用. 如: String name=request.getPa ...

Echar line 图标前台封装JS

Echar line 图标前台封装JS相关推荐

最新文章

热门文章