ECharts动态获取后台传过来的json数据进行多个折线图的显示,折线的数据由后台传过来
程序员文章站
2022-04-14 19:58:30
ECharts动态获取后台传过来的json数据进行多个折线图的显示,折线的数据由后台传过来 ECharts 多个折线图动态获取json数据 效果图如下: js部分: function mychart1(datetime,dateNums1,dateNums2,dateNums3,dateNums4) ......
echarts动态获取后台传过来的json数据进行多个折线图的显示,折线的数据由后台传过来
echarts 多个折线图动态获取json数据
效果图如下:
js部分:
function mychart1(datetime,datenums1,datenums2,datenums3,datenums4) { mychart1 = echarts.init(document.getelementbyid('main1')); option = { title: { text: '', left: 'left', top: '4%', textstyle: { color: '#000000', fontsize: 16 }, }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c}' }, legend: { data:['湿垃圾收运量','可回收收运量','有毒有害收运量','干垃圾收运量'] }, xaxis: { type: 'category', boundarygap: false, name: '天', splitline: { show: true, //网格线是否显示 linestyle: { color: '#323b4e' // 修改网格线颜色 } }, axisline: { // symbol: ['none', 'arrow'], //箭头 linestyle: { color: '#696c72', } }, axistick: { //qu刻度线 show: false }, axislabel: { //x轴时间文字显示不全问题 interval: 0, rotate: 40 }, data: datetime }, grid: { left: '5%', right: '8%', bottom: '0%', top: '16%', containlabel: true }, yaxis: { type: 'value', // min: 0, //y轴最小值设置 // max: 100, //y轴最大值设置 name: 'kg', namelocation: 'end', nametextstyle: { padding: -10, }, splitline: { show: true, //网格线是否显示 linestyle: { color: '#323b4e' // 修改网格线颜色 } }, axisline: { // symbol: ['none', 'arrow'], linestyle: { color: '#696c72' //0c3b71 } }, axistick: { show: false }, }, series: [{ symbol: 'circle', symbolsize: 8, itemstyle: { normal: { color: "#01ff19", linestyle: { color: "#01ff19", } } }, name: '湿垃圾收运量', type: 'line', data: datenums1 },{ symbol: 'circle', symbolsize: 8, itemstyle: { normal: { color: "#31a4ff", linestyle: { color: "#31a4ff", } } }, name: '可回收收运量', type: 'line', data: datenums2 },{ symbol: 'circle', symbolsize: 8, itemstyle: { normal: { color: "#f13a30", linestyle: { color: "#f13a30", } } }, name: '有毒有害收运量', type: 'line', data: datenums3 },{ symbol: 'circle', symbolsize: 8, itemstyle: { normal: { color: "#c7c7c7", linestyle: { color: "#c7c7c7", } } }, name: '干垃圾收运量', type: 'line', data: datenums4 }] }; mychart1.setoption(option); } function echarsfun1() { var param = { "name": housename } var paramstr = $.param(param) ajaxget("largescreendisplaycontroller.do?todaytrend&" + paramstr, function(data) { var data = json.parse(data) if(data) { var data = data.data console.log(data) var datetime = []; //时间 var datenums1 = []; //湿垃圾 var datenums2 = []; //可回收 var datenums3 = []; //有毒有害 var datenums4 = []; //干垃圾 //湿垃圾 $.each(data.yfgarweightmaplist, function (index, item) {
datetime.push(item.times); //挨个取出类别并填入类别数组 datenums1.push(item.yfgarweight); }); //可回收 $.each(data.recycleweightmaplist, function (index, item) { datenums2.push(item.recycleweight); }); //有毒有害 $.each(data.youduweightmaplist, function (index, item) { datenums3.push(item.youduweight); }); //干垃圾 $.each(data.otherweightmaplist, function (index, item) { datenums4.push(item.otherweight); }); mychart1(datetime,datenums1,datenums2,datenums3,datenums4) } }) }
后台传过来的json数据格式
后台传过来的json数据格式
{ "msg": "获取成功", "code": 0, "data": { "otherweightmaplist": [{ "times": "2019-11-07", "otherweight": "160" }, { "times": "2019-11-08", "otherweight": "170" }, { "times": "2019-11-09", "otherweight": "165" }, { "times": "2019-11-10", "otherweight": "163" }], "recycleweightmaplist": [{ "times": "2019-11-07", "recycleweight": "0" }, { "times": "2019-11-08", "recycleweight": "0" }, { "times": "2019-11-09", "recycleweight": "0" }, { "times": "2019-11-10", "recycleweight": "0" }], "youduweightmaplist": [{ "times": "2019-11-07", "youduweight": "0" }, { "times": "2019-11-08", "youduweight": "0" }, { "times": "2019-11-09", "youduweight": "0" }, { "times": "2019-11-10", "youduweight": "0" }], "yfgarweightmaplist": [{ "yfgarweight": "156", "times": "2019-11-07" }, { "yfgarweight": "169", "times": "2019-11-08" }, { "yfgarweight": "136", "times": "2019-11-09" }, { "yfgarweight": "137", "times": "2019-11-10" }] } }
上一篇: 动画---CSS3 animation
下一篇: mysql的锁机制详解