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版权协议,转载请附上原文出处链接和本声明。