1. Problems
Use vue3 to write the page, introduce an echarts graph, the data of the parent component changes, and the graph is not re-rendered.
2. Target effect diagram
3. Solve (the data has changed, but the chart does not change)
Only need 2 steps:
1. The echarts graph component monitors data (data changes, re-renders)
watch(
() => props.chartData,
() => {
//dispose为了解决警告 There is a chart instance already initialized on the dom.
echart.dispose(document.getElementById('LineBar'))
initChart() //重新渲染的方法
}
)
2. Before using the setOption() method, just reassign the data in the option, the code is as follows:
let initChart = () => {
let Echarts = echarts.init(document.getElementById('LineBar'))
//重新赋值（必须，否则渲染不上）
option.value.xAxis.data = props.chartData.xAxisData
option.value.series[0].data = props.chartData.data
// 绘制图表
Echarts.setOption(option.value)
// 自适应大小
window.addEventListener(
'resize',
(window.onresize = () => {
Echarts.resize()
})
)
}
Note: The parent component can adjust the interface to pass the value normally
Solution Warning There is a chart instance already initialized on the dom.
echart.dispose(document.getElementById('LineBar'))
Resolve warning Instance ec_1680155339347 has been disposed
Do not use the following wording: (I don't know the specific reason for the time being)
window.addEventListener(
'resize',
(window.onresize = () => {
Echarts.resize()
})
)
Write it like this instead:
window.addEventListener('resize', onResize(Echarts))
let onResize = (Echarts) => {
window.onresize = () => {
Echarts.resize()
}
}
4. Complete code of Echarts subcomponent
<template>
<div id="LineBar"></div>
</template>
<script name="LineBar" setup>
import {
onMounted, defineProps, watch } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
chartData: {
type: Object,
required: true
}
})
watch(
() => props.chartData,
() => {
//解决警告 There is a chart instance already initialized on the dom.
echart.dispose(document.getElementById('LineBar'))
initChart()
}
)
let option = ref({
tooltip: {
trigger: 'axis'
},
// legend: {
// data: vulnerabilityTrendData.value.xdata
// },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: props.chartData.xAxisData
},
yAxis: {
type: 'value'
},
series: [
{
name: 'ddd',
type: 'line',
smooth: true,
data: props.chartData.data,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(46, 121, 255, 0.2)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(46, 121, 255, 0.0001)' // 100% 处的颜色
}
]
}
},
color: '#2E79FF',
lineStyle: {
color: {
colorStops: [
{
offset: 0,
color: '#8477FF'
},
{
offset: 1,
color: '#5CCAFF'
}
]
},
width: 2,
shadowOffsetY: 12,
shadowColor: 'rgba(59, 138, 254, 0.1)'
}
}
]
})
let echart = echarts
onMounted(() => {
initChart()
})
let initChart = () => {
let Echarts = echarts.init(document.getElementById('LineBar'))
//手动赋值
option.value.xAxis.data = props.chartData.xAxisData
option.value.series[0].data = props.chartData.data
// 绘制图表
Echarts.setOption(option.value)
// 自适应大小(这样写会出现：父组件数据修改，浏览器窗口大小改变，会警告Instance ec_1680155339347 has been disposed)
//window.addEventListener(
// 'resize',
// (window.onresize = () => {
// Echarts.resize()
// })
//)
//改成以下写法
window.addEventListener('resize', onResize(Echarts))
}
let onResize = (Echarts) => {
window.onresize = () => {
Echarts.resize()
}
}
</script>
<style scoped></style>