主要原因:图表设置了display:none属性上(属性含义:不为被隐藏的对象保留其物理空间,关闭元素的显示,并且所有后代元素不显示
解决方法:外部div盒子必须要在init初始化前就已经存在于dom树中(也就是已经挂载)。在监视中(watch),要配合nextTick方法使用,这样才能完全确保初始化之前,外部盒子已经存在于dom树中。
示例代码:
<template>
<el-row :span="24">
<el-card style="width: 100%">
<template #header>
<div class="card-header" style="height: 2rem; background-color: rgb(216, 219, 222)">
<span style="padding-left: 1rem"> {{ props.cardHeader }} </span>
<div style="float: right; padding-right: 1rem">
<DateRangePicker @date-range="getDateRange"> </DateRangePicker>
</div>
</div>
</template>
<div :id="id" :class="className" :style="{ width: width, height: height }"></div>
</el-card>
</el-row>
</template>
<script setup lang="ts">
import { useStore } from 'vuex';
import * as echarts from 'echarts';
import { nextTick, onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
import DateRangePicker from './DateRangePicker.vue';
import axios from '../../http/axios';
const props = defineProps({
tabName: {
type: String,
default: 'smoke_autotest',
required: true,
},
cardHeader: {
type: String,
default: 'defCardHeader',
required: true,
},
id: {
type: String,
default: 'chart',
required: true,
},
className: {
type: String,
default: ''
},
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '10rem',
},
loading: {
type: Boolean,
default: true,
}
});
const store = useStore();
const defaultState = reactive({
username: store.state.userInfo.userName,
});
const tabName = ref('');
watch(props, (newV, oldV) => {
tabName.value = newV.tabName;
// getDeviceStatus7DaysApi();
});
const getDateRange = (cDate) => {
// sent request here
// defaultState.queryDate = cDate.value;
// console.log('sent request here, ', cDate);
};
let myChart: any = null;
const resizeHandler = () => {
myChart.resize();
};
const echartBar = () => {
let option;
option = {
dataset: [
{
dimensions: ['xCate', 'age', 'profession', 'yValue', 'date'],
source: [
['Hannah Krause', 41, 'Engineer', 314, '2011-02-12'],
['Zhao Qian', 20, 'Teacher', 351, '2011-03-01'],
['Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
['Karle Neumann', 25, 'Engineer', 253, '2011-04-02'],
['Adrian Groß', 19, 'Teacher', '-', '2011-01-16'],
['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
['Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
['Han Meimei', 67, 'Engineer', 366, '2011-03-12'],
],
},
{
transform: {
type: 'sort',
config: { dimension: 'yValue', order: 'desc' },
},
},
],
grid: {
height: '70%',
top: 20,
left: 70,
},
xAxis: {
type: 'category',
axisLabel: { interval: 0 }
},
yAxis: {},
series: {
type: 'bar',
encode: { x: 'xCate', y: 'yValue' },
datasetIndex: 1,
},
};
option && myChart.setOption(option);
};
watch(tabName, (newV, oldV) => {
myChart.dispose();
myChart = null;
window.removeEventListener('resize', resizeHandler);
// 监听el-tab-pane 变化后,在nextTick() 重新渲染echart 图表
nextTick(() => {
myChart = echarts.init(document.getElementById(props.id) as HTMLDivElement, { renderer: 'svg' })
echartBar();
window.addEventListener('resize', resizeHandler);
});
});
const getDeviceStatus7DaysApi = async () => {
await axios
.get('/controller/dashboard/devicestatusrecent', {
params: {
username: defaultState.username,
},
})
.then((resp) => {
if (resp.code !== 2000) {
return;
}
console.log('not his, ', resp);
});
};
onBeforeMount(() => {
getDeviceStatus7DaysApi();
});
onMounted(() => {
myChart = echarts.init(document.getElementById(props.id) as HTMLDivElement, { renderer: 'svg' })
echartBar();
window.addEventListener('resize', resizeHandler);
});
onUnmounted(() => {
myChart.dispose();
window.removeEventListener('resize', resizeHandler);
myChart = null;
});
</script>