在上一篇的基础上将图表封装成了组件技术有限大家凑合着看吧templateview classchart-containercanvas idmyChart type2d canvas-idmyChart stylewidth: 100%; height: 400px;/canvas/view/templatescript setupimport {onMounted,nextTick,getCurrentInstance,onUnmounted,onBeforeUnmount} from vueimport * as echarts from echartslet chartInstance nullconst proxy getCurrentInstance().proxyconst loopInit () {nextTick(() {const query uni.createSelectorQuery().in(proxy)query.select(#myChart).fields({node: true,size: true}).exec(res {// 先判断节点是否获取成功避免空指针报错if (!res || !res[0]) returnconst canvas res[0].nodecanvas.addEventListener () {}canvas.removeEventListener () {}// 如果后续还遇到类似preventDefault的报错也可以同步补全canvas.preventDefault () {}// 从selectorQuery结果中拿到容器的实际宽高const {width,height} res[0]// 传入小程序环境必需的初始化配置const chartInstance echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: uni.getSystemInfoSync().pixelRatio,useDirtyRect: false, // 小程序环境关闭脏矩形优化避免兼容问题useCoarsePointer: true, // 适配移动端触摸交互pointerSize: 40 // 适配触摸点击的热区大小})const option {tooltip: {trigger: axis},grid: {top: 10%,left: 3%,right: 4%,bottom: 20%,containLabel: true},xAxis: {type: category,data: props.xData},yAxis: {type: value},legend: {data: props.seriesList},series: props.seriesList.map(item ({name: item.name,type: line, // 线性折线data: item.data,smooth: false, // 标准直线true为平滑曲线// 区域填充可选// areaStyle: { opacity: 0.15 }}))}// chartInstance.setOption(option)/* const option {title: { text: 示例图表 },tooltip: {},xAxis: { data: [A, B, C, D, E] },yAxis: {},series: [{name: 销量,type: bar,data: [10, 20, 30, 40, 50]}]}*/chartInstance.setOption(option)})})}const props defineProps({xData: {type: Array,default: () []},seriesList: {type: Array,default: () []},legendlist: {type: Array,default: () []}})onMounted(() {nextTick(() {// 延迟400ms再启动循环给组件canvas渲染时间setTimeout(loopInit, 400)})})/script