ECharts.js学习（一） 简单入门

该文章转载自    http://www.cnblogs.com/leoxuan/p/6511123.html 

第一步，引用Js文件

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

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

js文件有几个版本，可以根据实际需要引用需要的版本。点击查看下载页面

第二步，准备一个放图表的容器

<div id="chartmain" style="600px; height: 400px;"></div>

第三步，设置参数，初始化图表

$(document).ready(function(){
	//指定图标的配置和数据
	var option = {
	    title:{
	        text:'ECharts 数据统计'
	    },
	    tooltip:{},
	    legend:{
	        data:['用户来源']
	    },
	    xAxis:{
	        data:["Android","IOS","PC","Ohter"]
	    },
	    yAxis:{
	
	    },
	    series:[{
	        name:'访问量',
	        type:'line',
	        data:[500,200,360,100]
	    }]
	};
	//初始化echarts实例
	var myChart = echarts.init(document.getElementById('chartmain'));
	
	//使用制定的配置项和数据显示图表
	myChart.setOption(option);
});

这样简单的一个统计图表就出来了，官网使用的柱状图，我这边改用了折线图。

柱状图其实也很简单，只要修改一个参数就可以了。把series里的type 值修改为"bar"

饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式。

$(document).ready(function(){
	//指定图标和数据
	var option = {
		title : {text:'ECharts 饼图统计'},
		series : [{
			name : '访问量',
			type : 'pie',
			radius : '60%',
			data : [
				{value:500,name:'Android'},
                {value:200,name:'IOS'},
                {value:360,name:'PC'},
                {value:100,name:'Ohter'}
			]
		}]
	};
	
	//初始化 char实例
	var myChart = echarts.init(document.getElementById('chartmain'));
	
	//使用设置配置
	myChart.setOption(option);
});