更新记录

1.4.1（2025-08-14） 下载此版本

1. 新增render属性,鸿蒙默认以webview的方式渲染,提高图表兼容性
2. 支持nvue,并提供相关示例

1.4.0（2025-08-08） 下载此版本

1. 支持uni-app x, 并提供相关示例, 已真机测试鸿蒙,Android,iOS,微信小程序,h5
2. 新增动态切换暗黑主题的示例

1.3.1（2025-07-16） 下载此版本

1. 解决mouseup事件不触发的问题
2. 解决点击legend没有反应的问题

平台兼容性

云端兼容性

uni-app(4.07)

uni-app x(4.07)

其他

【ECharts图表】支持官方所有图表的uni-app组件，支持vue2、vue3、分包、nvue、鸿蒙、uts、uniapp x

1. 本组件不造轮子，只是对 Apache ECharts 做了uni适配，从而支持 ECharts官方所有图表 在各类小程序和APP使用

2. 用法非常简单，您只需在 ECharts示例面板 调好配置，然后传给本组件即可

快速入门

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

2. 在具体页面中使用

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

uni-app vue3示例 / uni-app x 示例:

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

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

    // echart组件的ref
    const echartRef = ref(null); // uni-app vue3
    // const echartRef = ref<EChartComponentPublicInstance | null>(null); // uni-app x 组合式 (^1.4.0)
    // const echartRef = this.$refs['echartRef'] as EChartComponentPublicInstance; // uni-app x 选项式 (^1.4.0)

    // 支持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); // uni-app vue3 和 uni-app x 组合式
        // echartRef.init(option); // uni-app x 选项式
    }

    // 异步更新数据或配置
    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); // uni-app vue3 和 uni-app x 组合式
        // echartRef.setOption(option); // uni-app x 选项式
    }
</script>

组件属性

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

图表实例

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

// const echartRef = ref(null); // uni-app vue3
// const echartRef = ref<EChartComponentPublicInstance | null>(null); // uni-app x 组合式 (^1.4.0)
// const echartRef = this.$refs['echartRef'] as EChartComponentPublicInstance; // uni-app x 选项式 (^1.4.0)

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

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

  // uni-app x 组合式只能通过ref获取
  // await echartRef.value.init(option);
  // const echartObj = echartRef.value.getEchartObj();

  // uni-app x 选项式只能通过ref获取
  // await echartRef.init(option);
  // const echartObj = echartRef.getEchartObj();

  // 调用实例方法
  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); // uni-app vue2

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

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

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

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

横屏全屏

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

保存图片

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

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

        // #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. 小程序如何减少主包大小

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

3. 如何替换echarts版本

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

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

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

5. 示例运行不了

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

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

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

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

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

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

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

9. 为什么不触发mouseup事件,为什么点击legend没有反应

至少更新到1.3.1版本

10. uniapp x 如何适配

至少更新到1.4.0版本

11. 鸿蒙APP如何适配

至少更新到1.4.1版本

12. nvue 如何适配

至少更新到1.4.1版本