echarts超出容器宽度

Question

在使用vue+iview+echarts时，出现了echarts图标超出容器宽度的问题，代码如下：
DOM结构:

    <Row>
      <Col span="15">
        <Row>
          <Col span="24" style="width: 100%">
            <div class="chart-container" id="echart-bar-agent" style="width: auto; height: 350px;"></div>
          </Col>
          <Col span="24">
            <div class="chart-container" id="echart-line-event" style="width: 100%; height: 350px;" ></div>
          </Col>
        </Row>
      </Col>
    </Row>

JS代码:

  import echarts from 'echarts'
  import axios from 'axios'

  export default {
    name: 'Dashboard',
    data() {
      return {
        installCommand: '暂无',
        statisticData: ''          
      }
    },
    mounted() {
      this.drawAgentChart(this.statisticData)
      this.drawEventChart(this.statisticData)
    },
    methods: {
      drawAgentChart: function(chartData) {
        // 初始化图表数据
        let agentChart = echarts.init(document.getElementById('echart-bar-agent'))
        agentChart.showLoading()
        // ajax获取图表数据
        const get_data_url = 'http://127.0.0.1:8000/manager/dashboard/get_chart_data/'
        axios.get(get_data_url)
          .then(function(response) {
            agentChart.hideLoading()
            let agentChartOption = {
              title: {
              text: 'Agent存活概况',
                subtext: ''
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                data: response.data.chart_date_list
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                type: 'bar',
                data: response.data.alive_agent_list,
              }]
            }
            agentChart.setOption(agentChartOption)
          })
          .catch(function(error) {
          })
      },
      drawEventChart: function(chartData) {
        let eventChart = echarts.init(document.getElementById('echart-line-event'))
        let eventChartOption = {}
        eventChart.setOption(eventChartOption)
        console.log('draw event......')
      }
    }
  }

问题很奇怪，第一次打开页面或者强制刷新页面时，图表超出容器宽度，如下图:

如果随便修改了代码，比如加一行console.log(1)，页面自动hot reloading之后,图表又能正常渲染，不会超出容器宽度，效果如下图:

如果使this.$refs.{refname}.style.width为容器设置一个固定的宽度，图表也不会超出容器宽度。
花了将近两天时间，还是没有定位到问题根源，请大家帮帮忙。。

Answer 1

这是因为当生成图表时,由于别的组件还在渲染,添加class,导致echarts绑定的元素的宽度并不是最终的宽度,所以造成了获取到的结果并不是想要的。面对这个问题有两种思路,一种是延迟加载,如setTimeout来延迟执行echarts图表的生成,因为无法估计DOM最终样式需要多久才能渲染完成,所以除非你的时间设置的比较长,不然并不是每一次都起作用;第二种就是监听DOM大小变化,当DOM大小发生变换时,使用mycharts.resize()来重置图标大小。主要是用到'resize-detector'这个插件。
在Vue中的具体用法:

    import { addListener, removeListener } from  'resize-detector'
    export  default {
        mounted() {
            this.initEchart();
            let ele = this.$refs.container;
            addListener(ele, this.resize);
            
            this.$once('hook:beforeDestroy', () => {
                //销毁库, this.resize就是 this.myChart.resize()
                removeListener(ele, this.resize);
                this.myChart.dispose();
                this.myChart =  null;
            })
            
        }
        ......
    }

Answer 2

把你那两个方法放在this.$nextTick中试下

Answer 3

先渲染dom后渲染数据所以会有这个局面,去调用echarts里的resize事件就可以了....

Answer 4

我解决了,可以参考我这个文章
https://blog.csdn.net/qq_4271...

Answer 5

额，chart图表一般初始化的时候都会给个固定宽度。
或者你在chart图表渲染的agentChartOption中给个grid:{right:'3%'}

Answer 6

和你完全一样的问题 不知道你是怎么解决的 nextTick用了 不管用啊 grid也设置了 加了一个window.onresize 的时候 echart.resize() 手动改变浏览器窗口大小的时候会自适应了 但是一打开的时候还是不行 你如果解决了分享一下解决方法吧 感谢!!

Answer 7

解决了么 老哥 给个答案