useEcharts,onMounted hook不执行

[Guanxinyi-cookies]

Description

使用useEcharts()时遇到的问题,onMouted钩子不执行


问题出现在请求获取数据，目前是mock过来的数据，另外由于没使用过alova，所以还是使用axios发起的请求
此时会出现无法渲染问题，发现onMounted未执行
但是当我注释了请求后，便能正确触发onMounted渲染出图像
如果用echarts官方文档中的写法能正确渲染。
可能是什么原因？

Validations

• Ensure this issue neither a bug report nor a feature proposal.
• Read the docs.
• Check that there isn't already an issue that descript the same thing to avoid creating a duplicate.

[chansee97]

你可以参考src/views/demo/echarts 中的示例，useEcharts应当在一开始被使用，异步数据通过updata方法去更新，如果一开始没数据，可以把除了数据部分的options传入来进行图表的初始化。

[Guanxinyi-cookies]

使用update的方法解决了异步更新的问题，不过还有个问题想请教大佬

chart1Ref和chart2Ref使用相同的写法，和chart3Ref的区别在于，是使用固定的demo数据通过update更新，没有发出异步请求，此时反而会造成图表不渲染。

如果是在useEcharts时传入完整的option，包括数据，且不调用对应的update方法，图表能够渲染出来。
如果初始化时不包含数据，此时如果注释掉这两个调用，能观察到图表被初始化了，但是添加数据后update，图表就不见了。
createDailyPLine()
createMonthAlarmPie()
只有发出了异步请求的createMonthUseChart调用更新数据是正常的。

下面是我的代码：
const option1 = ref({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true
}
]
})
const option2 = ref({
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
}
]
})
const option3 = ref({
legend: {
data: ["上月", "本月"]
},
toolbox: {
show: true,
feature: {
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
series: [
{
name: "上月",
type: 'bar',
},
{
name: "本月",
type: 'bar',
},
]
})

const {update: chart1Update} = useEcharts('chart1Ref', option1)
const {update: chart2Update} = useEcharts('chart2Ref', option2)
const {update: chart3Update} = useEcharts('chart3Ref', option3)

const createDailyPLine = async () => {
option1.value.series[0].data = [820, 932, 901, 934, 1290, 1330, 1320]
chart1Update(option1.value)
}

const createMonthAlarmPie = async () => {
option2.value.series[0].data = [
{value: 1048, name: 'Search Engine'},
{value: 735, name: 'Direct'},
{value: 580, name: 'Email'},
{value: 484, name: 'Union Ads'},
{value: 300, name: 'Video Ads'}
]
chart2Update(option2.value)
}

const createMonthUseChart = async () => {
const res = await getMonthUseData()
const {dimensions, source} = res.data.dataset
const [day, last, current] = dimensions
const xAxisData = source.map(item => Number(item[day]))
const lastMonth = source.map(item => item[last])
const currentMonth = source.map(item => item[current])
option3.value = {
xAxis: {
data: xAxisData
},
series: [
{data: lastMonth},
{data: currentMonth}
]
}
chart3Update(option3.value)
}

createDailyPLine()
createMonthAlarmPie()
createMonthUseChart()

[chansee97]

该问题已处理， isRendered 的判断有问题