題外話：好久沒來博客園了，這幾個月自己的工作經歷可以算是相當豐富，其實一直不知道自己做web前端能做到什么時候，但是想說既然現在還在做着這個職位，就好好的學習。之前很少寫js代碼，來了新公司大多數都是接觸的js腳本語言，所以可以說每天都會學到很多新知識。公司的插件用的比較多，其中一個就是echart；
echarts的官網主頁：https://ecomfe.github.io/echarts/index-en.html；
echarts的中文主頁：http://echarts.baidu.com/；
要使用echarts，首先需要在html加載echarts的js；
eg:
<body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts單文件引入 --> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> </body>
然后就是配置echart的參數，個人喜歡寫在一個函數里面，然后再調用這個函數；例如：（針對的是bar圖形）
var initEChart=function(){ // 基於准備好的dom，初始化echarts圖表 require( [ 'echarts', 'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載 ], function (ec) { // 基於准備好的dom，初始化echarts圖表 var myChart = ec.init(document.getElementById('main')); myChart.showLoading({ text: '讀取數據中...' //loading，是在讀取數據的時候顯示 }); //當無數據的時候顯示； if (data <= 0) { myChart.showLoading({ text: '無數據' //loading話術 }); return; } myChart.hideLoading();//隱藏loading //數據選項 var option = { title : { text: '學生成績' }, tooltip : { trigger: 'axis' }, legend: { data:['語文成績','數學成績']//是指元素的屬性 }, calculable : true, xAxis : [ { type : 'category', data : ['同學1','同學2'];//x軸顯示的數據 } ], yAxis : [ { type : 'value'//y軸顯示的數據 } ], series : [ { name:'歷史平均分', type:'bar', data: ['2','2'], markPoint : { data : [ {type : 'max', name: '最大值'}, ] }, barGap :0//這個是控制同一個元素的兩個屬性直接的距離 //markLine : { // data : [ // {type : 'average', name: '平均值'} // ] //}(這個是平均值基線，根據個人需求） }, { name:'當前平均分', type:'bar', data: ['3','5'], markPoint : { data : [ {name : '年最高',type:"max"}, ] } } ] }; // 為echarts對象加載數據 myChart.setOption(option); } ); };
最后效果圖如下，當然圖表顯示的文字是我馬賽克了后寫上去的，因為項目里面的文字和上文說的文字不一樣，將就着看了吧；
這就是echarts，我覺得還蠻好用的。我說的例子主要是柱形的，echats還有很多其他形狀，用的比較多的就柱形和環形；環形其實也是類似的，在加載時，就
'echarts/chart/pie', // 加載環形模塊
好啦，大致就這么多了。如有問題，歡迎指正，謝謝:)；