html中使用vue组件中的watch和axios

水深无声 2023-07-13 10:40 3阅读 0赞

### 1. **data** ###

*  在html中最外层（和vue组件一层）定义的变量（如：dateSel），在**vue**中的**data**里直接取就可以

### 2. 方法 ###

*  在**axios**请求得到结果后，使用data中的数据时，取值用**this.app**，先**this**这个**vue**组件

this.app.piePushedData = res.data
    this.app.piePushedWatch = this.app.piePushedWatch + 1;

*  两个完整方法

getPushedPie(){ 
      // 基于准备好的dom，初始化echarts实例
    
       var myChart = echarts.init(document.getElementById('pushed'));
    
       var option = { // 指定图表的配置项和数据
           color: this.pieColors,
           title: { 
               text: '已推送占比',
               left: 'center'
           },
           legend: { 
               orient: 'vertical',
               left: 'left',
               data: ['已推送','未推送']
           },
           tooltip: { 
               trigger: 'item',
               formatter: '{a} <br/>{b} : {c} ({d}%)'
           },
           series: [
               { 
                   name: '知识使用占比',
                   type: 'pie',
                   radius: '55%',
                   center: ['50%', '60%'],
                   data: [
                       { value: 10, name: '已推送'},
                       { value: 10, name: '未推送'}
                   ],
                   emphasis: { 
                       itemStyle: { 
                           shadowBlur: 10,
                           shadowOffsetX: 0,
                           shadowColor: 'rgba(0, 0, 0, 0.5)'
                       }
                   }
               }
           ]
       };
    
       if (this.piePushedData !== "") { 
           option.series[0].data[0].value = this.piePushedData.value[0];
           option.series[0].data[1].value = this.piePushedData.value[1];
       }
    
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
    },
    
    
    
    
    getPushedPieData(){ 
        var params = { }
        this.initParams(params);
        //因为饼图不随 查询条件中 已推送，已采纳变化，所以写死pushed
        params.useSituation = "pushed";
        axios.post('/api/knowledgeStatistics/useSituationRate', params)
            .then(function (res) { 
                console.log(res.data)
                this.app.piePushedData = res.data
                this.app.piePushedWatch = this.app.piePushedWatch + 1;
                /*option.series[0].data[0].value = res.data.value[0] option.series[0].data[1].value = res.data.value[1]*/
            })
            .catch(function (error) { 
                console.log(error);
            });
    }

### 3. watch ###

*  为了确保**axios**请求得到结果后，再进行赋值操作。故使用**watch**监听。只要**piePushedWatch**值改变，就执行**getPushedPie**方法

watch : { 
        piePushedWatch: 'getPushedPie'
    },