基础库 3.8.1
异步分包组件存放在分包a中，在分包b中引入，该组件如何在替换完成的时候获取到？
以下是vue-mini
import { definePage,ref,onReady,watch } from '@vue-mini/core';
definePage({
setup(props, context) {
const ec = {lazyLoad: true};
let ecComponent = ref(null)
let echarts = ref(null)
onReady(() => {
// 确保组件已经挂载
ecComponent.value = context.selectComponent("#mychart-dom-bar")
})
const initChart = (canvas, width, height, dpr) => {
if (!echarts.value) {
console.error('echarts not loaded yet');
return;
}
let chart = echarts.value.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr,
});
canvas.setChart(chart);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
},
confine: true,
},
legend: {
data: ['热度', '正面', '负面'],
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true,
},
xAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#999',
},
},
axisLabel: {
color: '#666',
},
},
],
yAxis: [
{
type: 'category',
axisTick: { show: false },
data: [
'汽车之家',
'今日头条',
'百度贴吧',
'一点资讯',
'微信',
'微博',
'知乎',
],
axisLine: {
lineStyle: {
color: '#999',
},
},
axisLabel: {
color: '#666',
},
},
],
series: [
{
name: '热度',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside',
},
},
data: [300, 270, 340, 344, 300, 320, 310],
itemStyle: {
// emphasis: {
// color: '#37a2da'
// }
},
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
},
},
data: [120, 102, 141, 174, 190, 250, 220],
itemStyle: {
// emphasis: {
// color: '#32c5e9'
// }
},
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left',
},
},
data: [-20, -32, -21, -34, -90, -130, -110],
itemStyle: {
// emphasis: {
// color: '#67e0e3'
// }
},
},
],
};
chart.setOption(option);
return chart;
}
// 异步加载 echarts
require('@/sub-pages/components/ec-canvas/echarts', (_echarts) => {
echarts.value = _echarts;
// 当 echarts 加载完成后，如果组件已经准备好，则初始化图表
if (ecComponent.value) {
ecComponent.value.init(initChart);
}
}, ({ mod, errMsg }) => {
console.error(`加载 echarts 失败: ${mod}, ${errMsg}`);
});
const init = () => {
const canvas = context.selectComponent('#mychart-dom-bar');
canvas.init(initChart);
};
return { ec,init };
},
});
html
<view class="container">
<button bind:tap="init">init</button>
<ec-canvas
id="mychart-dom-bar"
class="chart"
canvas-id="mychart-bar"
ec="{{ ec }}"
/>
</view>
json配置文件
{
"usingComponents": {
"fui-button": "/sub-pages/components/fui-button/fui-button",
"ec-canvas": "/sub-pages/components/ec-canvas/ec-canvas"
},
"componentPlaceholder": {
"fui-button": "view",
"ec-canvas": "view"
}
}
