关于Echarts的一些理解

ECharts，缩写来自Enterprise Charts，一个纯JavaScript图表库。兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。支持你能见到的几乎所有图表类型。

---

Echarts的安装

1.如果你不会webpack/parcel，你可以直接在html引入cdn便可使用。

cdn查询网站链接

2.如果你会wevpack/parcel，你可以直接在项目中安装依赖包。具体步骤如下

yarn add echarts
yarn add --dev @types/echarts（此行作用是能够让代码自动提示，降低编辑难度）（如下图）

代码提示

安装成功后，便可在js文件中引入使用。

---

Echarts换肤

Echarts默认有两款，我姑且称他们为主题。

var myChart = echarts.init(main,参数)

参数中可选‘dark’/‘light’，即可更换。

更换效果如下：

如果你想要更改图表中具体某些元素的样式，可查询官网中的配置项手册

---

Echarts添加数据

Echarts不仅能够为你显示静态的图标，也能够让你的图标动起来。我们想要的效果是：添加一个button，点击时可在图表中新增一组数据。

可以调用loadMoreButton.addEventListener()监听事件，在监听点击中添加如下代码

注意！我们只需要复制修改的属性即可，echarts会自动检索差异的地方并进行修改。

点击前

点击后

---

Echarts动态加载

如上案例，当你点击按钮时，你可以用一个setTimeout函数把他们包起来，可以实现延时增添的效果。

那么问题来了，动态加载过程中，这么干等着未免也太尴尬了点，有什么方法可以解决？Echarts也帮我们准备好了。调用myChart.showLoading()，并在添加结束后设置hideLoading函数即可。

加载动画

注意细节！绝大部分用户看到loading时，会不自觉的狂点按钮，要是你不加以限制的话，会造成数据添加的堆积！我们只需设立一个变量即可

---

Echarts点击事件

Echarts点击事件能够让你的图标更具互动性，Echarts本身也有相关API支持（on）。以下代码为点击可点击的部分时跳转至百度

---

Echarts移动端响应

Echarts能够同时兼容手机端与PC端，这对想要同时做移动端与PC端的人群十分友好

步骤如下：

1.抄一个大佬的mate:viewport（例如淘宝）

2.利用JS获取当前屏幕宽度，同时设置宽高比（代码如下）

宽高比一般为1.2

3.将移动端与PC端共有的数据写入baseOption中，在使用media选择器设置条件

baseOption

当屏幕宽度小于500时，线条颜色变为红色