uniapp和vue3项目中引入echarts 、lime-echart（微信小程序、H5等） - 实践

目录标题

• 1、获取 lime-echart插件
• 2、安装 echarts
• 3、相关代码
• 4、在线定制
• 5、效果截图

1、获取 lime-echart插件

https://gitee.com/liangei/lime-echart
将其中组件和静态资源分别放入当前项目对应的文件夹中：

2、安装 echarts

npm install echarts --save

具体查看官网，进行按需或者全局引入
如果只需要支持微信小程序，那可以不用单独安装echarts。

3、相关代码

<template>
  <view style="width:750rpx; height:750rpx">
    <l-echart ref="chartRef">
      <
      /l-echart>
      <
      /view>
      <
      /template>
      <script setup>
        import { ref, onMounted
        } from 'vue'
        // #ifdef H5
        import * as echarts from 'echarts'
        // #endif
        // #ifdef MP-WEIXIN
        // 一定要确保使用相对路径引入,不支持别名方式，比如@，使用了可能会出现获取不到问题
        const echarts = require('../../static/echarts.min')
        // #endif
        console.log(echarts,'echarts!!!!!!')
        const chartRef = ref(null)
        const option = {
        xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
        type: 'value',
        },
        series: [
        {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        },
        ],
        }
        onMounted(() =>
        {
        // 组件能被调用必须是组件的节点已经被渲染到页面上
        setTimeout(async () =>
        {
        if (!chartRef.value) return
        const myChart = await chartRef.value.init(echarts)
        myChart.setOption(option)
        }, 300)
        })
        <
        /script>
        <style lang="scss" scoped>
          <
          /style>

4、在线定制

https://echarts.apache.org/zh/builder.html
由于引入的插件使用的完整的echarts.js文件相对较大，而在小程序中当然是体积越小越好，就自己可以定制下载。选择自己需要的图表组件等，下载后，替换static/echarts.min.js文件。

5、效果截图