初遇Echarts之Echarts入门

￡神魔★判官ぃ 2022-11-27 03:24 130阅读 0赞

## 初次使用Echarts ##

首先咱们来说说什么是Echarts，用途是什么——ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

**ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。**

在使用ECharts之前要先安装ECharts，  
可以通过以下几种方式获取ECharts

1.  从 [Apache ECharts (incubating)][Apache ECharts _incubating] 官网下载界面 获取官方源码包后构建，
2.  在 ECharts 的 [GitHub][] 获取
3.  通过 npm 获取 echarts，npm install echarts --save，详见“[在 webpack 中使用 echarts][webpack _ echarts]”
4.  通过 [jsDelivr][] 等 CDN 引入  
    上述方法都可以

接着就是在html中引入ECharts  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlaWNoZW54aWFuc2Vu_size_16_color_FFFFFF_t_70_pic_center]

这样我们就可以制作我们想要的各种图表了，在这我就放上我制作的一个小图表，供大家参考。

在body中

在css中

#main {width: 90%;margin: 0 auto;height: 2.46rem;}

在script中

在代码中也为大家做了详细的批注，现在我将最后的效果图奉上。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlaWNoZW54aWFuc2Vu_size_16_color_FFFFFF_t_70_pic_center 1]

如果有什么问题欢迎大家随时指出。

[Apache ECharts _incubating]: https://echarts.apache.org/zh/download.html
[GitHub]: https://github.com/apache/incubator-echarts/releases
[webpack _ echarts]: https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
[jsDelivr]: https://www.jsdelivr.com/package/npm/echarts
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlaWNoZW54aWFuc2Vu_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/65bcbf6f1c2e447590c272dee72d88fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlaWNoZW54aWFuc2Vu_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/2c0daacdfd1d469198c34309d33d5cb0.png