Echarts动态将Json数据填充进去

1、首先定义Echarts

var dom = document.getElementById("echarts");
var myChart = echarts.init(dom);
myChart.showLoading({
    text: "图表数据正在努力加载..."
    });
var app = {};
option = {
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'气象数据',
            type:'line',
            stack: '总量',
            data:[]
        }
    ]
};
myChart.setOption(option);//必须要有

2、动态填充

function SoilTemperature(){
      var SoilTemperature=[];//用来盛放Y坐标值:土壤温度
      var TM=[];//用来盛放x坐标值:时间
    $.ajax({
        url:"你的Action路径",
        type:"post",
        data:{传的参数},
        success:function(dataSource){
            var SQ=eval("("+dataSource+")");//解析Json
            var date=SQ.data;
            for(var i=0;i<date.length;i++){
                SoilTemperature.push( date[i].soilTemperature);
                TM.push( date[i].time);
            }
              myChart.hideLoading();    //隐藏加载动画
              myChart.setOption({        //加载数据图表
                  tooltip : {
                      trigger: 'axis'
                      },
                  toolbox: {
                      show : true,
                      feature : {
                          saveAsImage : {show: true}
                      }
                  },
                  calculable : true,
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data:TM
                  },
                  yAxis:{},//注意一定不能丢了这个,不然图表Y轴不显示
                  series: [{
                      // 根据名字对应到相应的系列,并且要注明type
                      name: '土壤温度',
                      type:'line',
                      data: SoilTemperature}]
              });

        }
    });
}

版权声明:本文为weixin_39482360原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。