使用的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" @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源碼，簡化組件用法（不推薦用法）：

這樣寫有一個重大問題，uniapp不支持props傳遞的對象里面屬性有function，而echarts這樣的屬性很多，所以不推薦這樣修改源碼，這里只是記錄一下我嘗試封裝的思路過程

1.組件中直接引入echarts.min.js
2.props增加option傳參
3.watch中監聽option傳參
4.mounted中直接執行init方法初始化圖表
5.init方法中調用setOption方法
6.加入uni.onWindowResize方法監聽寬高變化，然后調用原本就實現的resize方法

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(() => {this.$emit("finished");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即可

<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>

第二次嘗試，修改l-echart源碼，簡化組件用法（推薦用法）：

做的工作其實就是把echarts放在組件里面使用了，頁面中就不用導入了，同時組件內部做了init初始化圖表，頁面中setOption就行了

import * as echarts from "@/package-pc/pages/components/lime-echart/static/echarts.min.js";
export default {name: "lime-echart",mounted() {this.$nextTick(async () => {await this.init();this.$emit("finished");});},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));uni.onWindowResize(() => {this.resize();});...},}

修改后的頁面用法

<template><view class="charts-box"><l-echartref="chart":option="option"@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 option from "@/package-pc/pages/monthreport/option";
export default {components: {LEchart,},data() {return {option: option,};},// finished回調中設置option，接口請求圖表數據也放在這里methods: {init() {this.$refs.chart.setOption(this.option);},},
};
</script><style scoped>
/* 請根據實際需求修改父元素尺寸，組件自動識別寬高 */
.charts-box {width: 100%;height: 600px;
}
</style>