uniapp引入插件市场echarts图表（l-echart）实现小程序端图表，并修改源码简化使用

深藏阁楼爱情的钟 2024-02-05 12:19 18阅读 0赞

#### 使用的uniapp插件:`l-echart` ####

[https://ext.dcloud.net.cn/plugin?id=4899][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][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-echart
                ref="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>

[https_ext.dcloud.net.cn_plugin_id_4899]: https://ext.dcloud.net.cn/plugin?id=4899
[https_echarts.apache.org_zh_builder.html]: https://echarts.apache.org/zh/builder.html