二维图表玩转组件化

1. 二维图表玩转组件化姚向阳小米高级软件工程师

2. • Content Title 1

3. 自我介绍小米： IDE/工具链方向奇虎 360： Qmap， QCharts 明源云：明源云客、工作流姚向阳百度：百度移动首页、阿拉丁

4. • 1. 背景 • 2. 解决样式复杂 • 3. 实现组件化 • 4. 适配Vue、React问题 • 5. 不足、后续未来

5. 背景 “ 可视化积累，满足部分个性化需求

6.

7. Echarts “ 优秀，文档复杂，二次开发困难

8. 耗时需求 “ 修改图表样式

9. 如何解决 Api配置多，文档多、样式设置复杂图形业务关系、render，mvvm，spritejs

10.

11. 解决样式思路

12. 基本用法

13. 属性归纳 “ 点、面、线、文本

14. 属性归纳

15. 面、线、文本线面文本 strokeColor strokeColor bgcolor lineDash fillColor fillColor lineCap lineWidth fontSize lineJoin anchor fontFamily strokeColor opacity fontWeight lineWidth translate anchor opacity display padding translate opacity display translate display https://spritejs.org/#/

16. 回调函数

17. 全局样式

18. 如何实现组件化

19. 数据驱动 Data Visuals Dataset change Plugins

20. 数据二维表 Rows: product Cols: year

21. Dataset

22. “ 为什么可以数据驱动

23. “ 因为Dataset能够描述图表所有状态

24. 渲染显示 Col Row Row Cell

25. 状态响应

26. Cell.js

27. 数据驱动

28. 数据与事件

29. 数据驱动 Data Line,Pie,Area… Visuals Dataset Plugins Axis,Tooltip,Legend… change

30. “ 可以开心的写码了

31. 组件-JSX

32. 组件-流程 update

33. 适配

34. 属性，样式

35. 适配 “ 我只负责透传，其它啥也没干

36. 适配

37.

38. 未来、展望 “ 完善、优化

39. • Content Title 1

40.