圖1和圖2是手機上顯示的效果，
圖3是電腦瀏覽器顯示的效果。
如何使用ECharts?
1.下載echarts.js
2.引入echarts.js
<script type="text/javascript" src="../../plugin/echarts/echarts.js"></script>
3.定義div區域
<div id="ec1" style="width: 100%;height:400px;"></div>
<div id="ec2" style="width: 100%;height:400px;"></div>
4.初始化並關聯區域
// 基於准備好的dom，初始化echarts實例
var myEc1 = echarts.init(document.getElementById('ec1'));
5.配置數據與參數
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
6.填充區域
// 使用剛指定的配置項和數據顯示圖表。
myEc1.setOption(option);
tips:這里最核心的就是option這個參數了，配置不同的option，就會顯示不同的圖表內容。
完整案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
<title>echarts測試</title>
</head>
<body style="overflow: hidden;">
<header class="aui-bar aui-bar-nav">
echarts測試
</header>
<!-- 為 ECharts 准備一個具備大小（寬高）的 DOM -->
<div id="ec1" style="width: 100%;height:400px;"></div>
<div id="ec2" style="width: 100%;height:400px;"></div>
<script type="text/javascript" src="../../plugin/echarts/echarts.js"></script>
<script>
// 基於准備好的dom，初始化echarts實例
var myEc1 = echarts.init(document.getElementById('ec1'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myEc1.setOption(option);
var myEc2 = echarts.init(document.getElementById('ec2'));
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'line' // 默認為直線，可選為：'line' | 'shadow'
}
},
// label:{
// normal:{
// show: true,
// position: 'inside'}
// },
legend: {
data:['直接粉絲','間接粉絲']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['一月','二月','三月','四月','五月','六月','七月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接粉絲',
type:'bar',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'間接粉絲',
type:'bar',
stack: '廣告',
data:[150, 232, 201, 154, 190, 330, 410]
}
]
};
myEc2.setOption(option);
</script>
</body>
</html>
具體使用，可以參考官方案例，http://echarts.baidu.com/examples.html