uniapp plugin used:l-echart
https://ext.dcloud.net.cn/plugin?id=4899
Precautions
1. Because the mini program has a sub-package size limit for the main package, and the packages in uni_modules will also be counted in the main package volume, and the charts in my project are sub-packaged. used in uni_modules, so I moved the l-echart chart component in to the component folder of the subpackage directory
2. Streamline< /span> a> Left and right size, only file in Download the specified echarts component compressed package, and then replace the https://echarts.apache.org/zh/builder.htmlecharts.min.jsVolume, because the requirements only require column charts and pie charts, so I went tol-echartecharts.min.js500kb
Usage on the page
<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>
First try, modifyl-echart source code, simplify component usage (not recommended):
There is a major problem with writing this way. uniapp does not support functions in the attributes of objects passed by props, and echarts has many attributes, so it is not recommended to modify the source code in this way. Here I just record the thought process of my attempt to encapsulate it.
1. Directly introduced into the componentecharts.min.js
2.propsAddedoptionparameter passing
3. Monitor in Pass parameters 4. Directly execute in < /span> method method to monitor the width and height changes, and then call the originally implemented 6. Add the methodmethod in 5. Calling Method initialization chartwatchoptionmountedinitinitsetOptionuni.onWindowResizeresize
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();
});
...
},
}
Modified page usage
Directly pass the parameter option to the component and modify the option after requesting the interface.
<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>
Second attempt, modifyl-echart source code, simplify component usage (recommended usage):
The work done is actually to put echarts in the component and use it. There is no need to import it in the page. At the same time, the init initialization chart is done inside the component. Just setOption in the page.
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();
});
...
},
}
Modified page usage
<template>
<view class="charts-box">
<l-echart
ref="chart"
:option="option"
="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>