zoukankan      html  css  js  c++  java

  • VUE动态创建多个echarts图表

    效果:

     

    1. <template>
    2. <div class="wrapper">
    3.     <Row v-for="(items, index) in secondeData" :key="index">
    4.         <Col  span="12" v-for="m in items" :key="m">
    5.             <div class="chart" :ref="m.targetName" style="height: 400px;margin: 10px;box-shadow: 0 0 8px"></div>
    6.         </Col>
    7.     </Row>               
    8. </div>
    9. </template>
    10. <script>
    11. var appName='';
    12. //引入Echarts主模块
    13.   let echarts=require('echarts/lib/echarts');
    14.   //引入柱状图
    15.   require('echarts/lib/chart/bar');
    16.   //引入圆饼图
    17.   require('echarts/lib/chart/pie');
    18.   //引入所需组件
    19.   require('echarts/lib/component/tooltip');
    20.   require('echarts/lib/component/legend');
    21.  
    22. import  'static/js/macarons.js'
    23. export default {
    24.  
    25.     data(){
    26.         return {
    27.             charts:{},
    28.             echartsData:[],
    29.             appCode:'',
    30.             appName:'',
    31.             monitorAlarmMessage:{
    32.                 startAlarmTime:new Date(new Date().getTime()-600000),
    33.                 endAlarmTime:new Date()
    34.             }
    35.         }
    36.     },
    37.     computed: {
    38.         // 计算属性的 getter
    39.         secondeData: function () {
    40.             let newData = [], c = this.echartsData.length % 2 == 0, l = c ? this.echartsData.length : this.echartsData.length - 1 ;
    41.             for (let i = 0; i < l; i = i+2) {
    42.                 newData.push([this.echartsData[i], this.echartsData[i+1]]);
    43.             }
    44.             if(!c){
    45.                 newData.push([this.echartsData[this.echartsData.length - 1]]);
    46.             }
    47.             return newData;
    48.         }
    49.     },
    50.     methods:{
    51.         setData(arrays){
    52.             let _this = this;
    53.             _this.echartsData = arrays;
    54.             _this.$nextTick(function () {
    55.                 let newTargets = [];
    56.                 for (let index = 0; index < arrays.length; index++) {
    57.                     let item = arrays[index], doms = _this.$refs[item.targetName];
    58.                     newTargets[index] = item.targetName;
    59.                     if(!_this.charts[item.targetName]){
    60.                         console.log("不存在，开始重新绘制div ->" + item.targetName);
    61.                         _this.createChartOne(item.targetName, doms[0]);
    62.                     }
    63.                     _this.chartMonitorTargetUpdate(item.targetName, item); 
    64.                 }
    65.                 for (const key in _this.charts) {
    66.                     if (newTargets.indexOf(key) < 0) {
    67.                         console.log("删除 ->" + key);
    68.                         delete _this.charts[key];
    69.                     }
    70.                 }
    71.             })
    72.         },
    73.         showInfluxDBMonitorAlarmByAppCode(){
    74.             this.$http.post('/influxDBMonitorAnalyze/showInfluxDBMonitorAlarmByAppCode',{//查询请求接口
    75.                 appName:this.appName,
    76.                 appCode:this.appCode
    77.             }).then((res)=>{
    78.                 //alert(JSON.stringify(res.data.data));
    79.                 this.setData(res.data.data.filter(function(item){
    80.                     return item != null;
    81.                 }));
    82.                 //this.echartsDataSize= this.echartsData.length;
    83.                 console.log(this.echartsData);
    84.             }).catch((err)=>{
    85.                 this.$Modal.error({ title: "请求失败", content: err });
    86.             })
    87.         },
    88.         createChartOne(targetName, ref){
    89.             //this.chartMonitorTarget=echarts.init(this.$refs.chartOne);
    90.             this.charts[targetName] = echarts.init(ref, 'macarons');
    91.             this.charts[targetName].setOption({
    92.                 tooltip: {
    93.                     trigger: 'axis'
    94.                 },
    95.                 grid:{
    96.                     top:100,
    97.                     bottom:40,
    98.                     left:40,
    99.                     right:45
    100.                 },
    101.                 xAxis:  {
    102.                     name:'时间',               //坐标轴名称
    103.                     type: 'category',
    104.                     nameGap:15,                  //坐标轴名称与轴线之间的距离
    105.                     nameRotate:0,                //坐标轴名字旋转，角度值
    106.                     boundaryGap: true,
    107.                     data: [],
    108.                     axisTick:{          //坐标轴刻度是否朝内，默认朝外。
    109.                         length:5                //坐标轴刻度的长度。
    110.                     },
    111.                     axisLabel: {
    112.                     interval:"auto",
    113.                    rotate:30  
    114.                     } 
    115.                 },
    116.                 yAxis: {
    117.                     name:'',               //坐标轴名称
    118.                     type: 'value',
    119.                     axisLabel: {
    120.                         formatter: '{value}'
    121.                     }
    122.                 },
    123.                 series: []
    124.             })
    125.         },
    126.         chartMonitorTargetUpdate(targetName, data){
    127.             this.charts[targetName].setOption({
    128.                 title: {
    129.                     text: targetName,
    130.                     textStyle: {
    131.                         fontWeight: 'bolder',              //标题颜色
    132.                         color: '#408829'
    133.                     },
    134.                     subtext: ''
    135.                 },
    136.                 legend: {
    137.                     left:'center',
    138.                     top:'30',
    139.                     bottom:'auto',
    140.                     orient:'horizontal',
    141.                     data:data.legend.data
    142.                 },
    143.                 xAxis: {
    144.                     data: data.xaxisData
    145.                 },
    146.                 series: data.influxDBMonitorAlarm.seriesList
    147.             });
    148.         },
    149.         test(){
    150.             var arrays = [], count = Math.round(Math.random()*10);
    151.             console.log("随机生成个数:" + count);
    152.             for (let index = 0; index < count; index++) {
    153.                 //let count = Math.round(Math.random()*10);
    154.                 let xaxis = [10];
    155.                 for (let k = 0; k < 10; k++) {
    156.                     xaxis[k] = "8:" + Math.round(Math.random()*60);
    157.                 }
    158.  
    159.                 let datas = [4];
    160.                 for (let j = 0; j < 4; j++) {
    161.                     let is = [10];
    162.                     for (let i = 0; i < 10; i++) {
    163.                         is[i] = Math.round(Math.random()*100);
    164.                     }
    165.                     datas[j] = is;  
    166.                 }
    167.                 arrays.push({
    168.                     "legend": {
    169.                         "data": ["基线值", "当前值", "基线上浮值", "基线下浮值"]
    170.                     },
    171.                     "targetName": "targetName" + index,
    172.                     "appName": null,
    173.                     "xaxisData": xaxis,
    174.                     "influxDBMonitorAlarm": {
    175.                         "seriesList": [{
    176.                             "name": "基线值",
    177.                             "type": "line",
    178.                             "data": datas[3],
    179.                             "markPoint": {
    180.                                 "data": [{
    181.                                     "type": "max",
    182.                                     "name": "最大值"
    183.                                 }, {
    184.                                     "type": "min",
    185.                                     "name": "最小值"
    186.                                 }]
    187.                             }
    188.                         }, {
    189.                             "name": "当前值",
    190.                             "type": "line",
    191.                             "data": datas[0],
    192.                             "markPoint": {
    193.                                 "data": [{
    194.                                     "type": "max",
    195.                                     "name": "最大值"
    196.                                 }, {
    197.                                     "type": "min",
    198.                                     "name": "最小值"
    199.                                 }]
    200.                             }
    201.                         }, {
    202.                             "name": "基线上浮值",
    203.                             "type": "line",
    204.                             "data": datas[1],
    205.                             "markPoint": {
    206.                                 "data": [{
    207.                                     "type": "max",
    208.                                     "name": "最大值"
    209.                                 }, {
    210.                                     "type": "min",
    211.                                     "name": "最小值"
    212.                                 }]
    213.                             }
    214.                         }, {
    215.                             "name": "基线下浮值",
    216.                             "type": "line",
    217.                             "data": datas[2],
    218.                             "markPoint": {
    219.                                 "data": [{
    220.                                     "type": "max",
    221.                                     "name": "最大值"
    222.                                 }, {
    223.                                     "type": "min",
    224.                                     "name": "最小值"
    225.                                 }]
    226.                             }
    227.                         }]
    228.                     }
    229.                 });
    230.             }  
    231.             this.setData(arrays);
    232.         }
    233.     },
    234.     created(){
    235.        
    236.     },
    237.     activated(){
    238.         let _this = this;
    239.         appName=_this.$route.query.appName
    240.         _this.appCode=_this.$route.query.appCode
    241.         _this.appName=_this.$route.query.appName
    242.         _this.showInfluxDBMonitorAlarmByAppCode();
    243.         // _this.test();
    244.  
    245.         window.setInterval(function(){
    246.             _this.showInfluxDBMonitorAlarmByAppCode();
    247.         }, 5000);
    248.     },destroyed(){
    249.         
    250.     }
    251.     
    252. }
    253. </script>
    254. <style lang="scss" scoped>//-----------------------------------------------------------css样式代码start
    255. //编写样式
    256. .ivu-form-item {
    257.     margin-bottom: 24px;
    258. }
    259. </style>

    js:macarons.js

    1. (function (root, factory) {
    2.     if (typeof define === 'function' && define.amd) {
    3.         // AMD. Register as an anonymous module.
    4.         define(['exports', 'echarts'], factory);
    5.     } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
    6.         // CommonJS
    7.         factory(exports, require('echarts'));
    8.     } else {
    9.         // Browser globals
    10.         factory({}, root.echarts);
    11.     }
    12. }(this, function (exports, echarts) {
    13.     var log = function (msg) {
    14.         if (typeof console !== 'undefined') {
    15.             console && console.error && console.error(msg);
    16.         }
    17.     };
    18.     if (!echarts) {
    19.         log('ECharts is not Loaded');
    20.         return;
    21.     }
    22.  
    23.     var colorPalette = [
    24.         '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
    25.         '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
    26.         '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
    27.         '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
    28.     ];
    29.  
    30.  
    31.     var theme = {
    32.         color: colorPalette,
    33.  
    34.         title: {
    35.             textStyle: {
    36.                 fontWeight: 'normal',
    37.                 color: '#008acd'
    38.             }
    39.         },
    40.  
    41.         visualMap: {
    42.             itemWidth: 15,
    43.             color: ['#5ab1ef','#e0ffff']
    44.         },
    45.  
    46.         toolbox: {
    47.             iconStyle: {
    48.                 normal: {
    49.                     borderColor: colorPalette[0]
    50.                 }
    51.             }
    52.         },
    53.  
    54.         tooltip: {
    55.             backgroundColor: 'rgba(50,50,50,0.5)',
    56.             axisPointer : {
    57.                 type : 'line',
    58.                 lineStyle : {
    59.                     color: '#008acd'
    60.                 },
    61.                 crossStyle: {
    62.                     color: '#008acd'
    63.                 },
    64.                 shadowStyle : {
    65.                     color: 'rgba(200,200,200,0.2)'
    66.                 }
    67.             }
    68.         },
    69.  
    70.         dataZoom: {
    71.             dataBackgroundColor: '#efefff',
    72.             fillerColor: 'rgba(182,162,222,0.2)',
    73.             handleColor: '#008acd'
    74.         },
    75.  
    76.         grid: {
    77.             borderColor: '#eee'
    78.         },
    79.  
    80.         categoryAxis: {
    81.             axisLine: {
    82.                 lineStyle: {
    83.                     color: '#008acd'
    84.                 }
    85.             },
    86.             splitLine: {
    87.                 lineStyle: {
    88.                     color: ['#eee']
    89.                 }
    90.             }
    91.         },
    92.  
    93.         valueAxis: {
    94.             axisLine: {
    95.                 lineStyle: {
    96.                     color: '#008acd'
    97.                 }
    98.             },
    99.             splitArea : {
    100.                 show : true,
    101.                 areaStyle : {
    102.                     color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
    103.                 }
    104.             },
    105.             splitLine: {
    106.                 lineStyle: {
    107.                     color: ['#eee']
    108.                 }
    109.             }
    110.         },
    111.  
    112.         timeline : {
    113.             lineStyle : {
    114.                 color : '#008acd'
    115.             },
    116.             controlStyle : {
    117.                 normal : { color : '#008acd'},
    118.                 emphasis : { color : '#008acd'}
    119.             },
    120.             symbol : 'emptyCircle',
    121.             symbolSize : 3
    122.         },
    123.  
    124.         line: {
    125.             smooth : true,
    126.             symbol: 'emptyCircle',
    127.             symbolSize: 3
    128.         },
    129.  
    130.         candlestick: {
    131.             itemStyle: {
    132.                 normal: {
    133.                     color: '#d87a80',
    134.                     color0: '#2ec7c9',
    135.                     lineStyle: {
    136.                         color: '#d87a80',
    137.                         color0: '#2ec7c9'
    138.                     }
    139.                 }
    140.             }
    141.         },
    142.  
    143.         scatter: {
    144.             symbol: 'circle',
    145.             symbolSize: 4
    146.         },
    147.  
    148.         map: {
    149.             label: {
    150.                 normal: {
    151.                     textStyle: {
    152.                         color: '#d87a80'
    153.                     }
    154.                 }
    155.             },
    156.             itemStyle: {
    157.                 normal: {
    158.                     borderColor: '#eee',
    159.                     areaColor: '#ddd'
    160.                 },
    161.                 emphasis: {
    162.                     areaColor: '#fe994e'
    163.                 }
    164.             }
    165.         },
    166.  
    167.         graph: {
    168.             color: colorPalette
    169.         },
    170.  
    171.         gauge : {
    172.             axisLine: {
    173.                 lineStyle: {
    174.                     color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
    175.                     width: 10
    176.                 }
    177.             },
    178.             axisTick: {
    179.                 splitNumber: 10,
    180.                 length :15,
    181.                 lineStyle: {
    182.                     color: 'auto'
    183.                 }
    184.             },
    185.             splitLine: {
    186.                 length :22,
    187.                 lineStyle: {
    188.                     color: 'auto'
    189.                 }
    190.             },
    191.             pointer : {
    192.                 width : 5
    193.             }
    194.         }
    195.     };
    196.  
    197.     echarts.registerTheme('macarons', theme);
    198. }));
  • 相关阅读:
    每日一练leetcode
    每日一练leetcode
    每日一练leetcode
    springboot搭建过程
    每日一练leetcode
    每日一练leetcode
    每日一练leetcode
    安装 Redis 迎客
    windows系统上面如何后台执行程序 迎客
    jira的详细安装和破解 迎客
  • 原文地址：https://www.cnblogs.com/owenzh/p/13213248.html
Copyright © 2011-2022 走看看