前言

Echarts原先是由百度开源的一款数据可视化库，现在由Apache Software Foundation (ASF) 孵化管理。

它是一款文档非常健全的数据可视化库，你只需要按照文档一步步做，就能做出你想要的可视化效果。

那么我们现在开始吧。

 

安装Echarts

在项目中安装：

yarn add echarts

yarn add --dev @types/echarts

在项目中引用：

import echarts from 'echarts’

最后使用echarts即可。

 

Echarts常用需求

• 切换主题：echarts.init(xxx, 'dark')
• WebStorm / VSCode：安装@types/echarts 加强代码提示
• 细节配置：比如如何修改线、提示等等，是在option对象中找到对应的对象，然后再对象中添加配置API即可（术语表）。
• 更新数据：再次setOption即可，echarts会自动找出差异，并更新图表（示例）。在更新中可使用showLoading() / hideLoading()渲染echarts中内置的loading动画。
• 点击事件：使用on即可，可获取到dataIndex和seriesIndex属性（事件文档）。
• 移动端适配：meta:viewport抄淘宝手机版，用JS获取屏幕宽度设置在div上，设定宽高比。echarts自带baseOption + media功能，可针对不同屏幕宽度指定不同配置。

 

如何用Vue或React封装一个Echarts组件

• 可参考已经封装好的代码（Vue封装Echarts组件）
• 也可以自己写一个，总的原则是将echarts逻辑都放在子组件中，通过外部向子组件传值来改变echarts状态，而不是在子组件内部修改数据，这样仅一个组件即可适配绝大部分业务场景。

 

Echarts缺点

• 文档上有的功能就能实现，如果文档没有就实现不了。
• 如果Echarts满足不了你的需求，可以深入一步了解d3.js这个数据可视化库。