【ECharts图表组件】支持官方所有图表在各类小程序和APP使用

更新记录

1.3.0（2025-02-12）下载此版本

新增切换全屏, 退出全屏的示例
新增横屏示例 (切换XY轴配置实现, 而非css旋转90度)
新增canvasToTempFilePath的方法, 简化保存图表为图片的逻辑
兼容旧版canvas, 解决APP端无法在图表中显示图片和动态改变宽高的问题

1.2.0（2025-02-07）下载此版本

feat: 支持vite+vue3分包
fix: 修复抖音小程序vue3真机渲染失败的问题

1.1.0（2025-01-21）下载此版本

不采用npm安装echart的方式,因为node_modules无法打进子包,改为引用在线定制和ESM的echart.min.js

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
app-vue	×	√	√	×	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序	鸿蒙元服务
√	×	√	√	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

适配Apache ECharts的图表组件，支持ECharts官方所有图表在各类小程序和APP使用，支持vue2、vue3

本组件不造轮子，只是对 Apache ECharts 做了uni适配，从而支持 ECharts官方所有图表在各类小程序和APP使用
用法非常简单，您只需在 ECharts示例面板调好配置，然后传给本组件即可

快速入门

1. 在插件市场导入本组件

2. 在具体页面中使用

vue2示例 :

<template>
    <view>
        <e-chart ref="echartRef" @ready="initEchart" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 支持echarts所有图表,您只需替换此处option即可展示任意图表
                option: { 
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    },
                    yAxis: { type: 'value' },
                    series: [{
                        data: [12, 20, 15, 8, 7, 11, 13],
                        type: 'bar',
                    }],
                    grid: [{ left: 50, right: 15, top: 40, bottom: 30 }],
                    tooltip: { show: true },
                },
            };
        },
        methods: {
            // 组件挂载后初始化echarts实例 (也可在请求数据后初始化)
            initEchart() { 
                this.$refs.echartRef.init(this.option);
            },
            // 异步更新数据或配置
            setOption() {
                this.option.series[0].data = [14, 11, 19, 12, 8, 7, 20];

                this.option.yAxis.axisLabel = {
                    color: '#ff0000',
                    formatter(value) {
                        return `${value}g`; // 支持function属性
                    },
                };

                // 执行更新
                this.$refs.echartRef.setOption(this.option);
            }
        }
    }
</script>

vue3示例 :

<template>
    <view>
        <e-chart ref="echartRef" @ready="initEchart" />
    </view>
</template>

<script setup>
    import { ref } from 'vue';

    // echart组件的ref
    const echartRef = ref(null);

    // 支持echarts所有图表,您只需替换此处option即可展示任意图表
    // const option = ref({}) // 不必声明为响应式对象,普通对象即可
    const option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: { type: 'value' },
        series: [{
            data: [12, 20, 15, 8, 7, 11, 13],
            type: 'bar',
        }],
        grid: [{ left: 50, right: 15, top: 40, bottom: 30 }],
        tooltip: { show: true },
    };

    // 组件挂载后初始化echarts实例 (也可在请求数据后初始化)
    function initEchart() { 
        echartRef.value.init(option);
    }

    // 异步更新数据或配置
    function setOption() {
        option.series[0].data = [14, 11, 19, 12, 8, 7, 20];

        option.yAxis.axisLabel = {
            color: '#ff0000',
            formatter(value) {
                return `${value}g`; // 支持function属性
            },
        };

        // 执行更新
        echartRef.value.setOption(option);
    }
</script>

组件属性

<e-chart ref="echartRef" @ready="initEchart" width="100%" :height="600" :disable-scroll="false"/>

属性	类型	说明	必填	默认值
width	Number,String	图表宽度(数字默认rpx,字符串时需写完整单位如`300px`)	否	'100%'
height	Number,String	图表高度(数字默认rpx,字符串时需写完整单位如`300px`)	否	600
disableScroll	Boolean	在图表区域内触摸移动时,是否禁止页面滚动	否	false

图表实例

图表init之后会返回实例对象echartObj, 也可以通过ref直接获取
实例对象支持的方法与官方的echartsInstance一致

