前言

最近在做一個項目需要用到大量的圖形報表來展示數據。就去對比了一些前端圖形報表框架，有Highcharts、Echarts、Three.js。發現Three.js比較笨重，不太適合數據展示，做前端動畫還是比較好。而highcharts、echarts比較輕量級拿來就用比較方便。最后發現Echarts免費，而Highcharts用于商業用途時還需要授權，所以最終還是選擇了Echarts。

一、引入ECharts.js

二、HTML中準備DOM元素

三、初始化echarts 實例

// 基于準備好的dom，初始化echarts實例

var myChart = echarts.init(document.getElementById('main'));

四、根據echarts 實例繪制圖表

// 第一步：準備數據

var option = {

title: { text: 'ECharts繪圖'},

tooltip: {},

legend: { data:['書銷量']},

xAxis: {data: ["Java","Python","C#","C++","Go"]},

yAxis: {},

series: [{name: '書銷量',type: 'bar',data: [40, 30, 20, 30, 10]}]

};

// 第二步：調用實例的方法，講數據傳入進去，繪制圖表

myChart.setOption(option);

五、總結

echarts是百度出品。繪圖的數據都是在后臺準備好再傳入前臺，所以針對后臺數據組裝，github上面有大神封裝好的第三方庫可以引用。eg:Java 中ECharts.jar

PS：小弟不才，略知一二，歡迎大家關注、評論、轉發。