数据可视化Echarts

什么是数据可视化？

• 数据可视化：
  • 为了清晰有效地传递信息，数据可视化使用统计图形、图表、信息图表和其他工具；
  • 可以使用点、线或条，对数字数据进行编码；
  • 数据可视化让我们可以更加清晰的去认识、理解、表达数据；
    

前端可视化工具

• 前端进行数据可视化的工具非常多
  • 常见的框架：Echarts、g2、d3、vis、hightChar等等；
  • g2框架封装：bizcharts（react）viser（vue）；
  • 地理可视化：g2、L7、高德的Loca、菜鸟的 鸟图；
  • 3D可视化：three.js
• 目前使用最多的还是Echarts

认识Echarts

• 官方解释：一个基于JavaScript的开源可视化图表库；
• Echarts的历史：
  • Echarts由百度团队开源；
  • 2018年初，捐赠给Apache基金会，成为ASF（Apache Software Foundation，简称ASF，Apache软件基金会）孵化级项目；
  • 2021年1月26日晚，Apache基金会官方宣布Echarts项目正式毕业，成为Apache顶级项目；
  • 2021年1月28日，Echart 5线上发布会举行；
• Echarts的特点：
  • 丰富的图表类型：提供开箱即可用的20多种图表和十几种组件，并且支持各种图表以及组件的任意组合；
  • 强劲的渲染引擎：Canvas、SVG双引擎一键切换，增强渲染、流加载等技术实现千万级数据的流畅交互；
  • 专业的数据分析：通过数据集管理数据，支持数据过滤、聚类、回归，帮助实现同一份数据的多维度分析；
  • 优雅的可视化设计：默认设计遵循可视化原则，支持响应式设计，并且提供了灵活的配置项方便开发者定制；
  • 健康的开源社区：活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同场景的需求；
  • 友好的无障碍访问：智能生成的图表描述和贴画图案，帮助视力障碍人士了解图表内容，读懂图表背后的故事；

使用Echarts的步骤

• 第一步：可以通过以下方式获取Echarts：
  • 从Apache Echarts官网下载界面获取官方源码包后构建；
  • 在Echarts的Github获取；
  • 通过npm获取Echarts，npm install echarts --save；
  • 通过jsDelivr等CDN引入；
• 第二部：引用echart
  • 根据获取方式引入
    
• 第三步：初始化Echarts对象，并且设置配置进行绘制
  • 通过echarts.init(dom, theme, options)初始化；配置相关功能看echarts文档就好了
  • 通过setOption方法设置绘制的数据；

// 这是在vue3中使用
const divRef = ref<HTMLElement>()

onMounted(() => {
  // 1. 初始化echarts的实例 echarts.init(dom：实例对象, theme: 主题, options：选项)
  const echartsInstance = echarts.init(divRef.value!)
  // 2. 编写配置文件
  const option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  }
  // 3. 设置配置，并且开始绘制
  echartsInstance.setOption(option)
})

canvas vs svg

• 通常在渲染图表时我们会选择SVG或者Canvas进行渲染：

  • 通常情况下，这两种渲染模式是比较相近的，并且是可以相互替换的；
  • 但是在一些场景中，它们的表现和能力有一定的差异；
  • 对于它们之间的取舍，一直是没有一个明确、标准的答案的，也是一个经常被拿到讨论的话题；

• Echarts最初采用的是canvas绘制图表，从Echarts4.x开始，发布了SVG渲染器，提供了另外一种选择。

• 那么它们之间到底如何选择呢？

  • 一般来说，Canvas更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉特效；
  • 但是，在不少场景中，SVG具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊；

canvas vs svg性能测试

• Echarts在不同的设备上，进行了性能的测试：
  • 从图片来看，在这些场景中，SVG渲染器相比Canvas渲染器在移动端的总体表现得更好；
  • 当然，这个实验并非是全面测评，在另一些数据量大或者有图表交互动画的场景中，目前的SVG渲染器的性能还比不过Canvas渲染器；
    

canvas vs svg 的选择

• 那么到底选择哪一个渲染器呢？
• 在软硬件环境好，数据量不大的场景下（例如PC端做商务报表），两种渲染器都可以使用，并不需要太多纠结；
• 在换进差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器；
  • 比如在需要创建很多Echarts实例且浏览器容易崩溃的情况下（可能是因为Canvas数量多导致内存占用超出手机承受能力），可以使用SVG渲染器来进行改善；
  • 如果图表运行在低端安卓机，或者我们在使用一些特定图表如 水球图等，SVG渲染器可能效果更好；
  • 数据量很大、交互多时，可以选择Canvas渲染器；