如何解决Vue项目中使用echarts，宽度变化导致图不能resize问题
作者：互联网
参考资料：
https://blog.csdn.net/weixin_44217741/article/details/105536986
关键代码：
1，第一步：
安装：
cnpm install element-resize-detector
2，第二步：
引入
import elementResizeDetectorMaker from ‘element-resize-detector’
3，在mounted里面监听dom元素
mounted() {
this.drawChart1()
this.drawChart2()
let erd = elementResizeDetectorMaker();
let that = this
erd.listenTo(document.getElementById("main1"), (element) => {
let width = element.offsetWidth;
let height = element.offsetHeight;
console.log(width)
console.log(height)
that.$nextTick(() => {
//使echarts尺寸重置
that.$echarts.init(document.getElementById("main1")).resize();
that.$echarts.init(document.getElementById("main2")).resize();
});
});
},
我的完整代码：
<template>
<div class="home-box">
<!-- <h1>您已进入四川省监狱智能语音管理平台</h1>-->
<!-- 1关键词预警信息统计-->
<div class="warning-information-statistics">
<div class="warning-information-left">
<h3>
关键词预警信息统计
</h3>
<div class="today-quantity">
<div class="distinguish">
<p>今日识别</p>
<h2>345000</h2>
<p>个关键词</p>
<p>总识别：900000000</p>
</div>
<div class="Screened">
<p>今日已甄别</p>
<h2>245000</h2>
<p>个关键词</p>
<p>总识别：300000000</p>
</div>
<div class="clearfix"></div>
<el-button type="primary" class="keyword-screening-btn">关键词甄别</el-button>
</div>
</div>
<div id="main1"></div>
</div>
<!-- 2服务器引擎处理队列情况-->
<div class="server-engine-processes-queue">
<div class="warning-information-left">
<h3>
关键词预警信息统计
</h3>
<div class="today-quantity">
<div class="distinguish">
<p>今日发现</p>
<h2>345000</h2>
<p>新待转写</p>
<p>总发现：300000000</p>
</div>
<div class="Screened">
<p>今日上传转写</p>
<h2>340005</h2>
<p>排队待处理</p>
<p>总上传：300000000</p>
</div>
<div class="clearfix"></div>
</div>
<div class="today-quantity">
<div class="distinguish">
<p>引擎并行</p>
<h2>320</h2>
<p>转写中</p>
<p>平均耗时：3分钟/文件</p>
</div>
<div class="Screened">
<p>今日完成</p>
<h2>399999</h2>
<p>转写文件</p>
<p>总完成：300000000</p>
</div>
<div class="clearfix"></div>
</div>
<el-button type="primary" class="resource-management-btn">资源管理</el-button>
</div>
<div class="warning-information-right">
<el-table
:data="tableData1"
border
style="width: 100%"
>
<el-table-column
prop="id"
label="排队序号"
align="center"
>
</el-table-column>
<el-table-column
prop="place"
label="监狱"
align="center"
>
</el-table-column>
<el-table-column
prop="scene"
label="场景"
align="center"
>
</el-table-column>
<el-table-column
prop="fileName"
label="文件名"
align="center"
>
</el-table-column>
<el-table-column
prop="size"
label="大小"
align="center"
>
</el-table-column>
</el-table>
<el-pagination
background
class="pagination-box"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
<el-button type="primary" class="keyword-screening-btn">队列管理</el-button>
</div>
</div>
<!--3服务单位信息统计-->
<div class="unit-statistical-service">
<div class="warning-information-left">
<h3>
服务单位信息统计
</h3>
<div class="today-quantity">
<div class="distinguish">
<p>今日接口调用</p>
<h2>30002</h2>
<p>次</p>
<p>上传文件：1234567个</p>
</div>
<div class="Screened">
<p>今日接口传输数据</p>
<h2>245000</h2>
<p>/MB</p>
<p>总计处理：300000TB</p>
</div>
<div class="clearfix"></div>
<el-button type="primary" class="interface-call-view-btn">接口调用查看</el-button>
</div>
</div>
<div id="main2"></div>
</div>
<!--4平台调用信息排名-->
<div class="platform-call-information-ranking">
<h3>
平台调用信息排名
</h3>
<el-table
:data="tableData2"
border
style="width: 100%"
>
<el-table-column
prop="state"
label="状态"
align="center"
>
</el-table-column>
<el-table-column
prop="interface"
label="接口"
align="center"
>
</el-table-column>
<el-table-column
prop="totalCalls"
label="总调用次数"
align="center"
>
</el-table-column>
<el-table-column
prop="callRanking"
label="调用排名"
align="center"
>
</el-table-column>
</el-table>
<el-pagination
background
class="pagination-box"
layout="prev, pager, next"
:total="1000"
>
</el-pagination>
</div>
</div>
</template>
<script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
name: 'index',
data() {
return {
screenWidth: document.body.clientWidth,
tableData1: [
{
id: '10',
place: '嘉州',
scene: '亲电',
fileName: '20201423425678.mp3',
size: '10mb'
},
{
id: '10',
place: '嘉州',
scene: '亲电',
fileName: '20201423425678.mp3',
size: '10mb'
}, {
id: '10',
place: '嘉州',
scene: '亲电',
fileName: '20201423425678.mp3',
size: '10mb'
},
{
id: '10',
place: '嘉州',
scene: '亲电',
fileName: '20201423425678.mp3',
size: '10mb'
}, {
id: '10',
place: '嘉州',
scene: '亲电',
fileName: '20201423425678.mp3',
size: '10mb'
},
{
id: '10',
place: '嘉州',
scene: '亲电',
fileName: '20201423425678.mp3',
size: '10mb'
}, {
id: '10',
place: '嘉州',
scene: '亲电',
fileName: '20201423425678.mp3',
size: '10mb'
},
{
id: '10',
place: '嘉州',
scene: '亲电',
fileName: '20201423425678.mp3',
size: '10mb'
}, {
id: '10',
place: '嘉州',
scene: '亲电',
fileName: '20201423425678.mp3',
size: '10mb'
},
{
id: '10',
place: '嘉州',
scene: '亲电',
fileName: '20201423425678.mp3',
size: '10mb'
}
],
tableData2: [
{
state: '正常',
interface: '接口101',
totalCalls: '99999',
callRanking: '两级指挥'
},
{
state: '正常',
interface: '接口101',
totalCalls: '99999',
callRanking: '两级指挥'
},
{
state: '正常',
interface: '接口101',
totalCalls: '99999',
callRanking: '两级指挥'
},
{
state: '正常',
interface: '接口101',
totalCalls: '99999',
callRanking: '两级指挥'
},
{
state: '正常',
interface: '接口101',
totalCalls: '99999',
callRanking: '两级指挥'
},
{
state: '正常',
interface: '接口101',
totalCalls: '99999',
callRanking: '两级指挥'
},
{
state: '正常',
interface: '接口101',
totalCalls: '99999',
callRanking: '两级指挥'
},
{
state: '正常',
interface: '接口101',
totalCalls: '99999',
callRanking: '两级指挥'
},
{
state: '正常',
interface: '接口101',
totalCalls: '99999',
callRanking: '两级指挥'
},
{
state: '正常',
interface: '接口101',
totalCalls: '99999',
callRanking: '两级指挥'
}
]
}
},
methods: {
goTarget(href) {
window.open(href, '_blank')
},
drawChart1() {
console.log('重绘了')
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('main1'))
// 指定图表的配置项和数据
let option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
height: '90%',
width: '90%',
left: '3%',
right: '4%',
top: '7%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['邑州监狱1', '邑州监狱2', '邑州监狱3', '崇州监狱1', '崇州监狱2', '崇州监狱3', '崇州监狱4', '省监狱1', '省监狱2', '省监狱3', '省监狱4', '省监狱1', '省监狱2', '省监狱3', '省监狱4'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '关键词个数',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220, 100, 150, 500, 390, 100, 150, 500, 390]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
},
drawChart2() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('main2'))
// 指定图表的配置项和数据
let option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
height: '90%',
width: '90%',
left: '3%',
right: '4%',
top: '7%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['邑州监狱1', '邑州监狱2', '邑州监狱3', '崇州监狱1', '崇州监狱2', '崇州监狱3', '崇州监狱4', '省监狱1', '省监狱2', '省监狱3', '省监狱4', '省监狱1', '省监狱2', '省监狱3', '省监狱4'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '关键词个数',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220, 100, 150, 500, 390, 100, 150, 500, 390]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
},
mounted() {
this.drawChart1()
this.drawChart2()
let erd = elementResizeDetectorMaker();
let that = this
erd.listenTo(document.getElementById("main1"), (element) => {
let width = element.offsetWidth;
let height = element.offsetHeight;
console.log(width)
console.log(height)
that.$nextTick(() => {
//使echarts尺寸重置
that.$echarts.init(document.getElementById("main1")).resize();
that.$echarts.init(document.getElementById("main2")).resize();
});
});
},
watch: {
}
}
</script>
<style scoped lang="scss">
.home-box {
//background-color: #003366;
margin: 30px 20px;
min-width: 990px;
.clearfix {
clear: both;
}
;
.warning-information-statistics {
//background-color: lightseagreen;
border: 1px solid gray;
border-radius: 10px;
padding: 10px;
width: 100%;
height: 100%;
min-height: 320px;
max-height: 1000px;
//min-width: 1336px;
.warning-information-left {
width: 40%;
height: 300px;
//background-color: lightcoral;
float: left;
.today-quantity {
.distinguish {
float: left;
//background-color: red;
width: 50%;
}
.Screened {
float: left;
margin-bottom: 30px;
}
.keyword-screening-btn {
}
}
}
#main1 {
width: 60%;
//min-width: 800px;
height: 300px;
float: left;
//background-color: lightsalmon;
}
}
.server-engine-processes-queue {
//background-color: lightseagreen;
border: 1px solid gray;
border-radius: 10px;
padding: 10px;
width: 100%;
height: 620px;
min-height: 320px;
margin: 20px auto;
.warning-information-left {
width: 40%;
height: 100%;
//background-color: lightcoral;
float: left;
.today-quantity {
margin-bottom: 50px;
.distinguish {
float: left;
//background-color: red;
width: 50%;
}
.Screened {
float: left;
margin-bottom: 30px;
}
}
.resource-management-btn {
}
}
.warning-information-right {
width: 60%;
min-width: 800px;
height: 300px;
float: left;
//background-color: lightsalmon;
padding-left: 50px;
.pagination-box {
margin: 20px auto;
}
}
}
.unit-statistical-service {
//background-color: lightseagreen;
border: 1px solid gray;
border-radius: 10px;
padding: 10px;
width: 100%;
height: 100%;
min-height: 320px;
.warning-information-left {
width: 40%;
height: 300px;
//background-color: lightcoral;
float: left;
.today-quantity {
.distinguish {
float: left;
//background-color: red;
width: 50%;
}
.Screened {
float: left;
margin-bottom: 30px;
}
.interface-call-view-btn {
}
}
}
#main2 {
width: 60%;
min-width: 800px;
height: 300px;
float: left;
//background-color: lightsalmon;
}
}
.platform-call-information-ranking {
//background-color: lightseagreen;
border: 1px solid gray;
border-radius: 10px;
padding: 10px;
width: 100%;
height: 100%;
margin-top: 20px;
.pagination-box {
margin-top: 20px;
margin-bottom: 20px;
}
}
}
</style>
效果图：
标签：监狱,Vue,color,height,width,background,echarts,resize,left 来源： https://blog.csdn.net/qq_22182989/article/details/111403915