初探ECharts之美

·  阅读 1202

随着“云时代”的到来,大数据(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>
复制代码

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

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还有更加精彩的地方等待你去发现。

  • 实现原理及性能探讨

好吧,这个东西底层究竟是怎么实现的,看了源码,的确读不懂…但可以明确的是它是使用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的优势也十分明显。

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改