ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
Echarts提供了多种多样的图标以及对应的示例,在试用之前可以进行一个参照http://echarts.baidu.com/examples.html
1、首先我们从它的官网上下下载所需的js文件,如果是制作地图相关的图表还需要下载对应地图的js或者json文件。ps:下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。
2、下载完之后就可以在我们项目中的webapp下建立相应的文件放入,然后即可在html页面中引用,这也是echarts的便利,在无需引用别的相关依赖了剩下的就交给ajax进行数据的传入即可
<script type="text/javascript" src="/js/echarts/echarts.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/js/echarts/china.js" charset="UTF-8"></script>
3、引用到js文件后,我们在html页面加上一个div作为图表的一个展示层,div中的样式可以自由的设置,大小设置好满足显示
<div id="myChart" style="position: absolute; overflow: hidden; width: 100%; height: 100%; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"></div>
4、首先对所设置的这个div作为图表的展示进行一个初始化
var myChart = echarts.init(document.getElementById('myChart'));
5、最关键的是对option属性的设置,在项目的使用过程中大部分都是通过ajax动态的获取数据进行一个前端的展示
option = {
tooltip : {
trigger : 'item'
}
};
var myChart = echarts.init(myChartDiv);
myChart.setOption(option); //渲染地图
$.get('/js/echarts/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
myChart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
// 异步加载数据
$.ajax({
type : "get",
async : false, //同步执行
url : "/bondRegionGraphData.htm?table="+table+"&key="+key+"&date="+date+"&flag="+flag+"",
dataType : "json", //返回数据形式为json
data : {
rnd : Math.random()
},
success : function(result) {
console.log(result);
myChart.hideLoading();
if (result.success) {
myChart.setOption({
series : [ {
type : 'map',
mapType : 'china',
roam : false, //是否开启鼠标缩放和平移
// 根据名字对应到相应的系列
name : result.name,
data : result.data
} ],
visualMap : { //视觉映射组件,可以根据范围调节数据变化
min : 0, //最小值
max : result.maxValue, //最大值
left : 'left', //位置
top : 'bottom',
orient : 'horizontal', //水平
text : [ '高', '低' ], // 文本,默认为数值文本
calculable : true
//是否启用值域漫游,即是否有拖拽用的手柄,以及用手柄调整选中范围。
},
title : {
text : result.title,
left : 'center' //标题居中
}
});
} else {
myChart.setOption({
title : {
text : result.title,
left : 'center' //标题居中
},
series : [ {
type : 'map',
map : 'china',
data : []
} ]
});
}
},
error : function(errorMsg) {
alert("请求数据失败!");
}
});
6、这里我是以json格式的中国地图数据(china.json),所以就多了下面这个给echarts.registerMap来注册地图,如果是直接引用china.js则可以直接引用js即可忽略这步
$.get('/js/echarts/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
myChart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
7、最关键的一步就是给option中的series属性添加data的值,data的值要求传入的是一个JSONArray的形式{name:”上海”,value:0},我们可以将数据库查出来的数据,拼装成JSONObject格式,注意:如果是地图图表name传入的是城市或者地区的简称,value不可以是字符类型
series : [ {
type : 'map',
mapType : 'china',
roam : false, //是否开启鼠标缩放和平移
// 根据名字对应到相应的系列
name : result.name,
data : result.data
} ]
所有的图表option都是大同小异,关键还是在数据的拼装,最后展示下制作的两个图表。