echarts入門教程（含小案例）
ECharts 入門教程
簡介：
ECharts，縮寫來自Enterprise Charts，商業級資料圖表，是百度的一個開源的資料視覺化工具。
特點：
1、開源軟體，並且我們提供了非常炫酷的圖形介面，特色是地圖，另外還提供了柱狀圖、折線圖、餅圖、氣泡圖及四象限圖等；
2，使用簡單，在官網中為我們封裝了js，只要會引用就會得到完美的展示效果；
3，種類多，echarts實現簡單，各類圖形都有；相應的模板，還有豐富的API及文件說明，非常詳細；
4，相容性好，基於HTML5，有著良好的動畫渲染效果。
柱狀圖效果：
首先，建立一個div盒子來盛放我們即將繪製的柱狀圖。
<divid=
然後，我們匯入Echarts類庫，做好準備。（如果沒有echart類庫，請到官網上下載）
<!-- 引入 echarts.js -->
<!-- 這裡是載入剛下好的echarts.min.js，注意路徑 -->
<script src="js/echarts.min.js"></script>
最後，開始繪圖。（重點是option裡的設定，設定座標軸、設定資料。）
// 基於準備好的dom，初始化echarts例項function a1() {
//設定標題 title:{text:"柱狀圖"，subtext:'柱狀圖喲柱狀圖'
},
//設定提示 tooltip:{show:true},
//設定圖例 legend:{data:["銷量"]},//
//設定座標軸
xAxis:{ data:["一月","二月","三月","四月"] }, yAxis:{type:'value'},
series:{ name:"銷量", type:"bar", data:[200,400,600,300] } }; // 使用剛指定的配置項和資料顯示圖表。 echar.setOption(option);}
柱狀圖完整的程式碼：
<html><head> <title>Title</title> <script src="js/echarts.min.js"></script> <script> // 基於準備好的dom，初始化echarts例項 function a1() { var echar=echarts.init(document.getElementById("first")); // 指定圖表的配置項和資料 var option={ title:{text:"柱狀圖"}, tooltip:{show:true}, legend:{data:["銷量"]},// xAxis:{ data:["一月","二月","三月","四月"] }, yAxis:{type:'value'}, series:{ name:"銷量", type:"bar", data:[200,400,600,300] } }; // 使用剛指定的配置項和資料顯示圖表。 echar.setOption(option); } </script></head><body><div id="first" style="width: 500px;height: 500px"></div><button onclick="a1()">柱狀圖</button></body></html>
餅狀效果圖：
餅狀圖完整程式碼：
<html><head> <title>Title</title> <script src="js/echarts.min.js"></script> <script>
// 基於準備好的dom，初始化echarts例項 function a2(){ var echar=echarts.init(document.getElementById("first")); // 指定圖表的配置項和資料
var option={ title:{text:"餅狀圖"}, tooltip:{ trigger:"item", formatter:"{b}產值<br>{c}" }, series:{ type:"pie", data:[ {name:"鄭州",value:900}, {name:"杭州",value:800}, {name:"南京",value:500} ] } };
// 使用剛指定的配置項和資料顯示圖表。 echar.setOption(option); } </script></head><body><div id="first" style="width: 500px;height: 500px"></div><button onclick="a2()">餅狀圖</button></body></html>
總結：認真敲，多敲多練習，多思考。（只是總結給自己的，不喜歡勿噴，謝謝！）