这是问题解决后的样式,顶部还有一个筛选条件,筛选之后 图片数据更新。第一次会通过 new Chart 获得图表对象,第二次触发的改变的时候 是用对象调用changeData放法来改变。 但是这里自定义了图例,就报错了。平常的图例没有 冒号和后面的数量 百分比。
// data是获取的数据
this.terminal.legend({
position: 'right',
flipPage: false,
itemName: {
formatter(text, item, index) {
if (
data &&
data[index] &&
data[index].value &&
data[index].percent
) {
return (
text +
':' +
data[index].value +
' / ' +
(parseFloat(data[index].percent) * 100).toFixed(2) +
'%'
)
}
return
}
}
})
//图表容器 key 是声明了全局变量
<div :key="key" id="terminal" />
//筛选条件 触发的时候 data获取的数据
this.$nextTick(() => {
**重要**
this.key++
try {
this.terminalData = data.terminal || null
//平常代码 触发changeData方法
// this.terminal
// ? this.terminal.changeData(this.terminalData.chart.os || [])
// : this.getTerminal(this.terminalData.chart.os || [])
this.$nextTick(() => {
this.getTerminal(this.terminalData.chart.os)
})
} catch (error) {
console.log(error)
} finally {
// 下面代码 解决第一次图表数据为空,第二次有数据,并且宽度自适应,图表渲染不出来问题。
const e = document.createEvent('Event')
e.initEvent('resize', true, true)
window.dispatchEvent(e)
}
})