echarts 项目使用总结

echarts项目使用总结

在各种网站分享的echrts使用方式都是只给出写一个简单的demo，数据都是伪数据，而我将总结在真实的项目过程中使用echarts的开发过程以及遇到的问题。

定义

基于html5 Canvas，是一个纯Javascript图表库

echrts原理

1. echarts是基于javaScript开发的，涵盖js、html、css的等技术
2. 在技术上主要是采用html5的canvas来绘画图表

动态调用数据库

一、前端获取json，然后调用echarts展示图表

1.首先引用echartsJs

<script type="text/javascript" src="${ctx}/plugins/echarts-2.2.1/echarts.js"></script>
<script type="text/javascript" src="${ctx}/plugins/jquery-1.8.3/jquery-1.8.3.min.js">

2.在js中引用相关模块

require(
	[
		'echarts',
		'echarts/chart/bar',
		'echarts/chart/line'
	],
	function (e) { //处理逻辑
	//初始化DOM
	var chart = document.getElementById('chart');
	var echart = ec.init(chart);
	var option = {
		tooltip: {
			show: true
		},
		legend: {
			data: ['销量']
		},
	...
	}; //预先构造一些基础的数据
	// xhr获取json数据
	$.getJSON('chartData', function (json) {
		option.categories = json.categories ;
		option.values = json.values;
	});
})

3.在后端的代码中拼凑这样一个json格式的json对象

Map<String, Object> json = new HashMap<String, Object>();
json.put("categories", categories);
json.put("values", values);

目前大部分是采用这种方式，在效率上比较占据优势。

---

二、前端获取调用数据接口获取图表的各部分数据拼装一个json

在我的项目中我是采用的这种方式，所以我将详细介绍下实现过程

1.有些配置是图标最为基本的饼图配置，我单独保存在一个baseData.json本地文件里面，配置如下:


下面的js代码是基于dojo框架的，xhr获取baseData.json的方式

var myOption = {};
function getBaseData(){
	var gbdDefer = new dojo.Deferred();
	dojo.xhrGet({
		url: "../js/data/data_risk_pie.json",
		handleAs: "json",
		preventStore:false,
		load: function(data) {
			myOption = dojo.clone(data).option;
			gbdDefer.resolve();
		},
		error: function(error){
			gbdDefer.reject(error);
		}
	})
	return gbdDefer.promise;
}

2.上面的json文件为我们搭建了一个基础的option对象，下面就加载自己的数据，填充到这个对象里面。

$.getJSON('optionJson', function (optionJson) {
	//optionJson是后台处理风转的json数据，里面放置下面需要的信息
	myOption.options[0].legend.data = ...; //填充图例的数据
	myOption.timeline.data = ... ;//填充时间轴的数据
	myOption.timeline.currentIndex = ... ; //设置当前的active元素，默认下标是0
	myOption.options.push(series_obj); //series_obj是时间轴上每个时间对应的图表 个数与 时间轴的时间个数一致
});

3.将拼装好的option对象设置到myCharts里，渲染出图表

function chartInit(myOption){
	var varElement = dojo.byId('draw-pie');
	var myChart = echarts.init(varElement);
	var defautDataLen = myOption.options[0].series[0].data.length;
	if(defautDataLen <= 0){ //如果在option数据为空的情况下，我们将自己设置空图表的样式
		emptyCharts();
	}
	myChart.setOption(myOption,true);
	myChart.on("click", chartSelected); //当图表被点击时候的事件设置
	//让图表自适应窗体
	window.onresize = myChart.resize;
	setTimeout(function(){
		myChart.resize();
		$(window).resize();
	}, 100);
	myChart.hideLoading();
}

特别设置

1.多图表级联，如图所示。
实现方式如下：

charts1.connect([charts2, charts3]);  //charts1、charts2、charts3分别对应图表1、2、3。
charts2.connect([charts1, charts3]);
charts3.connect([charts1, charts2]);

那这种情况下又如何展示上面的图例呢？

"legend": {
		"y": 0,
		"x":0,
		"data": ["图表1图例", "图表2图例1", "图表2图例2", "图表3图例1", "图表3图例2"]
}
//这样展示之后的tooltip会出现第一个图表提示信息展示多个的问题，这样需要修改下tooltip的formatter方法。
formatter: function(item) {
	var res = item[0].name;
	res += '<br/>' + item[0].childName+ ":" + item[0].value;
	return res;
}
//当然这里有点小问题，需要根据自己的逻辑来返回具体的值。

2.如何配置时间轴，可以调整要展示的时间段?

//每个图表的option中配置这个属性（不配置初始情况可能各个图表不一致），其中一个show:true; 即可
"dataZoom": {
	"show": false,
	"realtime": true,
	"start": 0,
	"end": 50,
	"height": 20
}

拓展功能

自定义工具

如果想自定义工具，可以按照如下设置

var myTool = "saveAsPdf"; //自定义扩展的工具名
myOption.options[0].toolBox.feature[myTool]= {
	show : true,
	title : '自定义扩展方法,另存为pdf',
	icon : 'image://../asset/ico/favicon.png', //可以添加自定义图标
	onclick : function (){ //在这里进行自己的逻辑操作
	alert('do my work! save as pdf');
}

拓展特别的工具

在实际的开发过程中可能会遇到有业务需要拓展特别的工具，比如下拉菜单，在我现在看来是没法用自定义工具栏的方式进行拓展了，那么我就只有想到在外部通过绝对定位的方式添加特别的工具到工具条指定位置，对于样式问题，自己精心设置是可以实现自适应的；在该拓展功能上面，您可以轻松自如的进行各种业务拓展。

dataView修改默认的显示板式

dataView : {
show : true,
title : '数据视图',
readOnly: true,
lang : ['数据视图', '关闭', '刷新'],
optionToContent: function(opt) { //设置如何展示数据
var table = ...; //按照自己的意愿进行table值的配置
return table; //必须要return ，否则只显示undefined
}
},

遇到的难点

1.如果存在一系列的图表的数据，在真实的开发过程中可能会存在部分图例没有数据的问题，那么可以将该图例数据value设置为0,千万不能不使用该图例，不然出现图示数据混乱的情况。
2.如果是像我这样先获取一部分基础的数据，然后再在此基础上进行数据的填充，那么一定要注意js执行是同步的，这里就需要使用异步加载，我采用的是promise来解决异步加载问题。
3.如果带有时间轴，而且想默认展示最后一个数据，那么需要设置currentIndex来改变默认的展示图表，但是同时需要将默认展示的数据放在myOption.options[0].series[0].data里面。

相关链接

[xiaopeng主页][http://blog.csdn.net/u014306354]
ECharts 下载
ECharts 官网
HTML5 Canvas 教程

个人项目总结，如有问题，欢迎到个人主页留言
[link_key]: http://blog.csdn.net/u014306354