Echarts exceeds container width

when using vue+iview+echarts, the echarts icon exceeds the container width. The code is as follows:
DOM structure: 

    <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 Code: 

  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......")
      }
    }
  }

the problem is very strange. When the page is opened for the first time or the page is forced to refresh, the chart exceeds the container width, as shown in the following figure:

console.log(1)hot reloading,:

if you make this.$refs. {refname} .style.width set a fixed width for the container, the chart will not exceed the container width.
spent nearly two days, but still can"t locate the root cause of the problem. Please help me.

Iview vue.js echarts4
Mar.18,2021

this is because when the chart is generated, because other components are still rendering, the width of the element bound to echarts by adding class, is not the final width, so the result is not what you want. In the face of this problem, there are two ways of thinking, one is delayed loading, such as setTimeout to delay the implementation of echarts chart generation, because it is impossible to estimate how long the final DOM style will take to render, so unless your time setting is relatively long, it does not work every time; the second is to listen for DOM size changes, when the DOM size changes, use mycharts.resize () to reset the icon size. The plug-in 'resize-detector'' is mainly used. The specific usage of
in 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;
            })
            
        }
        ......
    }

put your two methods in this.$nextTick and try

render the dom first and then render the data, so you can call the resize event in echarts.

I solved it. You can refer to my article
https://blog.csdn.net/qq_4271.

, Chart charts are usually initialized with a fixed width.
or you give grid: {right:'3%'}

in the agentChartOption rendered by the chart chart exactly the same problem as you. I don't know how you solved the nextTick. No matter how you use it, grid is also set to add a window.onresize when echart.resize () manually resizes the browser window will adapt, but it will not work when it is opened. If you have solved the problem, please share the solution. Thank you

have you solved it? brother, give me an answer

.

Previous: What does this regular expression mean?

Next: Homestead executes npm run dev error missing script: dev

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu