当前位置: 首页 > article >正文

unaipp引入echarts图表,小程序端能正常显示打包

使用的uniapp插件:l-echart

https://ext.dcloud.net.cn/plugin?id=4899

注意事项

1.因为小程序有主包分包大小限制,并且uni_modules中的包也会算在主包体积中,而我项目中的图表是在分包中使用的,所以我移动uni_modules中的l-echart图表组件到分包目录组件文件夹中
2.精简echarts.min.js体积,因为需求中只需要柱图和饼图,所以我去https://echarts.apache.org/zh/builder.html下载指定的 echarts 组件压缩包,然后替换l-echart中的echarts.min.js文件,只需要500kb左右大小

页面中使用
<template>
    <view class="charts-box">
      <l-echart ref="chart" ="init" class="charts-box"></l-echart>
    </view>
</template>

<script>
import LEchart from "@/package-pc/pages/components/lime-echart/components/l-echart/l-echart.vue";
import * as echarts from "@/package-pc/pages/components/lime-echart/static/echarts.min.js";
import option from "@/package-pc/pages/monthreport/option";
export default {
  components: {
    LEchart,
  },
  data() {
    return {
      option: option,
    };
  },
  // 使用组件的finished事件里调用
  methods: {
    async init() {
      const chart = await this.$refs.chart.init(echarts);
      chart.setOption(this.option);
    },
  },
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸,组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 600px;
}
</style>

修改l-echart源码屏幕宽高变化时更新图表宽高

加入uni.onWindowResize方法监听宽高变化,然后调用源码中原本就实现的resize方法

 mounted() {
    this.$nextTick(() => {
      this.$emit("finished");
      uni.onWindowResize(() => {
        this.resize();
      });
    });
  },

http://www.kler.cn/a/158928.html

相关文章:

  • Kafka简单实践
  • Spring Boot教程之Spring Boot简介
  • 面试经典 150 题:20、2、228、122
  • 正则表达式语法详解(python)
  • 【流量分析】常见webshell流量分析
  • 【.NET 8 实战--孢子记账--从单体到微服务】--简易权限--完善TODO标记的代码
  • 智能优化算法应用:基于堆优化算法无线传感器网络(WSN)覆盖优化 - 附代码
  • CC++内存管理方式
  • 第18章 C++11标准库(STL)
  • Spring Cloud + Vue前后端分离-第3章 SpringBoot项目技术整合
  • 亚马逊云科技AI创新应用下的托管在AWS上的数据可视化工具—— Amazon QuickSight
  • Hadoop学习笔记(HDP)-Part.07 安装MySQL
  • 生产实践:Redis与Mysql的数据强一致性方案
  • Http中post和get
  • 【华为OD题库-055】金字塔/微商-java
  • C++之枚举与宏定义
  • C++智能指针及简单实现
  • 力扣第374场周赛题解
  • Linux配置SFTP用户的详细过程
  • selenium原理
  • 什么是vue的计算属性
  • GSLB是什么?谈谈对该技术的一点理解
  • 使用Redis实现购物车后端处理
  • vmware ubuntu22 安装vmtools并设置共享文件夹
  • acwing算法提高之动态规划--最长上升子序列模型(下)
  • java项目日常运维需要的文档资料