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.