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="width: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); });