基于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();
      }
    }
}
</script>

12个月和7日的主要不同在数据方面，图表的样式及特性是完全相同的，下面先给出通用的图表渲染方法

export default{
set up (){
	let chart = null;
	let onResize = () => {
      chart.resize();
    };
    
	let initChart = () => {
      chart = echarts.init(document.getElementById("exchange_line"));
      window.addEventListener("resize", onResize);
      setOptions(XXX); //XXX代表需要图表渲染的数据
    }
    
    let setOptions = ( chartData ) => {
      let option = {
        legend: {
		  ...
          data: chartData.legends //图例
        },
        xAxis: {
          type: 'category',
		  ...
          data: chartData.timeList, //x轴的时间
        },
        yAxis: {
          type: 'value',
          ...
        },
        //关于series其实有更规范的写法，考虑到这里只有两类就不另外用数组遍历得到series
        series: [
          {
            name:chartData.legends[0],
            type: 'line',
           	...
            data: chartData.numList[0],
          },
          {
            name:chartData.legends[1],
            type: 'line',
            ...
            data: chartData.numList[1],
          },
        ],
      }
      chart.setOption(option);
    }
    
    onMounted(() => {
      initChart();
    });

    onUnmounted(() => {
      chart && chart.dispose();
      window.removeEventListener("resize",onResize)
    });
  }
}

下面就是获取12个月的数据然后把它转换为对应的格式渲染出来

export default{
	set up(){
	  let yearData = {
	      numList: [[],[]],
	      timeList: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
	      legends: []
    }
    
    //这里传入的data是接口返回的原始数据
      let getYearData = ( data ) => {
	      let numList = [[],[]]
	      let legends = []
	      data.map((item,index)=>{
	        legends.push(item.dataType)
	        item.count.map(( value )=>{
	          numList[index].push( value.total )
	        })
	      })
	      return Object.assign(yearData,
	          {
	            numList,
	            legends
	          })
    	}
   }
}

利用getYearData函数就可以得到用于图表渲染的12个月的数据，在需要渲染12个月的数据的地方运行setOptions（getYearData（））就可以了

7日的数据也是用类似的方法处理

set up(){
	 let sevenDayData = {
	 	  numList: [[],[]],
	      timeList: [],
	      legends: []
	 }

//参数data是接口的原始数据
	 let getSevenData = ( data ) => {
        let numList = [[],[]]
        let timeList = []
        let legends = []
        res.map((item,index)=>{
          legends.push(item.dataType)
          item.count.map(( value )=>{
            numList[index].push( value.total )
            //缺少这个判断会将两条折线的时间都保存，实际上这两条折线的时间是相同的，只需要保存一次就够了
            if(!timeList.includes(value.date)){
              timeList.push(value.date)
            }
          })
        })
        return Object.assign(sevenDayData,
            {
              numList,
              timeList,
              legends
            })
        }
    }
}

具体渲染方式与12个月的相同，不再赘述