html 代码
<div class="statistics_item">
<div class="statistics_title cl">
<h5><i class="right_ico trend_ico"></i>走势</h5>
<div class="statistics_search cl">
<div class="quick_search cl" id="statisticsType">
<a href="javascript: void(0);" @click="switchStatisticsType('today');" class="search_item" v-bind:class="{active:statisticsType=='today'}">今日</a>
<a href="javascript: void(0);" @click="switchStatisticsType('yesterday');" class="search_item" v-bind:class="{active:statisticsType=='yesterday'}">昨日</a>
<a href="javascript: void(0);" @click="switchStatisticsType('last_7_days');" class="search_item" v-bind:class="{active:statisticsType=='last_7_days'}">最近七日</a>
<a href="javascript: void(0);" @click="switchStatisticsType('last_30_days');" class="search_item" v-bind:class="{active:statisticsType=='last_30_days'}">最近30日</a>
</div>
<input type="text" id="timeRange" placeholder="yyyy-MM-dd" class="search_time" lay-key="1">
<a href="javascript: void(0);" @click="switchStatisticsType('time_range')" class="search_btn">查询</a>
</div>
</div>
<div id="main" style="width: 930px;;height: 280px;padding: 10px;"></div>
</div>
<div class="statistics_item">
<div class="statistics_title cl">
<h5><i class="right_ico trend_ico"></i>地区访问统计</h5>
</div>
<div id="provinceMain" style="width: 930px;height:280px;padding: 10px;"></div>
</div>
<div class="statistics_item">
<div class="statistics_title cl">
<h5><i class="right_ico trend_ico"></i>终端访问统计</h5>
</div>
<div id="osMain" style="width: 930px;height:280px;padding: 10px;"></div>
</div>
js代码
var vm = new Vue({
el: '#app',
data: {
osStatisticsItems:[],
provinceStatisticsItems:[],
statisticsData:{},
statisticsType:"last_7_days",
activityModelId:""
},
created: function () {
//初始化数据集合
this.loadOsStatistics();
this.loadProvinceStatistics();
this.loadStatistics(this.statisticsType);
},
mounted: function(){
//dom元素渲染完毕
this.$nextTick(() => {
//初始化echart图表
this.initEcharts();
this.initOsEcharts();
this.initProvinceEcharts();
});
},
updated: function () {
},
methods: {
switchStatisticsType: function(type){
vm.statisticsType = type;
this.loadStatistics(type);
},
loadStatistics: function(type){
//加载统计数据
var activityModelId = this.activityModelId;
$.ajax({
type : "post",
url : "/user/activity/statistics",
data:{"activityModelId":activityModelId,"dateType":type},
dataType : "json",
success : function(res) {
if (res.code==200 && res.data) {
vm.statisticsData = res.data;
}
},
error : function(errorMsg) {
}
});
},
initEcharts: function(){
//渲染 echart图表
if(this.statisticsData && this.statisticsData.timeList && this.statisticsData.pvDataList && this.statisticsData.uvDataList){
myChart = echarts.init(document.getElementById('main'));
var data = this.statisticsData;
var option = {
title:{text:'访问走势图'},
tooltip:{trigger:'axis'},
legend:{data:['PV量','UV量']},
grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true},
toolbox:{feature:{saveAsImage:{}}},
xAxis:{type:'category',boundaryGap:false,data:data.timeList},
yAxis:{type:'value'},
series:[
{name:'PV量',type:'line',data:data.pvDataList},
{name:'UV量',type:'line',data:data.uvDataList}
]
};
myChart.hideLoading();
myChart.setOption(option);
}
},
loadOsStatistics: function(){
//获取终端统计数据
var self = this;
$.ajax({
url: "/user/activity/statisticsByOs",
type: "post",
dataType: 'json',
data:{
'activityModelId': this.activityModelId
},
success: function(res) {
if(res.code==200 && res.data.list && res.data.list.length>0){
vm.osStatisticsItems = res.data.list;
}
}
});
},
initOsEcharts: function(){
//渲染 终端统计echart图表
if(this.osStatisticsItems.length>0){
var osChart = echarts.init(document.getElementById('osMain'));
if(this.osStatisticsItems.length>0){
var osArray=[];
var countArray=[];
for (var i=0; i<this.osStatisticsItems.length; i++){
osArray.push(this.osStatisticsItems[i].os);
countArray.push(this.osStatisticsItems[i].count);
}
var option = {
title: {text: '终端访问统计'},
tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},
grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
xAxis: {type: 'value',boundaryGap: [0, 0.01]},
yAxis: {type: 'category',data: osArray},
series: [{type: 'bar',data: countArray,itemStyle: {color : "#0cf"},barWidth: 20}]
};
osChart.hideLoading();
osChart.setOption(option);
}
}
},
loadProvinceStatistics: function(){
//获取地区统计数据
var self = this;
$.ajax({
url: "/user/activity/statisticsByProvince",
type: "post",
dataType: 'json',
data:{
'activityModelId': this.activityModelId
},
success: function(res) {
if(res.code==200 && res.data.list && res.data.list.length>0){
vm.provinceStatisticsItems = res.data.list;
}
}
});
},
initProvinceEcharts: function(){
//渲染 地区统计echart图表
if(this.provinceStatisticsItems.length>0){
var provinceChart = echarts.init(document.getElementById('provinceMain'));
var provinceArray=[];
var countArray=[];
for (var i=0; i<this.provinceStatisticsItems.length; i++){
provinceArray.push(this.provinceStatisticsItems[i].province);
countArray.push(this.provinceStatisticsItems[i].count);
}
var option = {
title: {text: '地区访问统计'},
tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},
grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
xAxis: {type: 'value',boundaryGap: [0, 0.01]},
yAxis: {type: 'category',data: provinceArray},
series: [{type: 'bar',data: countArray,itemStyle: {color : "#0cf"},barWidth: 20}]
};
provinceChart.hideLoading();
provinceChart.setOption(option);
}
}
},
filters: {
},
computed: {
}
});
vue中created与mounted区别
生命周期
生命周期中的浏览器渲染
这里是官方文档对生命周期api的解释,大家可以看看
以下为测试vue部分生命函数
beforeCreate(){
console.log('beforecreate:',document.getElementById('first'))//null
console.log('data:',this.text);//undefined
this.sayHello();//error:not a function
},
created(){
console.log('create:',document.getElementById('first'))//null
console.log('data:',this.text);//this.text
this.sayHello();//this.sayHello()
},
beforeMount(){
console.log('beforeMount:',document.getElementById('first'))//null
console.log('data:',this.text);//this.text
this.sayHello();//this.sayHello()
},
mounted(){
console.log('mounted:',document.getElementById('first'))//<p></p>
console.log('data:',this.text);//this.text
this.sayHello();//this.sayHello()
}
通过上述测试我们可以知道,
生命周期 | 是否获取dom节点 | 是否可以获取data | 是否获取methods |
---|---|---|---|
beforeCreate | 否 | 否 | 否 |
created | 否 | 是 | 是 |
beforeMount | 否 | 是 | 是 |
mounted | 是 | 是 | 是 |