重点解决两个问题
问题一：echarts的dom元素设置成百分比，图表不生效，缩成一团
解决：
1、首先保证父元素要有宽高，可通过f12审查元素
2、在mounted中使用
this.$nextTick(() => {
initCharts();
})
或者定时器
setTimeout(()=> {
initCharts();
},timeout)
问题二：echarts图表在窗口变化时自适应的问题
在mounted中使用windows.onresize()
let that = this;
window.onresize = function(){
console.log('窗口自适应执行了');
that.instance.resize();
}
源码
Echart.vue
<template>
<div ref="main" :style="{width,height}"></div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts/src/chart/pie'
export default {
name: 'EChart',
props: {
title: {
type: String,
default: '',
},
options: {
type: Object,
default: function () {
return {}
},
},
width: {
type: String,
default: '100px',
},
height: {
type: String,
default: '100px',
},
},
data() {
return {
instance: null,
}
},
mounted() {
this.$nextTick(() => {
const instance = echarts.init(this.$refs.main)
instance.resize();
instance.setOption(this.options)
instance.on('click', e => {
this.$emit('chartClick', e)
})
this.instance = instance
})
let that = this;
window.onresize = function(){
console.log('窗口自适应执行了');
that.instance.resize();
}
},
}
</script>
<template>
<el-tabs type="border-card" class="area-container">
<el-tab-pane label="塘朗车辆段">
<div class="pane-content">
<div class="row">
<div class="col online-num">
<div class="online-title">在线人数</div>
<div class="online-pie">
<div class="count">45</div>
<div class="unit">人</div>
<img src="../../assets/online.png" alt="">
</div>
</div>
<div class="col obstacle">
<!--使用封装的echarts组件-->
<chart :options="bar" height="100%" width="100%" theme="walden" />
</div>
</div>
<div class="row">
<div class="col inspec-task">
<!--使用封装的echarts组件-->
<chart :options="pie" height="100%" width="100%" theme="walden" />
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import * as echarts from 'echarts'
export default {
data: function () {
return {
pie: {
title: {
text: '巡检任务',
x: 'center',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
x: 'center',
y: 'bottom',
data: ['已检任务数', '待检任务数', '检修中任务数', '异常任务数'],
},
series: [{
name: '巡检任务',
type: 'pie',
radius: ['40%', '67%'],
data: [{
value: 12,
name: '已检任务数'
},
{
value: 5,
name: '待检任务数'
},
{
value: 17,
name: '检修中任务数'
},
{
value: 22,
name: '异常任务数'
},
],
itemStyle: {
normal: {
color: function (colors) {
let colorList = [
'#C1EBDD',
'#F4997D',
'#55C3B6',
'#9687FE',
'#9D8FFE'
];
return colorList[colors.dataIndex];
}
}
}
}],
},
bar: {
title: {
text: '故障',
},
tooltip: {},
xAxis: {
axisLabel: {
interval: 0,
rotate: 30,
},
data: [
'主电路系统',
'牵引控制系统',
'辅助系统',
'通信控制系统',
'照明系统',
'附属设备系统',
'车门系统',
'车钩系统',
'客室系统',
'转向架系统',
'供风和制动系统',
'司机室系统',
'乘客信息系统',
'空调系统',
],
},
yAxis: {},
series: [{
name: '故障',
type: 'bar',
barWidth: "30%",
// itemStyle: {
// color: '#9BD55A'
// },
showBackground: true,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#83bff6'
},
{
offset: 0.5,
color: '#188df0'
},
{
offset: 1,
color: '#188df0'
}
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#2378f7'
},
{
offset: 0.7,
color: '#2378f7'
},
{
offset: 1,
color: '#83bff6'
}
])
}
},
data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20, 4],
}, ]
}
}
}
}
</script>
<style scoped lang="scss">
.area-container {
height: auto !important;
background-color: #F6F7FB;
.pane-content {
height: 780px;
.row {
width: 100%;
height: 50%;
display: flex;
align-items: center;
margin-bottom: 35px;
.col {
width: 100%;
background-color: #ffffff;
border-radius: 10px;
}
.online-num {
width: 40%;
margin-right: 30px;
height: 100%;
.online-title {
height: 10%;
}
.online-pie {
height: 90%;
position: relative;
div {
z-index: 2;
position: absolute;
color: #18C0F0;
}
.count {
font-weight: bold;
font-size: 32px;
top: 40%;
left: 47.5%;
transform: translateX(-50%);
transform: translateY(-50%);
}
.unit {
font-size: 20px;
top: 50%;
left: 49%;
transform: translateX(-50%);
transform: translateY(-50%);
}
img {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
}
.obstacle {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: calc(60% - 30px);
}
.inspec-task {
height: 100%;
width: 40%;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
</style>
