ECharts图表-图表自适应问题

 

当在浏览器打开拖动浏览器，页面图表如何自适应页面宽高；

vue项目中；

1 data () {
2     return {
3         baStatisticsHistoricalAlarmEquip: null,
4     };
5 },

 

图表

  1 statisticsHistorical () {
  2             // 历史报警设备统计
  3             this.baStatisticsHistoricalAlarmEquip = this.$echart.init(
  4                 document.getElementById('baStatisticsHistoricalAlarmEquipId')
  5             );
  6             this.baStatisticsHistoricalAlarmEquip.setOption({
  7                 title: {},
  8                 tooltip: {
  9                     trigger: 'axis'
 10                 },
 11                 legend: {
 12                     align: 'left',
 13                     top: '4%',
 14                     right: '3%',
 15                     data: [
 16                         {
 17                             name: this.$t('overAll.echarts.label.airAndExhaust'),
 18                             textStyle: {
 19                                 color: '#3875FF'
 20                             }
 21                         },
 22                         {
 23                             name: this.$t('overAll.echarts.label.coldSource'),
 24                             textStyle: {
 25                                 color: '#3FA920'
 26                             }
 27                         },
 28                         {
 29                             name: this.$t('overAll.echarts.label.waterCollectingWell'),
 30                             textStyle: {
 31                                 color: '#F2B027'
 32                             }
 33                         },
 34                         {
 35                             name: this.$t('overAll.echarts.label.airConditioner'),
 36                             textStyle: {
 37                                 color: '#ae7eff'
 38                             }
 39                         }],
 40                     textStyle: {
 41                         color: ['#999fa8'],
 42                         fontSize: 12,
 43                         top: '55px',
 44                         left: '100',
 45                         align: 'right',
 46                         x: 'right'
 47                     }
 48                 },
 49                 grid: {
 50                     top: '18%',
 51                     left: '3%',
 52                     right: '4%',
 53                     bottom: '10%',
 54                     containLabel: true
 55                 },
 56 
 57                 xAxis: {
 58                     type: 'category',
 59                     boundaryGap: false,
 60                     data: [this.$t('overAll.echarts.weeks[0]'), this.$t('overAll.echarts.weeks[1]'), this.$t('overAll.echarts.weeks[2]'), this.$t('overAll.echarts.weeks[3]'), this.$t('overAll.echarts.weeks[4]'), this.$t('overAll.echarts.weeks[5]'), this.$t('overAll.echarts.weeks[6]')],
 61                     axisLine: {
 62                         lineStyle: { color: 'rgba(240, 244, 255, .16)' }
 63                     },
 64                     axisTick: {
 65                         show: false // 去除刻度尺
 66                     },
 67 
 68                     // 去除坐标文字
 69                     axisLabel: {
 70                         show: false,
 71                         lineStyle: {
 72                             color: '#999fa8', // 颜色
 73                             width: 2 // 粗细
 74                         }
 75                     }
 76                 },
 77                 yAxis: [{
 78 
 79                     name: this.$t('overAll.echarts.label.timesUnit'),
 80                     nameTextStyle: {//y轴上方单位的颜色
 81                         color: '#999fa8'
 82                     },
 83                     textStyle: {
 84                         color: '#999fa8', // 修改坐标轴文字颜色
 85                         fontSize: 13
 86                     },
 87                     axisLabel: {
 88                         textStyle: {
 89                             color: '#999fa8', // 修改坐标轴文字颜色
 90                             fontSize: 13
 91                         }
 92                     },
 93                     axisLine: {
 94                         show: false // 去除坐标轴
 95                     },
 96                     axisTick: {
 97                         show: false // 去除刻度尺
 98                     },
 99                     splitLine: {
100                         show: true,
101                         lineStyle: {
102                             color: ['#454853'],
103                             width: 1,
104                             type: 'solid'
105                         }
106                     }
107                 }],
108                 series: [
109                     {
110                         name: this.$t('overAll.echarts.label.airAndExhaust'),
111                         type: 'line',
112 
113                         // stack: '总量',
114                         color: '#3875FF',
115                         symbol: 'none',
116                         data: [12, 13, 10, 13, 9, 23, 21]
117                     },
118                     {
119                         name: this.$t('overAll.echarts.label.coldSource'),
120                         type: 'line',
121                         color: '#3FA920',
122                         symbol: 'none',
123                         data: [22, 18, 19, 23, 29, 33, 31]
124                     },
125                     {
126                         name: this.$t('overAll.echarts.label.waterCollectingWell'),
127                         type: 'line',
128                         color: '#F2B027',
129                         symbol: 'none',
130                         data: [15, 22, 20, 15, 19, 33, 41]
131                     },
132                     {
133                         name: this.$t('overAll.echarts.label.airConditioner'),
134                         type: 'line',
135                         color: '#AE7EFF',
136                         symbol: 'none',
137                         data: [32, 33, 30, 33, 39, 33, 32]
138                     }]
139             });
140         },

 

 调用自适应页面

1 init () {
2       setTimeout(() => {
3           window.addEventListener('resize', () => {
4                 this.baStatisticsHistoricalAlarmEquip.resize();
5            });
6       }, 20);
7 }

 

posted @ 2021-02-23 10:14  老板来斤代码  阅读(280)  评论(0)    收藏  举报