vue

✍️ 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：
  • JS
  • Vue
  • React
• 图表的样式处理
  • 修改主题、配置
• 图表的数据更新 -> setOption
• 对图表的交互 -> 点击事件 -> on
• 在移动端适配图表
  • 常规技巧
    • meta:viewport -> 抄手淘的，毕竟手淘出了那么多年，对于这个meta的配置，应该就是 GOAT 了吧！
    • 用 JS 获取屏幕宽度设置在 div 上 -> max-width:500px
    • 设定宽高比
  • echarts 提供的功能
    • baseOption + media -> PC 端展示图表就用 baseOption，移动端就用在media里边所追加的配置
• 最好自己封装 Echarts 组件 -> 因为自己封装的比较好改！
  • 别人开源的封装：
    • Vue 封装、React 封装
• 什么是数据可视化？
  • 用 Echarts 做页面 -> 就是最初级的可视化
  • 我们可以深入的 -> d3.js 值得研究 -> 不过，它的中文资料少得可怜
  • 全国提供的数据可视化岗位并不过，比 Angular 还要少！毕竟，我们一般做数据可视化，只是画几个简单的图表罢了！
• 对 Echarts 不熟？
  • 平时多用，尤其在做 PPT 的时候！