uniapp和vue3项目中引入echarts 、lime-echart(微信小程序、H5等)

目录标题

1、获取 lime-echart插件

https://gitee.com/liangei/lime-echart

将其中组件和静态资源分别放入当前项目对应的文件夹中:

2、安装 echarts

复制代码
npm install echarts --save

具体查看官网,进行按需或者全局引入

如果只需要支持微信小程序,那可以不用单独安装echarts。

3、相关代码

js 复制代码
<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、效果截图

相关推荐
用户3266094936177 小时前
Echarts常用配置项参数总结
echarts
2501_915918419 小时前
Video over HTTPS,视频流(HLSDASH)在 HTTPS 下的调试与抓包实战
网络协议·http·ios·小程序·https·uni-app·iphone
鱼樱前端11 小时前
uni-app快速入门章法(一)
前端·uni-app
Q_Q51100828512 小时前
python+springboot+uniapp基于微信小程序的任务打卡系统
spring boot·python·django·flask·uni-app·node.js·php
李慕婉学姐12 小时前
【开题答辩过程】以《基于SpringBoot+Vue+uni-app的智慧校园服务系统的设计与实现》为例,不会开题答辩的可以进来看看
spring boot·uni-app
withoutfear12 小时前
uni-app 开发H5软键盘会顶起底部内容的解决方案
uni-app·软键盘
小咕聊编程12 小时前
【含文档+PPT+源码】基于微信小程序的房屋租赁系统
微信小程序·小程序·房屋租赁
云起SAAS12 小时前
菜谱食谱抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·菜谱食谱
影子信息12 小时前
uniapp 日历组件 uni-datetime-picker
前端·uni-app
不知名的前端专家12 小时前
uniapp 安卓FTP上传下载操作原生插件
android·uni-app