最近不少开发者反馈在 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 的鸿蒙平台上使用。
解决方案：
在下方提供了替换文件
可以更新到 4.65 解决无法使用的问题
鸿蒙系统可以展示了，但是不完美，我这展示不了饼图，显示空白。可以显示柱状图
回复 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 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位
京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001