vue折线趋势图（1）年份数据接入

1. 引入vant, 引用并且注册tab组件

import { Tab, Tabs } from "vant";
export default {
     components: {
         [Tab.name]: Tab,
         [Tabs.name]: Tabs,
      },
}

2.设置tab相关属性

       <van-tabs
            v-model="active"
            color="#2F7DCD" 
            title-active-color="#2F7DCD"  
            line-width="88" 
            sticky          
            swipeable>         

       <van-tab v-for="(yitem, kindex) in years" :key="kindex" :title="yitem + '年'">   

         </van-tab> 
</van-tabs>

3.设置显示第几个tab

    data() {    
         return {          
              active: 0,      
              years:[2021,2020,2019]
        }; 
       },

界面效果

请求接口

查看接口返回数据格式

页面加载完执行方法

    mounted() {  
      //全部子组件加载完成后，本页面加载完成后 执行    
       this.getYear(); 
   }

请求接口并解析绑定数据

  methods: {   
     //获取年份
        getYear() {
            request({
                url: "/commonQueryController/commonQuery", 
                method: "GET",
                params: { query_key: 2 }
            }).then(res => {
                if (res.statusCode == 200 && res.result.length !== 0) {
                    let reres = res.result;
                    reres.forEach(value => {
                        this.years.push(parseInt(value.TJ_ND));
                    });
                  console.log("年份"+reres[0].TJ_ND);
                }
            });
        }
    },  

完成