ECharts初体验

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

代码：

ECharts下载地址：http://echarts.baidu.com/download.html

html：

<div id="main" style="width: 100%; height:100%; min-height: 300px;"></div>

引入插件：

<script type="text/javascript" src="../js/echarts.common.min.js"></script>

javascript：

	// 初始化echarts
	//var myChart = echarts.init($('#main'));
	var myChart = echarts.init(document.getElementById('main'));

	// 指定图表的配置项和数据
	var option = {
		title: {
			text: '流量统计'
		},
		tooltip : {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			data:['PV','UV','IP']
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis : [
			{
				type : 'category',
				boundaryGap : false,
				data : ['周一','周二','周三','周四','周五','周六','周日']
			}
		],
		yAxis : [
			{
				type : 'value'
			}
		],
		series : [
			{
				name:'PV',
				type:'line',
				stack: '总量',
				areaStyle: {},
				data:[20, 132, 101, 134, 100, 230, 250]
			},
			{
				name:'UV',
				type:'line',
				stack: '总量',
				areaStyle: {},
				data:[220, 182, 191, 234, 290, 330, 310]
			},
			{
				name:'IP',
				type:'line',
				stack: '总量',
				areaStyle: {},
				data:[150, 232, 201, 154, 190, 330, 410]
			}
		]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	//手机兼容
	window.addEventListener("resize", function () {
	　　myChart.resize();  //窗口变化重新渲染统计图
	});