更新记录

1.0.4（2025-09-09）

1. 优化鸿蒙

1.0.3（2025-09-09）

1. 修复Android回调事件在某些机型的兼容性问题

1.0.2（2025-09-09）

1. 更新鸿蒙优化

平台兼容性

uni-app(4.07)

uni-app x(4.07)

其他

ECharts各种报表图标，支持点击效果，点击、双击等各种事件，支持iOS/Android/harmony

如果是uniapp X项目，请使用这个插件https://ext.dcloud.net.cn/plugin?name=wrs-uts-echartX

集成步骤

1. 集成插件，集成插件步骤请参考 https://www.cnblogs.com/wenrisheng/p/18323027

文档

组件

<!--  #ifdef  APP-HARMONY -->
<embed :style="'width:'+width+'px;height:'+height+'px;'" tag="echarts" :options="options"
    @onechartsevent="onEchartsEvent"></embed>
<!--  #endif -->
<!--  #ifndef  APP-HARMONY -->
<wrs-uts-echarts ref='echarts' :params="params" :style="'width:'+width+'px;height:'+height+'px;'"
    @onLoadView="onLoadView" @onEchartsEvent="onEchartsEvent"></wrs-uts-echarts>
<!--  #endif -->

• 使用了该组件的页面需要用nvue或uvue
• 属性params是json格式的字符串 如需测试各类图标，在官网https://echarts.apache.org/examples/zh/index.html#chart-type-bar点击想要的图标，进入到图标详情，拷贝左边代码的option赋值到下面的params.params节点，可参考demo

data() {
    let params = {
        business: "option",
        params: {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }],
            toolbox:{
                feature:{
                    saveAsImage:{
                        show: false // 隐藏右上角的下载按钮
                    }
                }
            }
        }
    };
    var isAndroid = false
    switch (uni.getSystemInfoSync().platform) {
        // android
        case 'android':
            isAndroid = true
            break;
            // ios
        default:
            isAndroid = false
            break;
    }
    const {
        windowWidth,
        windowHeight,
        statusBarHeight
    } = uni.getSystemInfoSync();
    let paramsStr = JSON.stringify(params)
    return {
        isAndroid: isAndroid,
        width: windowWidth,
        height: windowWidth,
        params: paramsStr,
        options: {
            params: paramsStr
        },
        title: 'Hello'
    }
}

• 事件onEchartsEvent

onEchartsEvent(e) {
    // android、ios、鸿蒙各端自己适配获取business参数，business表示事件类型
    console.log("onEchartsEvent:" + JSON.stringify(e))
    let business = ""
    let params = {}
    if (this.isAndroid) {
        business = e.detail.params.dynamicJSONFields.business
        params = e.detail.params.dynamicJSONFields.params.dynamicJSONFields
    } else {
        business = e.detail.params.business
        params = e.detail.params.params
    }
    console.log("业务business：" + business)
}

• 接口resize

let newParams = {
    business: "resize"
}

let newParamsStr = this.formatNewParams(newParams)
// android、ios
this.params = newParamsStr
// 鸿蒙
this.options = {
    params: newParamsStr
}

如需调用echarts更多接口请联系作者