一、echarts介紹
ECharts是由百度團隊開發的，可高度個性化定制的數據可視化圖表庫。它的底層依賴輕量級的Canvas類庫ZRender，是一個純JavaScript的圖標庫，兼容（IE8/9/10/11，Chrome，Firefox，Safari等）主流瀏覽器，可以運行在PC和移動設備上。
二、完成一個簡單圖標
廢話不多說，一起來完成一個簡單的圖表，體驗一下ECharts的神奇吧！
1.引入ECharts
ECharts3開始不再強制使用AMD的方式按需引入，那么簡單粗暴，直接在官網下載所需ECharts文件，像引入普通JavaScript庫一樣用script標簽引入即可。簡單吧，看代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ECharts入門</title> </head> <body> <!-- 引入ECharts文件 --> <script src='echarts.min.js'></script> </body>
</html>
注：建議把js文件放在body下方
2.准備一個具備寬高的DOM容器
<body> <!-- 為ECharts准備一個具備大小（寬高）的DOM容器--> <div id='main' style='width:600px;height:400px;'></div> </body>
3.初始化一個echarts實例
<body> <!-- 為ECharts准備一個具備大小（寬高）的DOM容器--> <div id='main' style='width:600px;height:400px;'></div> <!--引入echarts.js--> <script src='./echarts.min.js'></script> <script> //基於准備好的DOM，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); </script> </body>
4.指定圖表的配置項和數據
//指定圖表的配置項和數據
var option = { title:{ text:'EChars入門' }, //提示框組件 tooltip:{ //坐標軸觸發，主要用於柱狀圖，折線圖等 trigger:'axis' }, //圖例 legend:{ data:['銷量'] }, //橫軸 xAxis:{ data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, //縱軸 yAxis:{}, //系列列表。每個系列通過type決定自己的圖表類型 series:[{ name:'銷量', //折線圖 type:'line', data:[5, 20, 36, 10, 10, 20] }] };
5.顯示圖標
//使用剛指定的配置項和數據顯示圖表 myChart.setOption(option);
6.完整代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ECharts入門</title> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的DOM容器--> <div id='main' style='width:600px;height:400px;'></div> <!-- 引入ECharts文件 --> <script src='./echarts.min.js'></script> <script> //基於准備好的DOM，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); //指定圖表的配置項和數據 var option = { title:{ text:'EChars入門' }, //提示框組件 tooltip:{ //坐標軸觸發，主要用於柱狀圖，折線圖等 trigger:'axis' }, //圖例 legend:{ data:['銷量'] }, //橫軸 xAxis:{ data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, //縱軸 yAxis:{}, //系列列表。每個系列通過type決定自己的圖表類型 series:[{ name:'銷量', //折線圖 type:'line', data:[5, 20, 36, 10, 10, 20] }] }; //使用剛指定的配置項和數據顯示圖表 myChart.setOption(option); </script> </body> </html>
7.生成圖表，如圖：
就這樣，一個漂亮的圖表生成了，是不是很簡單呢？