echarts初探
最近经常看到echarts，觉得很有意思，并且这个库是百度开发的，目前来说使用的也很广泛，包括百度、阿里、腾讯、网易、小米、新浪、华为、联想、美团等一大批一线互联网公司在使用，且github上的star数也有2万多了，还是挺不错的。
echarts是一个纯JavaScript图标库，可以流畅的运行在PC和移动端，兼容性也不错，底层依赖的时canvas类库ZRender，它可以提供生动、直观、可定制的数据可视化图表。具体来说，可以提供常规的折线图、散点图、柱状图、饼图、K线图，地理数据可视化的地图、热力图、线图等等。 且Echarts3开始独立出了“坐标系”的概念，支持直角坐标系、极坐标系、地理坐标系等。 且对于流量非常珍贵的移动端的文件体积做了优化，且可以在移动端缩放、平移等等。且借助canvas的能力，可以在散点图中轻松展现上万甚至上十万的数据。且其特效绚丽。
使用Echarts很简单，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts</title> <script type="text/javascript" src="./echarts.js"></script> </head> <body> <div id="main" style="width: 700px; height: 300px;"></div> <script> var myChar = echarts.init(document.getElementById('main'), 'light'); var option = { title: { text: '宝宝的抖音喜欢的个数变化' }, legend: { data: ['数量'] }, xAxis: { data: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次', '第七次',] }, yAxis: {}, series: [{ name: '数量', type: 'bar', data: [439, 454, 448, 452, 468, 488, 493], }], // 全局样式设置 backgroundColor: 'pink', textStyle: { color: 'black' }, // 这里的itemStyle中的item在这个例子中就是每一个柱状图，而不是整个图 itemStyle: { color: 'yellow', // 柱状图的颜色 shadowBlur: 40, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'red', emphasis: { color: 'green', shadowBlur: 200, shadowColor: 'black' } }, } myChar.showLoading(); setTimeout(function () { myChar.setOption(option); myChar.hideLoading(); }, 1500); </script> </body> </html>
即这里我们先写一个div用于容纳这个canvas，接下来，我们使用echarts.init函数进行初始化，第一个参数接受的的是一个DOM，第二个参数接受的是主题配置，如'light'或'dart'。
接下来，我们就可以写一个配置了，这个配置中有title、legend、xAxis、yAxis、series，值得注意的是，这里的legend的数据要和series中的数据一一对应。另外，我们还可以对整个图标的样式做出定义。最后我们只要setOption即可。
注意，数据是获取到的，有时为了不让用户等待，我们可以用showLoading提示用户很快就会加载，这样的用户体验会更好一些。
但是，仅仅从上面的例子中，我们就可以发现一个问题：legend、坐标轴和series中的数据一般是从后端获取到的，所以，如果按照这种写法显然会严重降低效率，所以，Echarts 4中使用了dataset来简化操作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts</title> <script type="text/javascript" src="./echarts.js"></script> </head> <body> <div id="main" style="width: 700px; height: 300px;"></div> <script> var myChar = echarts.init(document.getElementById('main'), 'light'); var option = { title: { text: '宝宝的抖音喜欢的个数变化' }, legend: { data: ['数量'] }, dataset: { source:[ ['product', '数量'], ['第一次', 439], ['第二次', 454], ['第三次', 448], ['第四次', 452], ['第五次', 468], ['第六次', 488], ['第七次', 493] ] }, xAxis: { type: 'category' }, yAxis: {}, series: [ {type: 'bar'}, ], // 全局样式设置 backgroundColor: 'pink', textStyle: { color: 'black' }, // 这里的itemStyle中的item在这个例子中就是每一个柱状图，而不是整个图 itemStyle: { color: 'yellow', // 柱状图的颜色 shadowBlur: 40, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'red', emphasis: { color: 'green', shadowBlur: 200, shadowColor: 'black' } }, } myChar.showLoading(); setTimeout(function () { myChar.setOption(option); myChar.hideLoading(); }, 1500); </script> </body> </html>
可以看到，我们这里使用了dataset，然后就可以将之前xAxis和series的内容全部放在这个dataset里，尤其是数据量比较大的时候，这种方法更为方便。
另外，Echarts中还是一个是dataZoom组件，即可以对图表的X轴进行zoom，添加如下代码即可：
dataZoom: [ { type: 'slider', start: 10, end: 60 } ],
因为在前端，表格也是需要和用户进行交互的，所以Echart也支持常规的事件，比如：click、dbclick、mousedown、mousemove、mouseup、mouseover、mouseout等。
myChar.on('click', function (params) { alert((params.data[0] + ': ').concat(params.data[1])) });
全部代码如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts</title> <script type="text/javascript" src="./echarts.js"></script> </head> <body> <div id="main" style="width: 700px; height: 300px;"></div> <script> var myChar = echarts.init(document.getElementById('main'), 'light'); var option = { title: { text: '宝宝的抖音喜欢的个数变化' }, legend: { data: ['数量'] }, dataset: { source:[ ['product', '数量'], ['第一次', 439], ['第二次', 454], ['第三次', 448], ['第四次', 452], ['第五次', 468], ['第六次', 488], ['第七次', 493] ] }, xAxis: { type: 'category' }, yAxis: {}, dataZoom: [ { type: 'slider', start: 10, end: 60 } ], series: [ {type: 'bar'}, ], // 全局样式设置 backgroundColor: 'pink', textStyle: { color: 'black' }, // 这里的itemStyle中的item在这个例子中就是每一个柱状图，而不是整个图 itemStyle: { color: 'yellow', // 柱状图的颜色 shadowBlur: 40, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'red', emphasis: { color: 'green', shadowBlur: 200, shadowColor: 'black' } }, } myChar.showLoading(); setTimeout(function () { myChar.setOption(option); myChar.hideLoading(); }, 800); myChar.on('click', function (params) { alert((params.data[0] + ': ').concat(params.data[1])) }); </script> </body> </html>
选择使用canvas或者是svg进行渲染
我们之前提到了使用canvas渲染和svg渲染的不同，而使用Echarts配置何种渲染引擎也是非常简单的，如下所示：
var myChar = echarts.init(document.getElementById('main'), 'light', {renderer: 'svg'});
即我们只需要添加第三个参数 {renderer: 'svg'}这样就使用了svg进行渲染了。
参考文章：Echarts
