Echars（多图表自适应）

网上找了一天终于解决

装一个element的插件

gitHub:GitHub - wnr/element-resize-detector: Optimized cross-browser resize listener for elements.https://github.com/wnr/element-resize-detector

npm install element-resize-detector

main方法中

import 'element-resize-detector'

组件中图表

 <div ref="myDivrain"
         style="width:100%;height:450px" />

组件中导入方法

import elementResizeDetectorMaker from 'element-resize-detector'

mounted方法中

  var erd = elementResizeDetectorMaker()
    erd.listenTo(this.$refs.myDivrain, function (element) {
      var width = element.offsetWidth
      var height = element.offsetHeight
      that.$nextTick(function () {
        console.log('Size: ' + width + 'x' + height)
        // 使echarts尺寸重置
        that.myChart.resize()
      })
    })

如果看不懂的话下面的链接

转载

(2条消息) vue+element项目里实时监听某个div宽度的变化，然后执行相应的事件_随便起的名字也被占用的博客-CSDN博客_vue监听元素宽度变化https://blog.csdn.net/csl125/article/details/89245267

以下为全部代码

<template>
  <div>
    <div ref="myDivrain"
         style="width:100%;height:450px" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import elementResizeDetectorMaker from 'element-resize-detector'
echarts.use([TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, LineChart, CanvasRenderer, UniversalTransition, DataZoomComponent])

export default {
  props: ['rainDialogVisible'],
  data () {
    return {
      myChart: null,
      list: [],
      X: [],
      Y: [],
      Z: []
    }
  },
  mounted () {
    this.initdata()
    this.initChars()
    const that = this
    var erd = elementResizeDetectorMaker()
    erd.listenTo(this.$refs.myDivrain, function (element) {
      var width = element.offsetWidth
      var height = element.offsetHeight
      that.$nextTick(function () {
        console.log('Size: ' + width + 'x' + height)
        // 使echarts尺寸重置
        that.myChart.resize()
      })
    })
  },
  methods: {
    initdata (newdata) {
      this.list = [
        { X: ['1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2'] },
        { Y: ['1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2'] }
      ]
      this.list.forEach(o => {
        this.X.push(o.X)
        this.Y.push(o.Y)
      })
    },
    initChars () {
      this.myChart = echarts.init(this.$refs.myDivrain) // 得到图表实例
      this.myChart.showLoading()
      var maxData1 = this.calMax(this.Y)
      var minData1 = this.calMin(this.Y)
      var maxData2 = this.calMax(this.Z)
      var minData2 = this.calMin(this.Z)
      this.myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器配置项。
            type: 'line', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: 'auto', // 指示器的坐标轴。
            snap: true // 坐标轴指示器是否自动吸附到点上
          }
        },
        legend: {
          x: 'center', // 可设定图例在左、右、居中
          y: 'bottom', // 可设定图例在上、下、居中
          padding: [100, 0, 0, 0] // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
        },
        grid: {
          left: '6%',
          right: '6%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.X,
            axisLabel: {
              color: 'black',
              fontSize: '12',
              show: true,
              formatter: function (value) {
                var ret = '' // 拼接加\n返回的类目项
                var maxLength = 10 // 每项显示文字个数
                var valLength = value.length // X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
                if (rowN > 1) {
                  // 如果类目项的文字大于5,
                  for (var i = 0; i < rowN; i++) {
                    var temp = '' // 每次截取的字符串
                    var start = i * maxLength // 开始截取的位置
                    var end = start + maxLength // 结束截取的位置
                    // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + '\n'
                    ret += temp // 凭借最终的字符串
                  }
                  var newvalue = ret.slice(0, -10)
                  return newvalue + '8时'
                } else {
                  return value.slice(0, -8)
                }
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#ddd',
                type: 'solid'
              }
            },
            axisTick: {
              // 坐标轴刻度相关设置
              show: false, // 是否显示坐标轴刻度。
              alignWithLabel: false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
              interval: 'auto', // 坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
              inside: false, // 坐标轴刻度是否朝内，默认朝外。
              length: 5, // 坐标轴刻度的长度。
              lineStyle: 'mylineStyle'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '流量(m³/s)',
            position: 'left',
            min: minData1,
            max: maxData1,
            splitNumber: 6, // 设置坐标轴的分割段数
            interval: (maxData1 - minData1) / 6, // 标轴分割间隔
            axisLabel: {
              formatter: function (v) {
                return v.toFixed(1) // 0表示小数为0位，1表示1位小数，2表示2位小数
              },
              color: '#5470C6'
            },
            axisLine: {
              onZero: false // y轴是否在x轴0刻度上
            }
          },
          {
            type: 'value',
            name: '水位(m)',
            position: 'right',
            min: minData2,
            max: maxData2,
            splitNumber: 6,
            interval: (maxData2 - minData2) / 6,
            axisLabel: {
              formatter: function (v) {
                return v.toFixed(2) // 0表示小数为0位，1表示1位小数，2表示2位小数
              },
              color: '#91CC75'
            },
            axisLine: {
              onZero: false // y轴是否在x轴0刻度上
            }
          }
        ],
        series: [
          {
            smooth: true,
            name: '流量(m³/s)',
            type: 'line',
            stack: '', // 堆叠
            showSymbol: false, // 是否默认展示圆点
            symbolSize: 10, // 设定实心点的大小
            symbol: 'circle', // 设定为实心点
            yAxisIndex: 0,
            emphasis: {
              focus: 'series'
            },
            data: this.Y
          },
          {
            smooth: true,
            name: '水位(m)',
            type: 'line',
            stack: '', // 堆叠
            showSymbol: false, // 是否默认展示圆点
            symbolSize: 10, // 设定实心点的大小
            symbol: 'circle', // 设定为实心点
            yAxisIndex: 1,
            emphasis: {
              focus: 'series'
            },
            data: this.Z
          }
        ],
        dataZoom: {
          // 放大和缩放
          type: 'inside'
        }
      })
      this.myChart.hideLoading()
    },
    // 获取最大值方法
    calMax (arr) {
      var max = Math.max.apply(null, arr) // 获取最大值方法
      var maxint = Math.ceil(max / 5) // 向上以5的倍数取整
      var maxval = maxint * 5 + 5 // 最终设置的最大值
      return maxval // 输出最大值
    },
    // 获取最小值方法
    calMin (arr) {
      var min = Math.min.apply(null, arr) // 获取最小值方法
      var minint = Math.floor(min / 1) // 向下以1的倍数取整
      var minval = minint * 1 - 5 // 最终设置的最小值
      return minval // 输出最小值
    }
  }
}
</script>

<style scoped>
</style>