使用echart 做出数据折线图

最新推荐文章于 2025-06-10 12:16:04 发布

转载最新推荐文章于 2025-06-10 12:16:04 发布 · 726 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yj95/p/8608042.html

文章标签：

#数据库 #javascript #数据结构与算法 #ViewUI

本文介绍了一个使用ECharts实现动态加载数据并绘制折线图的例子。代码中通过Ajax获取数据，然后利用ECharts API更新图表数据。注意在设置图表选项时，必须确保数据已经加载完成。

代码如下：


// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById("main"));
//异步获取数据
var cate=[];
var da=[];
function getsomething(i){
   var cate=[];
   var da=[];
   var id= i.value;
   var option=$("#year option:selected").val();
   $.get('getsj',{id:id,option:option},function(data){
      var b=JSON.parse(data);
      for(var i=0;i< b.length;i++){
         cate.push(b[i].days);
         da.push(b[i].sums);
      }
      myChart.setOption({        //加载数据图表
         title: {
            text: '车场收益折线图'
         },
         tooltip: {},
         legend: {
            data:['收入']
         },
         xAxis: {
            data: cate
         },
         yAxis: {},
         series: [{
            name: '收入',
            type: 'line',
            data: da
         }]
      });
   })
}
在测试过程中，将 myChart.setOption（） 加载数据图表放在方法外导致无法实例出图表，要注意。