踩坑1: 切换路由时候会报错并且echarts图表不显示问题,# There is a chart instance already initialized on the dom
原因就是重复init了,可以在销毁组件时候 将图表销毁下
` onBeforeUnmount(() => {
echarts.dispose(Document.getElementsByClassName('pie-box')[0])
echarts.dispose(Document.getElementsByClassName('line-box')[0])
}) `
踩坑2 :想自适应 echart 使用resize
let pieChart: any = ''
function initPie() {
// 基于准备好的dom,初始化echarts实例
if (!pieChart) {
pieChart = echarts.init(Document.getElementsByClassName('pie-box')[0])
}
// 指定图表的配置项和数据
const option = {
title: {
text: '总览',
x: 'center',
y: 'center',
textStyle: {
fontSize: 20,
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'right',
padding: [10, 20, 0, 0],
textStyle: {
color: '#fff',
opacity: '0.8'
}
},
series: [
{
type: 'pie',
radius: ['35%', '50%'],
avoidLabelOverlap: false,
color: ['#B13F4B', '#1A74FE'],
emphasis: {
disabled: true
},
labelLine: {
show: false
},
label: {
formatter: '{label|{d}%\n{b}: {c}}',
rich: {
label: {
fontSize: '16px',
color: '#fff',
opacity: '0.8'
}
}
},
data: props.pieData
}
]
}
window.addEventListener('resize', () => {
pieChart.resize()
})
// 使用刚指定的配置项和数据显示图表。
pieChart.setOption(option)
}
`