DCloud_UNI_yuhe
DCloud_UNI_yuhe
  • 发布:2025-04-23 16:58
  • 更新:2025-07-25 14:00
  • 阅读:538

uniapp 鸿蒙平台 Echarts 无法使用的解决方案

分类:鸿蒙Next

最近不少开发者反馈在 uniapp 鸿蒙平台上, Echarts 无法使用,现经过排查,不能使用的原因公布如下:

在 echats源码中 经过 build 之后的产物 : echarts.esm.js 和 echarts.js 中

含有wx对象:

if (typeof wx === 'object' && typeof wx.getSystemInfoSync === 'function') {  
    env.wxa = true;  
    env.touchEventsSupported = true;  
}

在非鸿蒙平台,之前对 wx 对象做了兼容,因此能够在 uniapp 上运行,在鸿蒙平台上未做兼容,导致了 Echarts 无法在 uniapp 的鸿蒙平台上使用。

解决方案:

  1. 等待 HbuilderX 更新,在修复之后更新版本即可解决 , 更新后版本在本帖同步
  2. 手动修改Echarts源码,将wx对象,改为uni对象

在下方提供了替换文件

可以更新到 4.65 解决无法使用的问题

2025-04-23 16:58 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

感谢大佬!!!

wenju

wenju - 低调低调

果然更新到4.75版本的HBuilderX就可以了,真棒

hello2026

hello2026

鸿蒙系统可以展示了,但是不完美,我这展示不了饼图,显示空白。可以显示柱状图

  • DCloud_UNI_yuhe (作者)

    有什么报错信息吗?或者提供一下一个可以复现的项目

    2025-07-25 19:10

  • hello2026

    回复 DCloud_UNI_yuhe:

    https://ext.dcloud.net.cn/plugin?id=21932

    我用的是上面插件demo,测试了默认的柱状图是可以,改成饼图就不显示了。其他插件我也试过,都是不显示饼图。

    demo代码太大上传不了


    图表代码如下:

    <template>

    <view class="page-wrap">

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


        <view class="btn" @click="setOption">异步更新配置</view>  

    <view class="btn" @click="setOptionFn">测试function属性</view>

    <view class="btn" @click="setOptionImg">测试图片属性</view>
    </view>

    </template>


    <script setup>

    import { ref } from 'vue';

    import EChart from '../components/e-chart/e-chart.vue';


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

    // 支持echarts所有图表,您只需替换此处option即可展示任意图表
    // const option = ref({}) // 不必声明为响应式对象,普通对象即可
    const option = {
    title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
    },
    tooltip: {
    trigger: 'item'
    },
    legend: {
    orient: 'vertical',
    left: 'left'
    },
    series: [
    {
    name: 'Access From',
    type: 'pie',
    radius: '50%',
    data: [
    { value: 1048, name: 'Search Engine' },
    { value: 735, name: 'Direct' },
    { value: 580, name: 'Email' },
    { value: 484, name: 'Union Ads' },
    { value: 300, name: 'Video Ads' }
    ],
    emphasis: {
    itemStyle: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
    }
    }
    ]
    };

    // 组件挂载后初始化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}g' };

    echartRef.value.setOption(option);
    }

    // 测试function属性
    function setOptionFn() {
    option.yAxis.axisLabel = {
    color: '#4365ff',
    formatter(value) {
    return `${value}克`;
    },
    }

    echartRef.value.setOption(option);
    }

    // 测试图片属性
    function setOptionImg() {
    option.yAxis.axisLabel = {
    color: '#fff',
    padding: 6,
    backgroundColor: {
    image: 'https://img1.baidu.com/it/u=3074056969,2363455194&fm=253&fmt=auto&app=138&f=JPEG?w=533&h=300'
    }
    }

    echartRef.value.setOption(option);
    }

    </script>


    <style>

    .page-wrap {

    padding: 16rpx;

    }


    .btn {  
    margin: 24rpx;
    padding: 24rpx;
    background-color: black;
    color: #fff;
    }

    </style>

    2025-07-28 10:25

  • DCloud_UNI_yuhe (作者)

    回复 h***@qq.com: 您可以私信我或者删除unpackage产物之后重新上传一个可以运行的项目

    2025-07-28 10:26

  • hello2026

    回复 DCloud_UNI_yuhe: 私信发你了

    2025-07-28 10:59

  • DCloud_UNI_yuhe (作者)

    回复 h***@qq.com: 好的

    2025-07-28 11:05

要回复问题请先登录注册