vue(5)-echarts2-动态定义

回忆Vue生命周期（此处很有必要）

Vue实例有一个完整的生命周期，从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

• new Vue()：创建实例
• Init Events & LifeCycle：初始化事件与生命周期
• beforeCreated：创建实例之前执行的钩子
• created：实例创建完成之后执行的钩子，挂载阶段还没开始，$el 属性目前不可见
• beforeMounted：将编译完成的Html挂载到虚拟dom时触发的钩子
• mounted：挂载完成后执行的钩子，一般数据初始化
• beforeUpdate：更新之前的钩子，实时监控数据随之更新dom
• update：更新之后的钩子
• beforeDestory：实例销毁之前的钩子
• destoryed：实例销毁完成之后执行的钩子

钩子函数都在啥时间触发是不是更清晰了！

定义echart

先初始化数组对象，用于存放charts。

var vue = new Vue({
    el:'#app',
    data:{
        charts:new Array(),
    },

mounted从后台请求数据，然后初始化charts个数以及数据

mounted:function(){
    this.initChart();
},

挂载数据

initChart:function(){
    this.ChartList = 从后台取到的response数据;  
            this.$nextTick(function(){
                for(var i = 0; i < this.ChartList .length; i++){
                    var item = {}
                    item.id = this.ChartList [i].name_en;
                    item.title = this.ChartList [i].name;
                    item.xAxis = []; //初始化x轴
                    item.series1= [];//初始化一组数据
                    item.series2= [];//初始化第二组数据
                    item.chart = echarts.init(document.getElementById(this.ChartList [i].name_en)); //挂载chart至虚拟dom
                    this.charts[i] = item;
                }
                this.timer = setInterval(this.getChartData, 1000);//实时获取chart的变化数据
            })

nextTick

敲黑板啦，这里用到了nextTick，因为Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新，
所以ajax获取完后台数据后，v-for='item in ChartList '并不会立即生效，这里在修改数据之后使用 nextTick，才能获取更新后的 DOM的数据，比如document.getElementById(this.ChartList [i].name_en))中获取id。

getChartData

用来个体this.charts动态设置setOption。

for(var m = 0; m < this.charts.length;m++){
                option = this.createChartOption(this.charts[m].title, this.charts[m].xAxis , this.charts[m].series1, this.charts[m].series2)
                this.charts[m].chart.setOption(option);
            }

addChartData

var chartData=[
                         [
                             0,        // 系列索引
                             series1, // 新增数据
                             false,     // 新增数据是否从队列头部插入
                             false,     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头  
                         ],
                         [
                             1,        // 系列索引
                             series2, // 新增数据
                             false,    // 新增数据是否从队列头部插入
                             false    // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
                         ]
                     ];
                    for(var m = 0; m < this.charts.length;m++){
                        if(id == this.charts[m].id){
                            this.charts[m].chart.addData(chartData);
                        }
                    }

测试截图

一次显示五个或三个echart，或动态改变数据啥的，随你开心啦！