公司要做一个统计的图表，在前端的数据需要用图表的形式展示。
用这个库原因有二：
1.有官方的API并且是中文的，方便阅读。
2.一直在更新bug很少，目前到了ECharts.3的版本。（样式非常的丰富。）
ECharts.js官方地址。
一.使用方法：
1.下载js文件，并引用。
（1）引用：
js文件有不同的版本，可自行下载。地址：http://echarts.baidu.com/download.html
（2）引用：
<script type="text/javascript" src="echarts.js"></script>2.准备放置的容器：
<div id="container" style="width: 900px;height:450px;margin: 0 auto;border: 1px solid #CCCCCC;"></div>3.初始化图表：
<script type="text/javascript">
//指定图标的配置和数据
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
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('container'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>效果图：
这是折线图
改为柱状图：
改变series的type的值：line为bar 如图：
效果如图：
二.细节：
1.首先echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化，最后把配置方法(setOption)赋值到初始化图形中，详情点击。
常用的如图：
这些是一些比较基础的一些，也是必须要掌握的。
2.个人列子（其中一些属性我都标注出来了，可以直接在js代码块中去看）：
html：
<div id="container" style="width: 900px;height:450px;margin: 0 auto;border: 1px solid #CCCCCC;"></div>js：
<script type="text/javascript">
window.onload=function(){
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var a=['5', '1', '5', '8', '13', '17', '30', '4', '5', '2'];
var arr1=[];
for (var i=0;i<a.length;i++){
var num=0;
for(var j=0;j<=i;j++){
num+=parseInt(a[j])
}
arr1.push(num)
}
option = null;
option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox: {
show: true,
feature: {
dataView: {show: true, readOnly: false},//提示切换数据视图
magicType: {show: true, type: ['line', 'bar']},//切换折线图
restore: {show: true},//还原
saveAsImage: {show: true},//保存图片
dataView:{//切换数据视图的样式，如果没有页面会比较杂乱
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '<table style="width:100%;text-align:center"><tbody><tr>'
+ '<td>时间</td>'
+ '<td>' + series[0].name + '</td>'
+ '<td>' + series[1].name + '</td>'
+ '</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}
}
},
/*feature: {
saveAsImage: {}
}*/
},
legend: {
data:['达到正确率人数','到此共人数']//线柱提示
},
xAxis: {//x轴
type: 'category',
name: '答题正确率/%',
boundaryGap: true,
axisPointer: {
sanp:false
},
data: ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']
},
yAxis:{//y轴
type: 'value',
name:'人',
min: 0,//最小
max: 100,//最大
interval: 10,//分为几份
axisLabel: {
formatter: '{value} 人'//改变代码格式使value可以使用
},
axisPointer: {
snap: false
}
},
visualMap: {//改变其中某段的样式
show: false,
dimension: 0,
pieces: [{
lte: 5,
color: 'green'
}, {
gt: 5,
lte: 6,
color: 'red'
}, {
gt: 6,
lte: 14,
color: 'green'
}]
},
series: [
{
name:'达到正确率人数',
type:'bar',//柱状图
yAxisIndex: 0,
smooth: true,
label: {
normal: {
show: true,
position: 'top'
}
},
data: ['5', '1', '5', '8', '13', '17', '30', '4', '5', '2']
},
{
name:'到此共人数',
type:'line',//折线图
yAxisIndex: 0,
smooth: true,//线是滑线
label: {
normal: {//显示数字
show: false,
position: 'top',
color:'red'
}
},
data: arr1
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
</script>