Echarts心得

作为热门图表展示工具，免费的国产软件Echarts无疑是许多中小企业首选，近期也使用了Echarts完成了几个小项目，这里谈一下心得。

1、下载

在官网http://echarts.baidu.com/选择合适版本进行下载，高级版本可选择的图形更丰富一些。这边我选择了最新版本百度2.2.7。由于下载的版本是包含实例和文档，而实际使用中是不需要的，所以建议项目中保留echarts-2.2.7\build\dist\echarts.js即可满足需求。

2、使用

Echarts上手很简单，根据文档里面的提供的实例，选择合适的展示图形，复制左边提供的代码段，拷贝到项目页面加载的js中

$(document).ready(function(){
	require.config({
		paths: {
			echarts: '../../common/echarts-2.2.3/build/dist'
		}
	});

	// 使用
	require(
		[
			'echarts',
			'echarts/chart/line',
			'echarts/chart/pie',
			'echarts/chart/gauge',
			'echarts/chart/bar'
		],
		loadCharts
	);

})

function loadCharts(ec) {
	echarts = ec;
	//服务器时间
	setTimeout(function(){
		loadMainCpu(cpu,'load');
		//1分钟
		setInterval(function(){
			loadMainCpu(cpu,'update');
		},1000*60)

	},500)

}


function loadMainCpu(cpu,type) {
	_main_cpu = echarts.init(document.getElementById('main_cpu'));
	
	/*拷贝实例*/
	
	if(type =='load'){
		_main_cpu.setOption(option)
	}else{
		option.animation = false;
		_main_cpu.setOption(option,false);
	}

}

在拷贝实例处拷贝js代码即可。

3、优缺点

Echarts的优点比较明显体积小，免费、上手快，只需要有一些js基础，剩下的就是复制粘贴的事情，而且是国产的东西，文档看起来也比较方便，总体来说门槛比较低。

缺点同样也有不少，比如在文档实例不能满足的情况下除了改改颜色线长短粗细之外，其他的自定义开发比较困难；在IE8环境下不少动画效果会打折扣或者根本显示不出来，按照一些网上说法下载支持IE8的Echarts版本也没有明显改善；缺乏立体效果图的支持等。

总体来说，虽然缺点不少，但是Echarts还是有其适用空间的，类似工具还有很多，比如Highcharts、D3等，适合自己的的才是最好的。