基于vue+exharts的双折线图

可以看到该双折线要实现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();
      }