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

1. data

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

var date = new Date();
date.setTime(date.getTime())
var dateTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
var dateSel = [];
dateSel.push(dateTime);
dateSel.push(dateTime);

var app = new Vue({
	el: "#app",
	components: {
	
	},

    data: {
		formInline: {
	        time: dateSel,
	        useSituation: 'pushed',
	        moduleName: ''
        },
        piePushedWatch: 0,
        piePushedData: ''
	}

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'
},