好看的网页千篇一律，有趣的代码万里挑一。
本篇关键字：ECharts、代码块、核心文件

今天给大家强烈推荐一个库，Apache ECharts一个基于 JavaScript 的开源可视化图表库，就是ECharts——发音：“一掐丝”，哈哈这个“一掐丝”十分有趣、好用，一起来看看吧！

到官网去，快速入门

echarts官网首页

按照说明，引入 Apache ECharts

引入

基本上是四个步骤：

一、制作代码块

自制代码块

自制一个代码块，用起来很方便：
点击左下角的设置，弹出菜单中点击用户代码片段

弹出菜单 选择类型 制作代码块 自制代码块“vv2”

哪里需要就在哪里使用vv2

回到一掐丝官网，示例中有大量代码，可供使用

挑选一个自己喜欢的示例，或者你需要的示例。

示例

这里的农历日历图，比较有趣，可以用来做二十四节气，统计降雨量，还可以用来统计最新疫情防控数据，就选这个吧。

随便选一个

点进去之后，默认代码编辑，你可以在这里编辑代码

选择完整代码

我们直接选择完整代码，从import下面的代码开始复制，一直拉到最底下，每个符号都要齐全哦！

复制完整代码 放入生命周期函数mounted中

二、导入

在全局App.vue中导入，你想在哪个界面使用就在哪个文件中导入：

import apple from './components/apple.vue'

导入

main.js是最重要、最核心文件
App.vue中放整合的组件
components文件夹中放自制的组件

核心文件、文件夹

三、注册

export default 意为默认导出/默认输出，在这里注册
把刚刚定义好的组件名字添加进去即可，建议组件名和文件名一致，方便查找和使用。

注册

四、使用

前面忙乎半天，终于可以使用了
在哪里用呢？定义一个容器div并命名，

使用 运行

页面打开了，和示例一摸一样，鼠标移入后显示当天降雨量。说明我们的操作，成功了！撒花★,°:.☆(￣▽￣)/$:.°★ 。

最终的样子

但糖糖在这里遇到一个问题：
引用的日历为2017年的，显然现在已经是2021年12月了，需要更新数据的。一般情况下，数据应该是和后端拿的，会自动更新。现在不依赖后端如何更新为2021年12月？

糖糖出题：疫情防控数据日历

现在我们不依赖后端，做一个2021年12月农历日历，当鼠标移入后显示所在地当日的疫情防控数据，动手试试吧？

欢迎留言