vue3+uni-app微信小程序引入lime-echart并使用
5.由于微信小程序体积有限,因此我们按需引入资源即可,这里我需要饼图和折线在线定制。6.将echarts.min.js替换static下的echarts.min.js。3.将这个两个文件入项目根目录src下的components,没有就创建一个。9.运行npm: dev:mp-weixin 在 真机测试查看。2.解压压缩包,双击打开component。4.将这四个文件放入static。7.在需要使
·
1.到插件市场下插件lime-echart载压缩包
2.解压压缩包,双击打开component

3.将这个两个文件入项目根目录src下的components,没有就创建一个。

4.将这四个文件放入static

5.由于微信小程序体积有限,因此我们按需引入资源即可,这里我需要饼图和折线在线定制 echarts.min.js



6.将echarts.min.js替换static下的echarts.min.js
7.在需要使用的页面引用,
<template>
<l-echart ref="lineRef"></l-echart>
</template>
<script setup>
import lEchart from '@/components/l-echart/l-echart.vue'
const echarts = require('../../static/echarts.min.js') // 引入echarts.min.js文件
const lineRef = ref(null) // 获取echarts实例
const optionLine = ref({
// 折线图配置项
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
name: '近一年销售额趋势',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
areaStyle: {
color: '#E8F2FF', // 阴影颜色
},
smooth: true,
},
],
})
onShow(() => {
setTimeout(async () => {
if (lineRef.value) {
// 确保echarts实例已经创建完毕
const myChart = await lineRef.value.init(echarts)
myChart.setOption(optionLine.value)
lineRef.value.resize()
}
}, 1000)
})
</script>
8.安装Echart
npm install echarts
9.运行npm: dev:mp-weixin 在 真机测试查看
更多推荐
所有评论(0)