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. }));
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/owenzh/p/13213248.html