Apache ECharts 一个基于 JavaScript 的
好看的网页千篇一律,有趣的代码万里挑一。
本篇关键字: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月农历日历,当鼠标移入后显示所在地当日的疫情防控数据,动手试试吧?