实现效果：选择周、月、年份可以切换对应的折线图数据

 直接上代码：

<el-row>
        <el-col :span="24">
          <div id="insuranceChart" :style="{width: '100%', height: '360px'}"></div>
        </el-col>
</el-row>
<div class="timeMoudle flex justifyContent alignItems">
                <div class="mr20" v-for="(item,index) in timeData" :key="index" @click="handleTime(index)" :class="{timeStyle:timeIndex==index}">{{item.title}}</div>
                <el-date-picker class=" ml30" size="small" style="width:250px" @change="changeTime" v-model="timeValue" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                </el-date-picker>
</div>

样式自定义修改： 

.timeMoudle div:hover{
  cursor: pointer;
}
.timeStyle{
  color:#409EFF;
}

自定义假数据，后期换成自己正式的 数据：

let data = {
          year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ],
          mouth:[
            [24, 40, 101, 134, 80, 200, 210, 230, 120, 200, 210, 120,40, 64, 191, 304, 290, 300, 30, 213, 180, 200, 180, 79,25,26,27,28,29,30],
            [4, 30, 101, 134, 90, 230, 210, 290, 180, 200, 200, 160,40, 64, 190, 324, 290, 330, 310, 213, 180, 200, 180, 79,25,26,27,28,29,30]
          ],
          week:[
            [50, 140, 201, 334, 190, 330, 200],
            [150, 240, 301, 134, 290, 130, 300],
          ],
          day:[
            [50],
            [150],
          ]
};

data(){
    return {
      timeData:[
        {title:"今日"},
        {title:"本周"},
        {title:"本月"},
        {title:"全年"}
      ],
      timeIndex:2,//本月
      timeValue:"",
      inquiryChart:null,
      insuranceChart:null,
      insuranceOption:{},//保单支付情况
    }
  },

methods:{
    // 时间切换选择
    handleTime(index){
      // 今日 本周 本月 全年
      this.timeIndex = index;
      console.log(this.timeIndex,"时间");
      if(index==0){
        // 今日
        this.insuranceOption.series[0].data = data.day[0];
        this.insuranceOption.series[1].data = data.day[1];
        this.insuranceOption.xAxis.data= ["2022-4-12"];
        this.insuranceOption.xAxis.name= "日";
        this.insuranceChart.setOption(this.insuranceOption);
      }else if(index==1){
        // 本周
        this.insuranceOption.series[0].data = data.week[0];
        this.insuranceOption.series[1].data = data.week[1];
        this.insuranceOption.xAxis.data= ["周一","周二","周三","周四","周六","周日"];
        this.insuranceOption.xAxis.name= "周";
        this.insuranceChart.setOption(this.insuranceOption);
      }else if(index==2){
        // 本月
        this.drawLine();
      }else {
        // 全年
        this.insuranceOption.series[0].data = data.year[0];
        this.insuranceOption.series[1].data = data.year[1];
        this.insuranceOption.xAxis.data= ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
        this.insuranceOption.xAxis.name= "月";
        this.insuranceChart.setOption(this.insuranceOption);
      }
    },
    // 保单支付情况
    drawLine(){
        this.insuranceChart = this.$echarts.init(document.getElementById("insuranceChart"));
        this.insuranceOption = {
          title: {
            text: '保单支付情况'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: "cross",
            }
          },
          legend: {
            data: ['询价量', '保单支付量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          toolbox: {
            show: true, //是否显示工具栏组件
            orient: "horizontal", //工具栏icon的布局朝向
            itemGap: 20, //item之间的间距
            feature: {
              saveAsImage: {show: true},
            }
          },
          xAxis: {
            name: "日",
            type: 'category',
            boundaryGap: false,
            data: ["1日","2日","3日","4日","5日","6日","7日","8日","9日","10日","11日","12日","13日","14日","15日","16日","17日","18日","19日","20日","21日","22日","23日","24日","25日","26日","27日","28日","29日","30日"],
            axisLabel: {
              formatter:function(item){
               return item;
              }
            },
          },
          yAxis: {
            name: '数值',
            type: "value",
            // min: 0,
            // max: 1000,
            // interval: 100
          },
          series: [
            {
              name: '询价量',
              type: 'line',
              // 是否让线条圆滑显示
              smooth: true,
              data: data.mouth[0]
            },
            {
              name: '保单支付量',
              type: 'line',
              // stack: "Total",
              smooth: true,
              data: data.mouth[1]
            }
          ]
        }
        this.insuranceChart.setOption(this.insuranceOption);
    }
},
mounted(){
    this.insuranceChart = this.$echarts.init(document.getElementById("insuranceChart"));
    window.addEventListener("resize", ()=> {
      this.insuranceChart.resize();
    });
}

有疑问可以留言