使用的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
左右大小
页面中使用的用法
dart
<template>
<view class="charts-box">
<l-echart ref="chart" @finished="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
源码,简化组件用法:
1.组件中直接引入echarts.min.js
2.props
增加option
传参
3.watch
中监听option
传参
4.mounted
中直接执行init
方法初始化图表
5.init
方法中调用setOption
方法
6.加入uni.onWindowResize
方法监听宽高变化,然后调用原本就实现的resize
方法
js
import * as echarts from "@/package-pc/pages/components/lime-echart/static/echarts.min.js";
export default {
name: "lime-echart",
props: {
...
option: {
type: Object,
},
},
watch: {
option: {
handler() {
this.setOption(this.option);
},
deep: true,
},
},
mounted() {
this.$nextTick(async () => {
this.$emit("finished");
await this.init();
});
},
methods:{
...
async init(...args) {
// #ifndef APP-NVUE
// if (arguments && arguments.length < 1) {
// console.error(
// "缺少参数:init(echarts, theme?:string, opts?: object, callback?: function)"
// );
// return;
// }
// #endif
...
this.chart = echarts.init(
config.canvas,
theme,
Object.assign({}, config, opts)
);
this.chart.setOption(this.option ?? {});
uni.onWindowResize(() => {
this.resize();
});
...
},
}
修改后的页面用法
直接传参option给组件,请求接口后修改option即可
dart
<template>
<view class="charts-box">
<l-echart :option="option1" class="charts-box"></l-echart>
</view>
</template>
<script>
import LEchart from "@/package-pc/pages/components/lime-echart/components/l-echart/l-echart.vue";
import option from "@/package-pc/pages/monthreport/option";
export default {
components: {
LEchart,
},
data() {
return {
option: option,
};
},
// 修改option即可
methods: {
async setText() {
this.option.title.text = "test"
},
},
};
</script>
<style scoped>
/* 请根据实际需求修改父元素尺寸,组件自动识别宽高 */
.charts-box {
width: 100%;
height: 600px;
}
</style>