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 在 真机测试查看
 

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