动态创建多个echarts图表

效果:

 

<template>
<div class="wrapper">
    <Row v-for="(items, index) in secondeData" :key="index">
        <Col  span="12" v-for="m in items" :key="m">
            <div class="chart" :ref="m.targetName" style="height: 400px;margin: 10px;box-shadow: 0 0 8px"></div>
        </Col>
    </Row>               
</div>
</template>
<script>
var appName='';
//引入Echarts主模块
  let echarts=require('echarts/lib/echarts');
  //引入柱状图
  require('echarts/lib/chart/bar');
  //引入圆饼图
  require('echarts/lib/chart/pie');
  //引入所需组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/legend');

import  'static/js/macarons.js'
export default {

    data(){
        return {
            charts:{},
            echartsData:[],
            appCode:'',
            appName:'',
            monitorAlarmMessage:{
                startAlarmTime:new Date(new Date().getTime()-600000),
                endAlarmTime:new Date()
            }
        }
    },
    computed: {
        // 计算属性的 getter
        secondeData: function () {
            let newData = [], c = this.echartsData.length % 2 == 0, l = c ? this.echartsData.length : this.echartsData.length - 1 ;
            for (let i = 0; i < l; i = i+2) {
                newData.push([this.echartsData[i], this.echartsData[i+1]]);
            }
            if(!c){
                newData.push([this.echartsData[this.echartsData.length - 1]]);
            }
            return newData;
        }
    },
    methods:{
        setData(arrays){
            let _this = this;
            _this.echartsData = arrays;
            _this.$nextTick(function () {
                let newTargets = [];
                for (let index = 0; index < arrays.length; index++) {
                    let item = arrays[index], doms = _this.$refs[item.targetName];
                    newTargets[index] = item.targetName;
                    if(!_this.charts[item.targetName]){
                        console.log("不存在，开始重新绘制div ->" + item.targetName);
                        _this.createChartOne(item.targetName, doms[0]);
                    }
                    _this.chartMonitorTargetUpdate(item.targetName, item); 
                }
                for (const key in _this.charts) {
                    if (newTargets.indexOf(key) < 0) {
                        console.log("删除 ->" + key);
                        delete _this.charts[key];
                    }
                }
            })
        },
        showInfluxDBMonitorAlarmByAppCode(){
            this.$http.post('/influxDBMonitorAnalyze/showInfluxDBMonitorAlarmByAppCode',{//查询请求接口
                appName:this.appName,
                appCode:this.appCode
            }).then((res)=>{
                //alert(JSON.stringify(res.data.data));
                this.setData(res.data.data.filter(function(item){
                    return item != null;
                }));
                //this.echartsDataSize= this.echartsData.length;
                console.log(this.echartsData);
            }).catch((err)=>{
                this.$Modal.error({ title: "请求失败", content: err });
            })
        },
        createChartOne(targetName, ref){
            //this.chartMonitorTarget=echarts.init(this.$refs.chartOne);
            this.charts[targetName] = echarts.init(ref, 'macarons');
            this.charts[targetName].setOption({
                tooltip: {
                    trigger: 'axis'
                },
                grid:{
                    top:100,
                    bottom:40,
                    left:40,
                    right:45
                },
                xAxis:  {
                    name:'时间',               //坐标轴名称
                    type: 'category',
                    nameGap:15,                  //坐标轴名称与轴线之间的距离
                    nameRotate:0,                //坐标轴名字旋转，角度值
                    boundaryGap: true,
                    data: [],
                    axisTick:{          //坐标轴刻度是否朝内，默认朝外。
                        length:5                //坐标轴刻度的长度。
                    },
                    axisLabel: {
                    interval:"auto",
                   rotate:30  
                    } 
                },
                yAxis: {
                    name:'',               //坐标轴名称
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: []
            })
        },
        chartMonitorTargetUpdate(targetName, data){
            this.charts[targetName].setOption({
                title: {
                    text: targetName,
                    textStyle: {
                        fontWeight: 'bolder',              //标题颜色
                        color: '#408829'
                    },
                    subtext: ''
                },
                legend: {
                    left:'center',
                    top:'30',
                    bottom:'auto',
                    orient:'horizontal',
                    data:data.legend.data
                },
                xAxis: {
                    data: data.xaxisData
                },
                series: data.influxDBMonitorAlarm.seriesList
            });
        },
        test(){
            var arrays = [], count = Math.round(Math.random()*10);
            console.log("随机生成个数:" + count);
            for (let index = 0; index < count; index++) {
                //let count = Math.round(Math.random()*10);
                let xaxis = [10];
                for (let k = 0; k < 10; k++) {
                    xaxis[k] = "8:" + Math.round(Math.random()*60);
                }

                let datas = [4];
                for (let j = 0; j < 4; j++) {
                    let is = [10];
                    for (let i = 0; i < 10; i++) {
                        is[i] = Math.round(Math.random()*100);
                    }
                    datas[j] = is;  
                }
                arrays.push({
                    "legend": {
                        "data": ["基线值", "当前值", "基线上浮值", "基线下浮值"]
                    },
                    "targetName": "targetName" + index,
                    "appName": null,
                    "xaxisData": xaxis,
                    "influxDBMonitorAlarm": {
                        "seriesList": [{
                            "name": "基线值",
                            "type": "line",
                            "data": datas[3],
                            "markPoint": {
                                "data": [{
                                    "type": "max",
                                    "name": "最大值"
                                }, {
                                    "type": "min",
                                    "name": "最小值"
                                }]
                            }
                        }, {
                            "name": "当前值",
                            "type": "line",
                            "data": datas[0],
                            "markPoint": {
                                "data": [{
                                    "type": "max",
                                    "name": "最大值"
                                }, {
                                    "type": "min",
                                    "name": "最小值"
                                }]
                            }
                        }, {
                            "name": "基线上浮值",
                            "type": "line",
                            "data": datas[1],
                            "markPoint": {
                                "data": [{
                                    "type": "max",
                                    "name": "最大值"
                                }, {
                                    "type": "min",
                                    "name": "最小值"
                                }]
                            }
                        }, {
                            "name": "基线下浮值",
                            "type": "line",
                            "data": datas[2],
                            "markPoint": {
                                "data": [{
                                    "type": "max",
                                    "name": "最大值"
                                }, {
                                    "type": "min",
                                    "name": "最小值"
                                }]
                            }
                        }]
                    }
                });
            }  
            this.setData(arrays);
        }
    },
    created(){
       
    },
    activated(){
        let _this = this;
        appName=_this.$route.query.appName
        _this.appCode=_this.$route.query.appCode
        _this.appName=_this.$route.query.appName
        _this.showInfluxDBMonitorAlarmByAppCode();
        // _this.test();

        window.setInterval(function(){
            _this.showInfluxDBMonitorAlarmByAppCode();
        }, 5000);
    },destroyed(){
        
    }
    
}
</script>
<style lang="scss" scoped>//-----------------------------------------------------------css样式代码start
//编写样式
.ivu-form-item {
    margin-bottom: 24px;
}
</style>

js:macarons.js

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    };
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }

    var colorPalette = [
        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
    ];


    var theme = {
        color: colorPalette,

        title: {
            textStyle: {
                fontWeight: 'normal',
                color: '#008acd'
            }
        },

        visualMap: {
            itemWidth: 15,
            color: ['#5ab1ef','#e0ffff']
        },

        toolbox: {
            iconStyle: {
                normal: {
                    borderColor: colorPalette[0]
                }
            }
        },

        tooltip: {
            backgroundColor: 'rgba(50,50,50,0.5)',
            axisPointer : {
                type : 'line',
                lineStyle : {
                    color: '#008acd'
                },
                crossStyle: {
                    color: '#008acd'
                },
                shadowStyle : {
                    color: 'rgba(200,200,200,0.2)'
                }
            }
        },

        dataZoom: {
            dataBackgroundColor: '#efefff',
            fillerColor: 'rgba(182,162,222,0.2)',
            handleColor: '#008acd'
        },

        grid: {
            borderColor: '#eee'
        },

        categoryAxis: {
            axisLine: {
                lineStyle: {
                    color: '#008acd'
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#eee']
                }
            }
        },

        valueAxis: {
            axisLine: {
                lineStyle: {
                    color: '#008acd'
                }
            },
            splitArea : {
                show : true,
                areaStyle : {
                    color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#eee']
                }
            }
        },

        timeline : {
            lineStyle : {
                color : '#008acd'
            },
            controlStyle : {
                normal : { color : '#008acd'},
                emphasis : { color : '#008acd'}
            },
            symbol : 'emptyCircle',
            symbolSize : 3
        },

        line: {
            smooth : true,
            symbol: 'emptyCircle',
            symbolSize: 3
        },

        candlestick: {
            itemStyle: {
                normal: {
                    color: '#d87a80',
                    color0: '#2ec7c9',
                    lineStyle: {
                        color: '#d87a80',
                        color0: '#2ec7c9'
                    }
                }
            }
        },

        scatter: {
            symbol: 'circle',
            symbolSize: 4
        },

        map: {
            label: {
                normal: {
                    textStyle: {
                        color: '#d87a80'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#eee',
                    areaColor: '#ddd'
                },
                emphasis: {
                    areaColor: '#fe994e'
                }
            }
        },

        graph: {
            color: colorPalette
        },

        gauge : {
            axisLine: {
                lineStyle: {
                    color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
                    width: 10
                }
            },
            axisTick: {
                splitNumber: 10,
                length :15,
                lineStyle: {
                    color: 'auto'
                }
            },
            splitLine: {
                length :22,
                lineStyle: {
                    color: 'auto'
                }
            },
            pointer : {
                width : 5
            }
        }
    };

    echarts.registerTheme('macarons', theme);
}));