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. }
  5. // 不要重复初始化
  6. let Chart = echarts.getInstanceByDom(this.$refs.barchart)
  7. if (!Chart) {
  8. Chart = echarts.init(this.$refs.barchart, 'light')
  9. }
  10. // 页面销毁前,释放 echarts 对象
  11. beforeDestroy () {
  12. let dcharts = echarts.getInstanceByDom(this.$refs.barchart)
  13. if (dcharts) {
  14. echarts.dispose(dcharts)
  15. }
  16. }
  17. // 发现官网实例上有once hook 比destroy 要好一些,hook:beforeDestroy
  18. let Chart = echarts.getInstanceByDom(this.$refs.barchart)
  19. if (!Chart) {
  20. Chart = echarts.init(this.$refs.barchart, 'light')
  21. this.$once('hook:beforeDestroy', function () {
  22. echarts.dispose(Chart)
  23. })
  24. }

可视化规范

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

字符云 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

增量渲染