echarts图形进阶传值显示多条数据显示

最新推荐文章于 2024-03-09 15:31:07 发布

原创最新推荐文章于 2024-03-09 15:31:07 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts图形进阶 #echarts图形进阶传值 #echarts多条数据显示

Echarts 同时被 2 个专栏收录

1 篇文章

订阅专栏

报表双折线图

1 篇文章

订阅专栏

该博客介绍了如何通过echarts图形库从后台获取数据，并动态展示多条地区的负荷统计图表。文章中涉及到的时间处理、数据获取、以及echarts的配置和系列数据设置，展示了如何实现图表的平滑线条和自定义轴标签等功能。

//沟通后台获取数据

function showRowdata() {

//调用时间方法获取时间
getTime();
$.post(_urlArease, {beginTime : beginTime,endTime : endTime,city : city}, function(responseText) {

//处理从后台获取的数据
           var retObj = eval("("+responseText+")");
调用 echarts图形方法传递数据 aop(retObj.a209000015,retObj.a209000012,retObj.a209000020,retObj.a209000014,retObj.a209000019,retObj.a209000008,retObj.a209000021,retObj.a209000018,retObj.a209000024,retObj.a209000010,retObj.a209000009,retObj.a209000013,retObj.a209000016,retObj.a209000022,retObj.a209000023,retObj.a209000011,
                       retObj.aa209000015,retObj.aa209000012,retObj.aa209000020,retObj.aa209000014,retObj.aa209000019,retObj.aa209000008,retObj.aa209000021,retObj.aa209000018,retObj.aa209000024,retObj.aa209000010,retObj.aa209000009,retObj.aa209000013,retObj.aa209000016,retObj.aa209000022,retObj.aa209000023,retObj.aa209000011,
                       retObj.date);
       });
   }

   function aop(hf,bb,wh,hn,mas,hb,tl,aq,hs,fy,sz,xz,la,xc,cz,hz,ahf,abb,awh,ahn,amas,ahb,atl,aaq,ahs,afy,asz,axz,ala,axc,acz,ahz,date) {
       var dom = document.getElementById("mainEcharts");
       var myChart = echarts.init(dom);
       myChart.setOption(
               option = {
                       title: {
                   text: '地区负荷统计',
                   left : 'center'

                   },

                       grid:{
                           left:"40",
                           right:"20",
                           top :"50",
                           bottom:"70"
                       },
                       tooltip : {
                           trigger : 'axis'

                       },
                       toolbox : {feature : {}},
                       legend: {
                           top :'20',
                       data:['合肥','蚌埠','芜湖','淮南','马鞍山','淮北','铜陵','安庆','黄山','阜阳','宿州','滁州','六安','宣城','池州','亳州']

                       },

//X轴滚动放大
//dataZoom : [ {startValue : '00:00:00'}, {type : 'inside'} ],

//X轴数据
                       xAxis : [ {
                           data :date,
                           type : 'category',
                           axisPointer : {type : 'shadow'},
                           axisLabel : {interval:5,rotate:'40'}
                       } ],
                       yAxis : [{type : 'value',name : '负荷',/*min : 0,max : 100,interval : 20,*/axisLabel : {formatter : '{value}'}} ],

//Y轴要显示的数据
                       series : [{name :ahf,type : 'line',smooth:true,data : hf},{name : abb,type : 'line',smooth:true,data : bb},{name : awh,type : 'line',smooth:true,data : wh},{name : ahn,type : 'line',smooth:true,data : hn},
                           {name : amas,type : 'line',smooth:true,data : mas},{name : ahb,type : 'line',smooth:true,data : hb},{name : atl,type : 'line',smooth:true,data : tl},{name : aaq,type : 'line',smooth:true,data : aq},
                           {name : ahs,type : 'line',smooth:true,data : hs},{name : afy,type : 'line',smooth:true,data : fy},{name : asz,type : 'line',smooth:true,data : sz},{name : axz,type : 'line',smooth:true,data : xz},
                           {name : ala,type : 'line',smooth:true,data : la},{name : axc,type : 'line',smooth:true,data : xc},{name : acz,type : 'line',smooth:true,data : cz},{name : ahz,type : 'line',smooth:true,data : hz}]
                   });
                   if (option && typeof option === "object") {
                       myChart.setOption(option, true);
                   }
   }