Echarts 使用总结

Echarts 导入

Echarts非常的强大！都用起来吧

echarts 能够支持的图形很多，开发者可以按需自己去引入想要使用的模块，echarts 3 支持在线构建 构建地址，用户最好能去按需加载，而且一般来说如果引入了echarts-all.js 则在第一次加载的时候需要很长的时间，非常不利与网页的加载。

导入配置 js

目录结构：assets/scripts/

esl.js

echarts.js

echarts-map.js

<script src="assets/scripts/esl.js"></script>
require.config({
paths:{
echarts:'./assets/scripts/echarts',
'echarts/chart/map' : './assets/scripts/echarts-map',
}
});
require(
[
'echarts',
'echarts/chart/map'   //按需加载,bar,k,line...
],
requireCallback
);
ChinaMap = document.getElementById('ChinaChart');// dom节点，用做图表的容器
ChinaChart = echarts.init(ChinaMap);//用echarts填充dom节点，去ajax的回调函数中使用
var options_china = getChinaoptions();//获取要显示的数据其实就是json格式的配置文件去ajax的回调函数中使用
ChinaChart.setOption(options_china,true);//显示

ajax 获取数据

要注意ajax我们平时使用的是异步请求（默认设置）async设置为 false。所以我们去设置option的时候要在其回调函数中设置，否则程序一开始会报错。因为option中的数据为空的时候去加载echarts会有异常抛出。

URL="http://localhost:8080/Users";
$.ajax({
url:URL,
data:null,
datatype:"json",
type:"GET",
success: function(response){
var userName=[];
var age=[];
for(i=0;i<response.length;i++){
userName.push(response[i].userName);
age.push(response[i].age);
};

option.xAxis[0].data=userName;  //注意这有可能是多个坐标轴
option.series[0].data=age;

mybar=echarts.init(Bar);
mybar.setOption(option,true);
}

});

展示

简单加载了中国地图