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(){
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);
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;
})
.catch(function (error) {
console.log(error);
});
}
3. watch
- 为了确保axios请求得到结果后,再进行赋值操作。故使用watch监听。只要piePushedWatch值改变,就执行getPushedPie方法
watch : {
piePushedWatch: 'getPushedPie'
},