前言

最近在做一个项目需要用到大量的图形报表来展示数据。就去对比了一些前端图形报表框架，有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：小弟不才，略知一二，欢迎大家关注、评论、转发。