可以看到该双折线要实现12个月、近7天两个时间的双折线,其中12个月的双折线图的x轴可以是固定的1-12月,7日的x轴则需要根据接口返回的日期进行渲染
接下来先给出接口返回的数据,便于讲述实现过程
- 按照12个月返回的数据
- 按照7日返回的数据
按钮样式及点击事件
定义一个timeFlag用于标记当天活跃的按钮,按钮样式通过timeFlag进行动态绑定;
点击时传递按钮的id(0:12个月 1:7日),由按钮的id决定当前活跃的按钮及渲染的数据
<template lang="pug">
block content
.data_item(
v-for="(item,index) in timeList"
:class="item.id == timeFlag ? 'active_item':'normal_item'"
@click="handleChange(item.id)") {
{
item.time}}
</template>
<script>
export default{
let timeFlag = ref(0) //默认是0 0代表12个月
let timeList = reactive([{
id: 0,
time: "12个月"
},{
id: 1,
time: "7日"
}])
let handleChange = ( id ) => {
if(id == 0){
timeFlag.value = 0
setOptions(yearData);
}else{
timeFlag.value = 1;
getSevenData();