[Vue warn]: Error in nextTick: "TypeError: canvas.getContext is not a function"

Hi, I use all components in uniapp to report errors, and hbuilderx will report errors. I tried to use it
// const el = document.querySelector('#' + that.chartId)
// const myChart = el.querySelector('canvas')
This is normal in hbuiderx editor preview and Google browser, but there is another error in the applet. How should I solve this problem?

`

import { mapState } from 'vuex'
export default {
name: 'WsChartLine',
props: {
chartId: {
type: String,
default: 'myChartLine'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300rpx'
},
chartData: {
type: Array,
default: () => [{
title: 'U.S.A',
value: 29034
}, {
title: 'India',
value: 123456
}, {
title: 'China',
value: 434444
}, {
title: 'Russia',
value: 133567
}]
},
transposed:{
type: Boolean,
default: false
},
type: {
type: Array,
default: () => []
}
},
computed:{
...mapState(['color'])
},
mounted (){
this.$nextTick(function(){
this.chartInit()
})
},
methods:{
chartInit(){
const that = this
// const el = document.querySelector('#' + that.chartId)
// const myChart = el.querySelector('canvas')

const chart = new that.$F2.Chart({
id: 'chartId',
padding: ['auto', 20, 'auto', 'auto'],
pixelRatio: window.devicePixelRatio
});

chart.source(that.chartData, {
value: {
tickCount: 5,
min: 0
},
title: {
range: [0, 1]
}
});

chart.coord({
transposed: that.transposed
});

chart.tooltip({
showCrosshairs: true,
showItemMarker: false,
onShow: function onShow(ev) {
var items = ev.items;
items[0].name = null;
items[0].value = '$ ' + items[0].value;
}
});

chart.axis('title', {
label: function label(text, index, total) {
var textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
} else if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});

chart.line()
.position('title*value')
.adjust('stack')
.color('type', (val) => {
let color = that.type.length > 0 ? that.type[0].color : that.color
that.type.map((item, index)=>{
if(val === item.name){
color = item.color
}
})
return color
})
.style({
lineWidth: 1
//stroke: that.color
});

chart.point().position('title*value').adjust('stack').style('type', {
lineWidth: 2,
fill: '#fff',
stroke: (val) => {
let color = that.type.length > 0 ? that.type[0].color : that.color
that.type.map((item, index)=>{
if(val === item.name){
color = item.color
}
})
return color
}
});

chart.render();
}
}
}

.chart-container{
width: 100%;
}

`

Start at the chartInit method in the provided Vue component, especially the F2 Chart construction using the canvas id, and compare the browser canvas API with the applet canvas API. Reproduce the warning in the applet and verify that the chart renders without the canvas.getContext error.

Written by the indexing model from the issue text.