初探Echarts之美

随着“云时代”的到来，大数据（Big Data）也吸引了越来越多的关注，开发者可以利用网络爬虫将数据抓取到数据库中，再对数据进行智能分析，加以利用产生经济效益。那么问题来了，对于前端开发者来说，该如何直观的将这些数据展示在Web界面呢？答案必然是图表。HTML5赋予了我们强大的Canvas功能，正式基于这样的一种背景，Echarts诞生了，它为我们提供了一种非常不错的大数据可视化解决方案。2018 年 1 月 16 日，百度 EFE团队正式发布了旗下知名开源产品 ECharts 的最新大版本 4.0，新版本在产品的性能、功能、易用性等各个方面进行了全面提升，标志着百度在数据可视化领域又一突破性里程碑的到来，目前Echart在Github上的star已有27k+。

好吧，以上纯属闲话，因为老师说写作文要有“龙头”…

再来个罗老师式开场：少废话，先看东西…

以上便是一个基于Echart图表插件实现的大数据可视化平台界面效果图，怎么样？这样的效果很棒吧？简直就是漂亮的不像实力派，话说转来，这样的方式，使得数据展示非常直观，一目了然。

• 安装/下载：

通过官网下载文件，并引入——

值得注意的是这里Echarts为我们提供了多个版本可选，根据自己的需求自由选择即可，开发环境建议选择源代码版本，该版本包含了常见的警告和错误提示。

通过npm 安装 ECharts
npm install echarts –save

• 使用/实例

通常情况下直接引入下载好的echart.js源文件即可

使用npm安装会将资源存放在node_modules目录下，直接通过var echarts = require('echarts')导入即可，接下来便可以愉快的在项目中使用Echarts啦~~~

第一步：为Echarts准备一个具备大小的DOM容器

<div id="main" style="width: 600px;height:400px;"></div>

PS：当你需要结合Bootstrap栅格系统进行响应式布局的时候，将这个DOM容器的宽度设置为100%，然后放入相应的栅格即可。另外：当页面尺寸发生变化时，可能会发生图表异常的现象。解决方案是在在页面尺寸发生变化时，触发Echarts实例的resize事件重新渲染即可，代码如下：window.onresize = function(){myChart.resize();}

第二步：按照官方文档配置

var myChart = echarts.init(document.getElementById('main'));
         // 显示标题，图例和空的坐标轴
         myChart.setOption({
             title: {
                 text: '异步数据加载示例'
             },
             tooltip: {},
             legend: {
                 data:['销量']
             },
             xAxis: {
                 data: []
             },
             yAxis: {},
             series: [{
                 name: '销量',
                 type: 'bar',
                 data: []
             }]
         });
          
         myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

第三步：数据填充

下面使用人民群众喜闻乐见的jQuery来发起异步请求，拿到自己mock的数据。

$.ajax({
     type : "post",
     async : true,    
     url : "mock/data.json",    //mock数据存储的路径
     data : {},
     dataType : "json",        //返回数据形式为json
     success : function(result) {
         //请求成功时执行该函数内容，result即为服务器返回的json对象
         if (result) {
                for(var i=0;i<result.length;i++){      
                   names.push(result[i].name);    //挨个取出类别并填入类别数组
                }
                for(var i=0;i<result.length;i++){      
                   nums.push(result[i].num);    //挨个取出销量并填入销量数组
                }
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        data: names
                    },
                    series: [{             // 根据名字对应到相应的系列
                        name: '销量',
                        data: nums
                    }]
                });
         } 
    },
    error : function(errorMsg) {       //请求失败时执行该函数
         alert("图表请求数据失败!");
         myChart.hideLoading();
    }
})

最终效果：

通过以上实例我们可以发现，Echarts就是这样的方便使用，当然了，这只是一个简单的demo，Echarts还有更加精彩的地方等待你去发现。

1. 实现原理及性能探讨

好吧，这个东西底层究竟是怎么实现的，看了源码，的确读不懂…但可以明确的是它是使用Canvas来渲染，官方也提供了SVG渲染的方式。浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。

ECharts从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 ECharts v4.0 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 renderer 参数 为 'Canvas' 或 'SVG' 即可指定渲染器，比较方便。说到这儿，我们来探讨一下Canvas和SVG。Canvas是使用JavaScript程序绘图(动态生成)，SVG是使用XML文档描述来绘图。

从这点来看：SVG更适合用来做动态交互，而且SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。同时SVG是基于矢量的，所有它能够很好的处理图形大小的改变。Canvas是基于位图的图像，它不能够改变大小，只能缩放显示；所以说Canvas更适合用来实现类似于Flash能做的事情(当然现在Canvas与Flash相比还有一些不够完善的地方)。

一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 特效。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。根据官方测试得出的结论，我们可以发现，在移动端时，SVG的性能是优于Canvas的，但是在有大数据量和复杂交互的情况下Canvas的优势也十分明显。

当然了，当主要矛盾和次要矛盾并存的时候，该选择什么方法论，还得具体问题具体分析。所以到底该如何选择，这是个哲学问题……