更新记录

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

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

1.0.0（2025-01-20） 下载此版本

初次发布，支持vue2和vue3
支持H5，APP，小程序(真机实测过微信,支付宝,钉钉,抖音,京东,飞书小程序)

平台兼容性

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

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

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

快速入门

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

如果是cli项目,则下载插件到/src/uni_modules目录

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

图表实例

图表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;
    }
  });
}

保存图片

初始化echarts实例之后会返回echartCanvas, echartCanvasId, 可先把图表canvas对象转为图片, 再保存到相册
具体细节可下载示例项目查看

methods: {
    async initEchart() {
        const res = await this.$refs.echartRef.init(this.option); // vue2

        // 图表的canvas对象需在await后获取
        this.echartCanvas = res.echartCanvas;
        this.echartCanvasId = res.canvasId;
    },

    // 图表canvas转图片,并保存到相册
    save() {
        // #ifdef MP
        uni.canvasToTempFilePath({
            canvas: this.echartCanvas, // 小程序是canvas对象
            success: ({tempFilePath}) => {
                // 调用saveImageToPhotosAlbum保存图片
            }
        });
        // #endif

        // #ifdef APP
        uni.canvasToTempFilePath({
            canvasId: this.echartCanvasId, // APP端是canvas_id
            success: ({tempFilePath}) => {
                // 调用saveImageToPhotosAlbum保存图片
            }
        });
        // #endif
    },

常见问题

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

使用ECharts在线定制的echart.js替换static的echarts.min.js即可

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

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

3. 如何替换echarts版本

1. 小程序使用的是static目录的echarts.min.js, 是CJS规范, 直接在线定制选择版本替换即可
2. H5和APP使用的是e-chart目录下的echarts.esm.min.js, 是ESM规范, 首先在任意目录npm install echarts, 找到/node_modules/echarts/dist/echarts.esm.min.js替换即可

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

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

5. 为什么要通过ref设置option

因为option的function属性不支持通过props传递

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

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