项目背景：
需要使用echarts进行图表展示。由于div宽高是不固定的，因此需要先获取父级的宽高再把值赋予到图表的div中。
需要使用 this.$nextTick(() => { });方法，在mounted中，保证DOM渲染完全后，在进行echarts初始化。
<!--wifi数据采集-->
<template>
<div class="wifiCollectCtrl">
<div id="wifiCollectID"></div>
</div>
</template> <script>
import echarts from 'echarts'; export default {
name: "wifiCollect",
props: {
className: {type: String, default: 'chart'},
id: {type: String, default: 'wifiCollectID'}, },
data() {
return {
chart: null,
seriesData: '',
xAxisTxt: '',
color: [
'#3D89FE', '#9bca62', '#2ec7c9', '#b6a2de', '#5ab1ef',
'#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
'#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
'#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'
]
};
},
mounted() {
this.$nextTick(() => { //使用nextTick为了保证dom元素都已经渲染完毕
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
created() { },
methods: {
initChart() {
$("#wifiCollectID").width($(".wifiCollectCtrl").width());
$("#wifiCollectID").height($(".wifiCollectCtrl").height());
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({
color: this.color,
title: {
text: '',
},
calculable: true,
grid: {
left: '50px',
right: '3%',
bottom: '20px',
top: '15px'
},
xAxis: [
{
type: 'category',
// data : this.xAxisTxt,
data: ['花园小区', '锦园小区', '云台小区', '教师宿舍区'],
splitLine: {show: false},//去除网格线
axisLine: {
lineStyle: {
color: '#3D89FE',
width: 1
}
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
}
}
],
yAxis: [
{
type: 'value',
splitLine: {//去除网格线
show: true,
lineStyle: {
color: ['#1F4781'],
width: 1,
}
},
axisLine: {
lineStyle: {
color: '#3D89FE',
width: 1
}
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
}
}
],
series: [
{
name: '所属小区',
type: 'bar',
barMaxWidth: '30',
// data:this.seriesData,
data: [20, 340, 40, 39]
} ]
})
}
} }
</script> <style scoped>
.wifiCollectCtrl {
color: #333;
padding: 5px;
width: 100%;
height: 100%;
position: relative;
}
</style>