本文介绍: 中的包也会算在主包体积中，而我项目中的图表是在分包中使用的，所以我移动。下载指定的 echarts 组件压缩包，然后替换。体积，因为需求中只需要柱图和饼图，所以我去。1.因为小程序有主包分包大小限制，并且。图表组件到分包目录组件文件夹中。
使用的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();
});
});
},
原文地址:https://blog.csdn.net/qq_42611074/article/details/134811189
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_48068.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
