ECharts

获取ECharts:

1. npm install echarts --save
2. <script src="echarts.min.js"></script>

使用：

//必须为ECharts准备一个具备宽高的Dom容器 
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

		//如果数据加载时间较长，可以用一个loading的动画来提示用户数据正在加载。
		myChart.showLoading(
		    text: '', //文字
		    color: '#49D0B4', //loading的圈的颜色
		    maskColor: 'rgba(0, 0, 0, 0)', //背景颜色    
		    textColor: '#fff', //文字颜色
		});

		// 异步加载数据
		$.get('data.json').done(function (data) {
			//数据加载完成后再调用hideLoading方法隐藏加载动画。
			myChart.hideLoading();

		    // 指定图表的配置项和数据
        	var option = {};
        	
		    // 填入数据
		    myChart.setOption(option);
		});           
</script>

如果DOM元素还未加载完成就初始化echarts图表，会报错：cannot read property “getAttribute” of null。

echarts的配置默认是合并的（最明显地，series中的数据进行合并，如果是不同的type类型更是会导致无法显示数据），可以设置setOption()的第二个参数为true使echarts的配置不合并；

myCharts.clear();//清除图表

改变容器的宽高之后需要调用resize()方法，否则内置的canvas将不会改变宽高
myChartS.resize();//重置图表