vue3版本
clone项目后npm run preview即可
npm i vue-year-density-plus
import vueYearDensityPlus from "vue-year-density-plus";
import "vue-year-density-plus/index.css";
app.use(vueYearDensityPlus);
-
--default-bg：#ebedf0(黑夜模式:#c5c8cd);-->小方块默认背景色 -
--act-1-bg：#9be9a8(黑夜模式:#89a78e);-->1级小方块背景色 -
--act-2-bg：#40c463(黑夜模式:#567d60);-->2级小方块背景色 -
--act-3-bg：#30a14e(黑夜模式:#3f734c);-->3级小方块背景色 -
--act-4-bg：#216e39(黑夜模式:#298747);-->4级小方块背景色 -
--border-color：rgba(27, 31, 35, 0.06)(黑夜模式:rgba(15, 28, 41, 0.06));-->小方块边框颜色 -
--more-bg：#303133(黑夜模式:#E5EAF3);-->浮窗背景色 -
--more-color：#fff(黑夜模式:#141414);-->浮窗默认字体颜色 -
--font-color：rgb(31, 35, 40)(黑夜模式:rgb(241, 243, 245));-->组件默认字体颜色
-
i18n：开启国际化-->Boolean;非必传;默认false -
firstDay：周首日，只能是1-7-->Number;非必传;默认7 -
showTime：展示时间，可以是年也可以是某一天（必须是-间隔）-->String;非必传;默认null -
data：展示数据，键值名必须是YYYY-DD-MM格式-->Object;非必传;默认*{}*
例如：{"2024-03-21":5}
-
@getData：当showTime改变时，向父级索要（更新data即可）指定日期范围内的数据-->第一个参数返回开始日期，第二个参数返回结束日期 -
@dayClick：点击某一天的格子-->第一个参数返回选中天的详情数据
-
default：替换默认展示的浮窗内容
date:返回当前展示天的详细信息（与dayClick相同）
-
tip：替换默认左下角的提示信息
自定义右键菜单 | 可拖拽菜单 | echarts组件 | 基于el-menu的菜单组件 | 面包屑组件 | 滑动拼图 | 工作日历 | 多页签组件 | wangEditor | 年密度组件