实测dome直接copy可以使用
我使用的是 插件库中的 echarts-for-wx
下载后只需要关注uni-ec-canvas文件夹下文件就可以 别的我都没有用
代码直接copy 就是echarts的dome(注意这里面的echarts.min(4)是我自己定制的包 如果直接copy 需要换成你们对应的js文件)
<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 '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts.min (4)'
let chart = null
export default {
components: {
uniEcCanvas
},
data() {
return {
ec: {
lazyLoad: true
},
option: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
}
},
methods: {
initChart(canvas, width, height, canvasDpr) {
console.log(canvas, width, height, canvasDpr)
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
chart.setOption(this.option)
return chart
},
},
onLoad() {
setTimeout(() => {
console.log(this.$refs)
}, 2000)
this.$refs.canvas.init(this.initChart)
},
}
</script>
// 这里一定要注意 设置该组件宽高 以及display:block来确保canvas初始化的时候是有宽高的
<style>
.uni-ec-canvas {
width: 100%;
height: 500rpx;
display: block;
margin-top: 30rpx;
}
</style>
注意:如果你想换echarts的js包(我们项目出现的问题是 我直接下在插件库的echarts.js 3000kb 但是微信小程序分包这个文件都比较大)可以选择echarts的官网去定制下载
ECharts 在线构建 (apache.org)
但是注意的是要下载版本为 5.2.2(别问为什么 我下载了最新版本报错了)