简单的echart图表实现

首先要导入jquery

<script src="<%=path%>/echarts/build/dist/echarts.js"></script>

<div id="main1" style="height: 300px"></div> 

   创建一个div

下面是js

<script type="text/javascript">
var myChart1;//定义图表变量
var option;

require.config( {
paths : {
echarts : 'echarts/build/dist'   //配置echart
}
});


require( [ 'echarts', 'echarts/chart/bar' ], function(ec) {
myChart1 = ec.init(document.getElementById("main1"));
option = {
tooltip : {
show : true
},
legend : {
data : [ '实际', '同期', '计划', '标杆' ]
},
xAxis : [ {
type : 'category',
data : [ "电厂" ]
} ],
yAxis : [ {
type : 'value',
name : '发电量(万kWh)'
} ],
series : [


{
"name" : "实际",
"type" : "bar",
"data" : [ 215 ],    //这里data也可以不写，用ajax从后台获取数据也可以，ajax方法在下面
itemStyle : {
normal : {
color : "#00C5CD"
}
}
}, {
"name" : "同期",
"type" : "bar",
"data" : [ 350.27 ],
itemStyle : {
normal : {
color : "#8968CD"
}
}
}, {
"name" : "计划",
"type" : "bar",
"data" : [ 360 ],
itemStyle : {
normal : {
color : "#66ccff"
}
}
}, {
"name" : "标杆",
"type" : "bar",
"data" : [ 370 ],
itemStyle : {
normal : {
color : "#EEB422"
}
}
} ]
};
myChart1.setOption(option);
var url = "<%=path%>/report/doReport.do?method=getFdl";     //后台方法
getFdlChartData(myChart1, url);
}


);


function getFdlChartData(ct, url) {
var options = ct.getOption();
var url = url;
$.ajax( {
type : "POST",
async : true, // 同步执行
url : url,
success : function(result) {
result = $.parseJSON(result);
                                 //将返回的数据赋给option中的data
if(result.length>0){
for(var i=0;i<options.series.length;i++){
options.series[i].data[0] = result[i];
}
ct.setOption(options);
}
},
error : function(errorMsg) {
                  alert("出错了");
}
});
}
</script>

效果如下，数据是从后台获取的，只有同期的数据