async initEchart() {
  // 组件挂载后初始化echarts实例 (await之后可获取echartObj对象)
  const { echartObj } = await this.$refs.echartRef.init(this.option); // vue2
  // const { echartObj } = await echartRef.value.init(option); // vue3

  // 也可以直接通过ref获取
  const echartObj = this.$refs.echartRef.echartObj; // vue2
  // const echartObj = echartRef.value.echartObj; // vue3

  // 调用实例方法
  echartObj.showLoading(); // 显示加载动画效果
  echartObj.hideLoading(); // 隐藏加载动画效果
  echartObj.setOption(option); // 更新配置
  echartObj.on('xx', fn); // 绑定事件
}

图表事件

touch事件支持返回点中图表元素的信息, 如seriesIndex, dataIndex, componentIndex, value等

<e-chart ref="echartRef" />

async initEchart() {
  // 组件挂载后初始化echarts实例 (await之后可获取echartObj对象)
  const { echartObj } = await this.$refs.echartRef.init(this.option); // vue2
  // const { echartObj } = await echartRef.value.init(option); // vue3

  let lastMoveEvent = null; // 记录最近一次move的值

  echartObj.on('mousedown', (e) => {
    console.log('mousedown', e);
    uni.showToast({ title: `下标${e.dataIndex + 1}, 值为${e.data}`, icon: 'none' })
  });

  echartObj.on('mousemove', (e) => {
    console.log('mousemove', e);
    lastMoveEvent = e;
  });

  // 'mouseup'需通过getZr()监听, 元素信息取最后一次move的值
  echartObj.getZr().on('mouseup', () => {
    if (lastMoveEvent) {
        console.log('mouseup', lastMoveEvent);
        lastMoveEvent = null;
    }
  });
}

横屏全屏

1.3.0版本开始提供切换横屏, 切换全屏的示例, 建议下载参考

保存图片

methods: {
    // 图表canvas转图片,并保存到相册 (具体可参考示例)
    async save() {
        // 显示加载进度,避免重复点击...(略)
        // 判断并引导用户打开'保存到相册'的权限...(略)

        // 图表canvas转文件
        const filePath = await this.$refs.echartRef.canvasToTempFilePath(); // vue2
        // const filePath = await echartRef.value.canvasToTempFilePath(); // vue3

        // #ifndef H5
        // APP和小程序: 保存到相册
        uni.saveImageToPhotosAlbum({
            filePath,
            success() {
                uni.showToast({ title: '保存成功' });
            },
            fail(e) {
                if (!e.errMsg.includes('cancel')) {
                    uni.showModal({ title: '保存失败', content: JSON.stringify(e), showCancel: false });
                }
            },
        });
        // #endif

        // #ifdef H5
        // H5端: 直接下载
        const link = document.createElement('a');
        link.href = filePath;
        link.download = `${Date.now()}.png`;
        document.body(link);
        link.click();
        document.body.removeChild(link);
        // #endif
    }
}

常见问题

1. 小程序如何减少打包体积

使用ECharts在线定制的echarts.min.js替换/components/e-chart/echarts.min.js即可
注: vite不支持require, 所以vite+vue3无法通过在线定制减少打包体积, 应采用分包策略减少主包大小

2. 小程序如何减少主包大小

使用分包
把/uni_modules/e-chart/目录下的components文件夹拷贝到子包
使用组件的时候需显式导入组件: import EChart from '../components/e-chart/e-chart.vue';
可下载示例,里面的vue3示例是采用分包的,建议参考

3. 如何替换echarts版本

vue2使用的是echarts.min.js, 是CJS规范, 直接在线定制选择版本替换即可
vue3使用的是echarts.esm.min.js, 是ESM规范. 首先在任意目录npm install echarts, 找到/node_modules/echarts/dist/echarts.esm.min.js替换即可

4. 组件层级太高,遮住了fixed元素

真机正常，一定要以真机为准

5. 示例运行不了

示例不是cli创建的, 应在HBuilderX运行
检查manifest.json的vue版本是否正确, 不可选vue3版本去编译vue2示例
试试关闭开发工具的ES6转ES5, 尤其是支付宝小程序

6. ECharts官网配置正常,拷贝到具体项目就不生效

确保echarts.min.js是完整的,检查在线定制是否漏掉资源, 可临时替换为示例的echarts.min.js
编译为其他平台看看是否正常，比如H5 或微信小程序
在示例项目运行相关配置看看是否正常
运行到真机看看是否正常

7. 为什么不使用props传递option

props不支持传递function属性, 所以设计为通过ref设置option

8. 为什么不使用npm安装的echarts

尽管npm安装的echarts支持按需引入，减少打包体积，但node_modules终究是无法移到子包的