文章介绍了如何使用npm安装图表库，以ECharts为例，详细阐述了从初始化图表、准备DOM节点、实例化到设置选项完成渲染的过程。特别指出，初始化应在Vue的mounted钩子中进行，且当响应式数据变化时，图表不会自动更新，需要额外处理。模板利用可选链可以解决这个问题，当数据变化时，模板会重新渲染。
2D图表
图表通用实现流程
1. 以npm方法把三方图表库安装到本地项目中
2. 看官方的DEMO样例来实现一个简单的图表渲染
1. 引入echarts
2. 准备一个渲染的节点（宽高可用的dom节点）
3. 使用init进行图表的实例化
4. 按照业务的需求准备图表参数（使用后端数据替换掉静态数据）
5. 调用图表的setOption方法传入参数完成图表的渲染
重点: 初始化操作都必须放到mounted钩子中去做
小坑：
图表的渲染函数写到了mounted钩子里面 所以响应式数据哪怕已经发生变化了
但是图表只会在首次渲染的时候去读数据，这个时候读到是什么就是什么，并不会随着
数据的变化而重新渲染
模版之所以可以用可选链解决问题 新数据返回之后 再次渲染
模版本身会和响应式数据发生关联 一旦依赖的响应式数据发生变化
整块模版会再次去读取数据使用新数据再次渲染
扫一扫
3929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
