一、需求和问题
将使用uniapp开发的App转为微信小程序，在App中使用了echarts制作图表用于显示。
在使用hbuilderx运行到微信开发者工具过程中发现图表未显示
二、原因
在将app转为小程序过程中发现很多不兼容的样式问题，因此猜测app和小程序中使用echarts的引入和编写方法不同导致小程序不能显示图表
查看官方文档之后，发现微信小程序的显示，确实需要引入一个小组件
三、解决办法
1、下载官方文档提供的项目、将提供的组件复制到自己的项目中；
2、打开下载的项目，根据项目中引入组件的方法对组件进行引用，并根据需求编写相关的图表显示代码。
<template>
<view>
<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
</uni-ec-canvas>
</view>
</template>
<script>
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/uni-ec-canvas/echarts'
let chart = null
export default {
components: {
uniEcCanvas
},
data() {
return {
ec: {
//是否懒加载
lazyLoad: true
},
onlineRate: ''
}
},
created() {
this.queryOnlineRate()
},
methods: {
initChart(canvas, width, height, canvasDpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
const data = [{ value: '', name: '设备在线率', itemStyle: {color:'#559de6'} },];
console.log(data)
const option = {
series: [{
name: '上下班统计',
type: 'pie',
radius: ['40%', '70%'],
data: data,
label: {
normal: {
show: false,
},
},
labelLine: {
normal: {
show: false
}
},
}]
};
chart.setOption(option)
return chart
},
},
mounted() {
this.$refs.canvas.init(this.initChart)
}
}
</script>
<style>
.uni-ec-canvas {
width: 100%;
height: 500rpx;
display: block;
margin-top: 30rpx;
}
</style>
此为相关图表的代码
修改之后通过hbuilder运行项目，能够看到图表已经显示出来了。