✍️ Tangxt ⏳ 2020-10-11 🏷️ Echarts
16-数据可视化-Echarts 使用指南
★总结
- 用 CRM (抄官网例子、在自己的项目里边运行、修改一些代码,理解其作用)学习大法学习 Echarts 的时候,如果遇到一条路走不通,那就换一条路,走了一条死路,那就想办法走一条活路! -> 排除法
- 我们引入 Echarts:
- 无
webpack/parcel -> 可以CDN引入 echars.min.js
- 有
webpack/parcel -> yarn add echarts、yarn add --dev @types/echarts(加强代码提示,如这个形参叫啥名?当你调用函数的时候,就知道我们该填入什么样的数据了)
- 我们有3种姿势使用 Echarts:
- 图表的样式处理
- 图表的数据更新 ->
setOption
- 对图表的交互 -> 点击事件 ->
on
- 在移动端适配图表
- 常规技巧
meta:viewport -> 抄手淘的,毕竟手淘出了那么多年,对于这个meta的配置,应该就是 GOAT 了吧!
- 用 JS 获取屏幕宽度设置在
div 上 -> max-width:500px
- 设定宽高比
- echarts 提供的功能
baseOption + media -> PC 端展示图表就用 baseOption,移动端就用在media里边所追加的配置
- 最好自己封装 Echarts 组件 -> 因为自己封装的比较好改!
- 什么是数据可视化?
- 用 Echarts 做页面 -> 就是最初级的可视化
- 我们可以深入的 ->
d3.js 值得研究 -> 不过,它的中文资料少得可怜
- 全国提供的数据可视化岗位并不过,比 Angular 还要少!毕竟,我们一般做数据可视化,只是画几个简单的图表罢了!
- 对 Echarts 不熟?