【九月打卡】第13天+学习Echarts解决方案

课程名称：基于Vue3，打造前台+中台通用提效解决方案
课程章节：第14章 数据可视化解决方案
主讲老师：Sunday
课程链接：https://coding.imooc.com/learn/list/542.html

课程内容：

今天学习的内容包括：

• 数据可视化大解析
• 构建基础模块结构
• 累计收益-模块划分
• cotntup-让你的数据动起来
• ECharts使用指南与学习方案

课程收获：

elment-plus样式问题

• 在scss文件中添加样式兼容文件的解决

数据可视化大解析

1. 数据可视化场景
   1. 大屏可视化（单独嵌入）
   2. 数据可视化
2. 数据可视化常见解决方案
   1. 通过图标展示数据
      1. 如何构建图表
         1. echarts
         2. antV
            1. g2
            2. s2
            3. g6(数据关系)
            4. x6（图形编辑引擎）
            5. F2（移动端图形库）
            6. AVA（可视化方案）
      2. hightCharts
3. 不同场景下解决方案是否具备通用性
   1. 如何构建图表

构建基础模块结构

对页面进行组件拆分

• 处理数据模块
  • 拿到累计收益明细模块的数据
    • 父文件拿到数据，通过props传递到子组件
    • 人民币符号为￥=》&yen；

countup-让你的数据动起来

• 安装conutup.js这个包
• 使用
  • 用ref拿到dom
  • 然后通过conutup.jslai 配置，设置动画和时长

ECharts使用指南与学习方案

echarts的基本使用

1. 创建DOM容器，指定大小
2. 导入Echarts模块
3. 利用echart.init(targer),获取到myChart实例
4. 构建options配置对象（echart渲染核心）
5. 利用mChart.setOptions.方法配置options

课程学习截图