引語：echarts.js是百度團隊推出的一款用於圖表可視化的插件，用於以圖表的形式展現數據，功能強大，上手簡單
1、從官方網站中下載所需的echarts.js文件，該文件因功能廣泛，包體較大，可自行決定按需打包下載。
2、從前端頁面引入echarts.js，后即可使用
<script src="js/echarts.min.js"></script>
3、請看如下使用案例：
大致就是引入js
選一個圖表容器（DIV）
初始化echarts對象並綁定到該容器上
給綁定的echarts容器配置圖表參數來展示數據
根據業務結合官網API的屬性和方法對圖表進行自由控制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>echarts入門</title>
</head>
<script src="js/jquery-2.2.4.js"></script>
<script src="js/echarts.min.js"></script>
<style> .box{ width:900px; height: 900px; border:4px double seagreen; margin: auto; float: left;
}
</style>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
<script>
var myChart1 = echarts.init(document.getElementsByClassName('box')[0]); var myChart2 = echarts.init(document.getElementsByClassName('box')[1]); var myChart3 = echarts.init(document.getElementsByClassName('box')[2]); var myChart4 = echarts.init(document.getElementsByClassName('box')[3]); var myChart5 = echarts.init(document.getElementsByClassName('box')[4]); //指定圖表的配置項和數據
var option1 = { title: {text:'商戶營業狀態'}, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'right', y:'bottom', data:['營業中','未營業'] }, calculable : true, series : [ { name:'訪問來源', type:'pie', radius : ['30%', '40%'], itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true, position : 'center', textStyle : { fontSize : '20', fontWeight : 'bold' } } } }, data:[ {value:635, name:'營業中'}, {value:310, name:'未營業'}, ] } ] }; var option2 = { title:{ text:'服裝店銷售統計' }, //提示框組件
tooltip:{ //坐標軸觸發，主要用於柱狀圖，折線圖等
trigger:'axis' }, //圖例
legend:{ data:['銷量'], x:'right' }, //橫軸
yAxis:{ data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, //縱軸
xAxis:{}, //系列列表。每個系列通過type決定自己的圖表類型
series:[{ name:'銷量', //折線圖
type:'bar', data:[5, 20, 36, 10, 10, 20] }] }; myChart1.setOption(option1); myChart2.setOption(option2); </script>
</html>
4、上圖創有六個DIV，其中兩個配置了Echarts顯示參數，運行如下圖：
可以看到，前兩個DIV已經有圖表展示，剩下的四個DIV都是沒有數據的，各位可以拷貝運行下，別忘了先下載echarts.js。
接下來，就是真正入門教程了，提供一波網站快速學習：
從各大教程網站的案例中直接練習，結合API調整樣式，能在最快的時間上手！
祝大家學習愉快~