vue中使用echarts渲染图表（html引入vue.js和echarts.js环境）

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	是	是	是