https://github.com/apache/echarts

  • echarts快速上手
  • echarts常见图表
  • echarts综合案例

https://about.gitlab.com/blog/2019/09/30/why-we-chose-echarts/

echarts全局样式

  1. import 'echarts/lib/chart/line';
  2. import 'echarts/lib/chart/graph';
  3. import 'echarts/lib/chart/bar';
  4. import 'echarts/lib/chart/scatter';
  5. import 'echarts/lib/chart/heatmap';
  6. import 'echarts/lib/chart/sankey';
  7. import 'echarts/lib/component/legend';
  8. import 'echarts/lib/component/tooltip';
  9. import 'echarts/lib/component/markArea';

Echarts 释放内存

  • 不要把 echart 实例赋值在this上，this对象一直存在不会被回收
  • 新版本 echarts 不支持对一个 dom 多次创建实例
  1. 定时1个小时之后.dispose 一下。然后重新init 和。setOption;
  2.     定期调用dispose就可以
  3.     dispose了，图形再重构嘛
  4.     用 clear ，我试过可以

析构掉生成的echarts对象

  • 析构是: 把对象申请的资源释放掉
  1.  // dom 不存在时不画
  2. if (!this.$refs.barchart) {
  3.   return
  4. }
  6. // 不要重复初始化
  7. let Chart = echarts.getInstanceByDom(this.$refs.barchart)
  8. if (!Chart) {
  9.    Chart = echarts.init(this.$refs.barchart, 'light')
  10. }
  12. // 页面销毁前，释放 echarts 对象
  13. beforeDestroy () {
  14.   let dcharts = echarts.getInstanceByDom(this.$refs.barchart)
  15.   if (dcharts) {
  16.     echarts.dispose(dcharts)
  17.   }
  18. }
  20. // 发现官网实例上有once hook 比destroy 要好一些，hook:beforeDestroy
  21. let Chart = echarts.getInstanceByDom(this.$refs.barchart)
  22. if (!Chart) {
  23.   Chart = echarts.init(this.$refs.barchart, 'light')
  24.   this.$once('hook:beforeDestroy', function () {
  25.     echarts.dispose(Chart)
  26.   })
  27. }

可视化规范

  • 不要去追求酷炫，选择正确的图表
    • 走向用折线图
  • 视觉传达，数据分析
    • 文字不如表格
    • 表格不如故事 图表
    • 故事不如场景
  • 数据可视化的本质就是：讲故事
    • 让故事变得很有趣
    • 有图表组成的故事，故事围绕数据来讲
    • 有开始，有中间的过程，有结束

字符云 wordcloud2.js

dataset

  • 如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset

echarts性能优化

绘制canvas卡顿，transform动画不流畅，页面假死，可选方案
关闭动画

type为line时可选择sampling
可选择 dataZoom

appendData

echartsInstance.appendData
此接口用于，在大数据量（百万以上）的渲染场景，分片加载数据和增量渲染。
在大数据量的场景下（例如地理数的打点），
就算数据使用二进制格式，也会有几十或上百兆，在互联网环境下，往往需要分片加载。
appendData 接口提供了分片加载后增量渲染的能力，渲染新加入的数据块时不会清除原有已经渲染的部分

分片加载

Echarts4.0+对海量级数据（50w+）折线图渲染，并且保持zoom缩放的流畅性
https://www.echartsjs.com/zh/api.html#echartsInstance.appendData

增量渲染