需要
背景：通过echart图表加以日期选择器，对用户数据进行动静切换展现，并在日期选择器中标识那天有数据和用户是否查看。
技术选型
采纳element ui 2.14.1版本，次要通过picker Options 新增 cellClassName 进行实现。
代码
HTML
<el-date-picker prefix-icon="el-icon-date" :picker-options="pickerOptions" v-model="timer" :clearable="false" "> </el-date-picker>element ui 日期选择器
CSS
.circle::after { position: absolute; content: ''; right: 2px; top: 4px; width: 5px; height: 5px; border-radius: 50%; background-color: red; } .background span { background-color: #C6CDEB; border-radius: 50%; color: #000; }标识以后那些是有数据和用户是否查看数据的款式
JS
pickerOptions: { cellClassName: (time) => { for (let i = 0; i < this.arr.length; i++) { if (this.arr[i].time.includes(this.getLocalTime(time.getTime()))) { return `red ${this.flag == this.arr[i].fy ? 'green':""}` } } } },arr 为后盾传过来的数组 ，通过time工夫判断是否蕴含与否，来显示当天是否有数据，通过 flag 字段和后盾数据进行匹配，判断用户是否查看当天数据，提醒标签的是否暗藏。
后盾数据结构
arr: [{ fy: true, time: "2021-01-02" }, { fy: false, time: "2021-01-03" }, { fy: true, time: "2021-01-07" }]fy： 判断用户点击查看数据 time: 数据具体日期
demo 截图
紫色背景代表有数据的日期，带红色圆点代表有数据然而用户还未查看。