探索前端可视化解决方案

进击的松鼠
708 阅读4分钟

前言

前端可视化是前端领域中一个很重要的分支，它扮演着至关重要的角色。它会将那些复杂的，抽象的数据以直观、通俗易懂的方式展现给用户。

像我们平时接触到的数据大屏、数据分析报表、实时数据监控等都是前端可视化的应用，或者说更容易理解的就是我们经常用的导航系统，如高德地图，百度地图等，就是前端可视化在地理信息方面的一个典型应用。

常用图表库

Chart.js

介绍

Chart.js 是一个用于现代网络的简单而灵活的 JavaScript 图表库。

Chart.js 从构建之初到如今的 V4 版本， 随着版本的迭代升级，功能种类也越来越丰富，从过渡动画到新的图标轴类型、混合图表类型再到高级动画、副标题插件、颜色插件等；同时性能也越来越强，如 V4 版本中的摇树优化，只需注册几个必要的插件，JavaScript 包的大小可以减少几十 KB。

值得一提的是，Chart.js 可以将多种图表类型组合成一个 混合图表，并且可通过 自定义插件 高度自定义，以创建注释、缩放或拖放功能等等。兼容目前流行的前端框架，如 React、Vue、Svelte 等。

1.png

Chart.js 官网表示，在针对 JavaScript 应用开发者的许多图表库中，根据 GitHub 关注数（63.6k）和 npm 下载量（每周 2,537,571），Chart.js 目前是最受欢迎的。

Chart.js 是活跃开发的，由社区维护，因此我们可以放心的去使用，历经多年的发展和版本迭代。

5.png

Apache ECharts

介绍

Apache ECharts 是一个基于 JavaScript 的开源可视化图表库。最初由百度团队开源，后来在 2018 年初的时候捐赠给 Apache 基金会，成为 ASF 孵化级项目。

2.png

Apache ECharts 提供开箱即用的 20 多种图表和十几种组件，支持各种图表以及组件的任意组合，并且具有强劲的渲染引擎，可以在 Canvas 和 SVG 之间任意切换，在增量渲染和流加载等技术的加持下，能够实现千万级数据的流畅交互效果。

安装使用

Apache ECharts 官网提供大量的示例图，我们可以直接根据自己的业务需求，结合官方文档使用手册和 API，就可以轻松构建。

以常用的饼状图为例，简单介绍在 Vue3 中如何使用 Echarts。

333.png

在 .vue 文件中引入如下代码。

<template>
  <div ref="chartRef" style="height: 300px"></div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import * as echarts from 'echarts'
  const chartRef = ref(null)

  onMounted(() => {
    var myChart = echarts.init(chartRef.value)
    var option
    option = {
      title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ],
          emphasis: {
            itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      ]
    }
    option && myChart.setOption(option)
  })
</script>

实现效果应该和官方的效果一致。

444.png

AntV

介绍

AntV 是蚂蚁金服开源的一套企业级数据可视化解决方案，可以这么说，使用 AntV 就可以基本解决在工作中遇到的业务问题。

3.png

AntV 提供的功能非常多，不止单单统计图表这一项，而且还包括诸如在处理关系数据方面的 G6 关系图和 X6 流程图、处理地理空间数据的 L7 地图，以及针对移动端专门定制的解决方案。

11.png

所有的这些都是基于一个叫做 G6 图可视化引擎，它简单易用，在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。

通过 G6 这款图可视化引擎提供的能力，我们就可以搭建属于自己的图可视化或者图编辑器应用。

总结

在可视化图表方面，目前在国内使用最多的应该还是 Echarts 和 AntV 这两种解决方案。

Three.js 主要应用的场景在于 3D 绘制和渲染方面，以及复杂的 3D 可视化效果，D3.js 的学习门槛有一定的难度，需要开发者具备一定的 SVG 和 Canvas 底层技术，D3.js 具有高度的定制性和灵活性，从而可以实现复杂的交互逻辑和动画效果。

avatar
文章
阅读
粉丝