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、效果截图

相关推荐
2501_916008895 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
2501_915921436 小时前
“HTTPS 个人化”实战,个人站点与设备调试的部署、验证与抓包排查方法
网络协议·http·ios·小程序·https·uni-app·iphone
菜鸟una6 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
從南走到北8 小时前
JAVA国际版一对一视频交友视频聊天系统源码支持H5 + APP
java·微信·微信小程序·小程序·音视频·交友
從南走到北8 小时前
同城派送小程序
微信·微信小程序·小程序
小二·8 小时前
从零开始:使用 Vue-ECharts 实现数据可视化图表功能
vue.js·信息可视化·echarts
技术小丁9 小时前
uni-app 广告弹窗最佳实践:不扰民、可控制频次、含完整源码
前端·uni-app·1024程序员节
腾讯云云开发11 小时前
3小时上线!云开发“零运维”外卖小程序指南
微信小程序·ai编程·小程序·云开发
腾讯云云开发11 小时前
云开发1天极速开店!1人搞定全流程
微信小程序·ai编程·小程序·云开发
腾讯云云开发11 小时前
预约+会员+营销全功能覆盖,1 小时上架美业小程序
低代码·微信小程序·小程序·云开发