news 2026/9/3 0:42:54

echarts4升级为echarts5的常见问题

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
echarts4升级为echarts5的常见问题

[ECharts] DEPRECATED: textStyle hierarchy in label has been removed since 4.0. All textStyle properties are configured in label directly now.

[ECharts]已弃用:标签中的textStyle层次结构自4.0以来已被删除。现在,所有textStyle属性都直接在标签中配置。

https://blog.csdn.net/qq_33489538/article/details/140325353

https://www.cnblogs.com/tanxj/p/18070040

series: [

{

type: 'map',

label: {

textStyle: { // textStyle 删除,没有这个属性了

fontSize: 13,

fontWeight: 600,

color: '#000',

}

}

}

]

emphasis 下是没有 textStyle 属性

emphasis: {

show: true, // 官方:是否显示标签; 自己的理解: 区域hover是否显示省份/直辖市等名称

textStyle: { // textStyle 删除,没有这个属性了

color: '#000' // hover时显示的省份/市等名称的颜色

}

}

axisLabel 中的 textStyle 层次结构已被删除

[ECharts] DEPRECATED: textStyle hierarchy in axisLabel has been removed since 4.0. All textStyle properties are configured in axisLabel directly now.

弃用:axisLabel中的textStyle层次结构自4.0以来已被删除。现在,所有textStyle属性都直接在axisLabel中配置。

axisLabel: { textStyle: { color: '#333', fontSize: 14 } }

ECharts 4.0 及之后 (新版写法)

axisLabel: { color: '#333', fontSize: 14 }

修改前 (旧版写法)

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed'],

axisLabel: {

show: true,

textStyle: { // 需要移除的层级

color: '#333',

fontSize: 14,

fontStyle: 'italic'

}

}

}

修改后 (新版写法)

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed'],

axisLabel: {

show: true,

color: '#333', // 原 textStyle 下的属性

fontSize: 14, // 直接提升到 axisLabel 下

fontStyle: 'italic' // 直接提升到 axisLabel 下

}

}

也就是去掉xAxis和 yAxis 的 textStyle,

title: 标题下面是有 textStyle 不要去掉

visualMap下是有textStyle属性的

visualMap: [

{

left: 40,

top: '4%',

seriesIndex: 1,

textStyle: {

color: '#333', // 圆点右侧的文字颜色

}

}

]

tooltip.textStyle 下是有textStyle属性的

tooltip: {

textStyle: {

color: '#333333',

fontSize: 12,

height: 42

}

}

title 下是有textStyle属性的

title: {

text: '标题',

top: 20, // 相对容器顶部的距离值

padding: [0, 0, 0, 20],

textStyle: { // 设置主标题的文字风格

color: '#333333', // 字体颜色

fontSize: 16, // 文字大小

fontWeight: 600,

},

itemGap: 20

},

legend 下的textStyle是存在的

legend: {

type: 'scroll',

orient: 'horizontal',

// textStyle: {

fontSize: 14,

color: '#333333', // 设置图例文本颜色

padding: [3, 0, 0, 0],

// },

data: backData.legend

}

itemStyle.emphasis已经被弃用

[ECharts] DEPRECATED: itemStyle.emphasis has been changed to emphasis.itemStyle since 4.0

弃用:itemStyle.emphasis 自4.0以来已更改为emphasis.itemStyle

itemStyle.emphasis ==> 更改为: emphasis.itemStyle

‌错误写法示例‌:

itemStyle: {

emphasis: {

color: 'red'

}

}

‌正确写法‌:

emphasis: {

itemStyle: {

color: 'red'

}

}

错误的写法

itemStyle: {

// 地图边框设置

normal: {

areaColor: '#D9D9D9', // 每个区域的颜色

borderColor: '#FFFFFF', // 每个区域的描边颜色

borderWidth: 0.5 // 每个区域的描边宽度

},

// hover效果

emphasis: {

borderColor: '#5c5c5c',

borderWidth: 0.5,

areaColor: {

type: 'linear',

x: 0,

y: 0,

x2: 0,

y2: 1,

colorStops: [

{

offset: 0,

color: '#D9D9D9' // 0% 处的颜色

}

],

globalCoord: false // 缺省为 false

}

}

},

正确的写法

itemStyle: {

// 地图边框设置

normal: {

areaColor: '#D9D9D9', // 每个区域的颜色

borderColor: '#FFFFFF', // 每个区域的描边颜色

borderWidth: 0.5 // 每个区域的描边宽度

},

},

// hover效果

emphasis: {

itemStyle:{

borderColor: '#5c5c5c',

borderWidth: 0.5,

areaColor: {

type: 'linear',

x: 0,

y: 0,

x2: 0,

y2: 1,

colorStops: [

{

offset: 0,

color: '#D9D9D9' // 0% 处的颜色

}

],

globalCoord: false // 缺省为 false

}

}

},

lineStyle.normal 属性已经被删除

[ECharts] DEPRECATED: 'normal' hierarchy in lineStyle has been removed since 4.0. All style properties are configured in lineStyle directly now.

[ECharts]已弃用:lineStyle中的“normal”层次结构自4.0以来已被删除。现在可以直接在lineStyle中配置所有样式特性

如果你之前是这样配置的:

series: [{

type: 'line',

lineStyle: {

normal: { // 应该被删除

color: 'green',

width: 2

}

}

}]

你应该将其修改为:

series: [{

type: 'line',

lineStyle: {

color: 'green',

width: 2

}

}]

itemStyle下没有normal

[ECharts] DEPRECATED: label.emphasis has been changed to emphasis.label since 4.0

DEPRECATED:从4.0开始,label.emphas 改为 emphasis.label

参考地址:https://zhuanlan.zhihu.com/p/526439319

旧版本:

"itemStyle": {

"normal": {

"areaColor": "#eeeeee",

"borderColor": "#999999",

"borderWidth": "0.5"

},

},

新版本:

"itemStyle": {

"areaColor": "#eeeeee",

"borderColor": "#999999",

"borderWidth": "0.5"

},

itemStyle下没有normal

[ECharts] DEPRECATED: 'normal' hierarchy in itemStyle has been removed since 4.0. All style properties are configured in itemStyle directly now.

index.vue:116[ECharts]已弃用:itemStyle中的“正常”层次结构自4.0以来已被删除。现在可以直接在itemStyle中配置所有样式属性。

写法(已废弃):

itemStyle: {

normal: {

color: '#62B4FF'

}

}

新版本正确写法:

itemStyle: {

color: '#62B4FF'

}

label下没有normal

DEPRECATED: 'normal' hierarchy in label has been removed since 4.0. All style properties are configured in label directly now.

自4.0以来,标签中的“normal”层次结构已被删除。现在,所有样式属性都直接在标签中配置。

ECharts 4.0 之前 label: { normal: { show: true, position: 'inside', color: '#fff' } }

ECharts 4.0 及之后 label: { show: true, position: 'inside', color: '#fff' }

修改前 (旧版写法):

label: {

normal: {

show: true,

position: 'inside',

color: '#fff',

fontSize: 12

}

}

修改后 (新版写法):

label: {

show: true,

position: 'inside',

color: '#fff',

fontSize: 12

}

series: [

{

// 地图块的配置相关信息

type: 'map',

map: nameMap,

zoom: 1.2,

// 地图上各个省份的名称哈

label: {

normal: {

show: true, // false隐藏省份的名称

// 各个区域-省/市名称样式设置 label下面现在没有textStyle

textStyle: {

fontSize: 13,

fontWeight: 600,

color: '#000'

}

},

// 文字hover颜色

emphasis: {

show: true, // 是否在高亮状态下显示标签。

textStyle: {

color: '#000'

} // 高亮状态下的标签文本样式。

}

},

}

]

更改为

label: {

// normal: {

show: true, // false隐藏省份的名称哈

// 各个区域-省份/市名称样式设置

// textStyle: {

fontSize: 13,

fontWeight: 600,

color: '#000',

// }

// },

// 文字hover颜色

// emphasis: {

// show: true, // 是否在高亮状态下显示标签。

// textStyle: {

// color: '#000'

// } // 高亮状态下的标签文本样式。

// }

},

echarts初始化时,没有宽度和高度

Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload

无法获取DOM宽度或高度。请检查dom.clientWidth和dom.clientHeight。它们不应该是0。例如,您可能需要在window.onload的回调中调用它

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/2 21:28:17

AWS SageMaker SDK 完整教程:从零开始云端训练你的模型 _

一、SageMaker介绍Amazon SageMaker 是 AWS 提供的全托管机器学习平台,它覆盖了从数据准备、模型训练、超参数调优到模型部署的完整流程,我们可以通过 SageMaker,轻松创建 Notebook 实例进行数据探索和实验,也可以使用AWS的计算资…

作者头像 李华
网站建设 2026/9/3 0:38:41

网型逆变器小干扰稳定性分析与控制策略优化:Simulink 仿真之旅

跟网型逆变器小干扰稳定性分析与控制策略优化simulink仿真模型和代码 现代逆变技术 阻抗重塑 双锁相环 可附赠参考文献(英文) 和一份与模型完全对应的中文版报告在现代逆变技术的广阔领域中,网型逆变器的小干扰稳定性分析以及控制策略优化&am…

作者头像 李华
网站建设 2026/9/2 21:46:57

探索机器人运动规划的奇妙世界:从路径插值到轨迹再现

机器人空间任意点位路径插值 s型速度曲线轨迹规划 实现机械臂指定非规则路径运动 拖动示教的轨迹再现在机器人的世界里,精准的运动控制就如同人类的灵动舞步,每一个动作都需要精心编排。今天咱们就来唠唠机器人空间任意点位路径插值、S 型速度曲线轨迹规…

作者头像 李华
网站建设 2026/9/2 22:40:23

自动驾驶汽车轨迹规划:人工势场法与MPC联合仿真探索

人工势场法换道主动避撞加mpc模型预测控制,carsim和simulink联合仿真,有规划和控制轨迹对比图。 跟踪误差良好,可以作为学习人工势场方法在自动驾驶汽车轨迹规划上的应用资料。在自动驾驶领域,轨迹规划与控制是保障行车安全与高效…

作者头像 李华
网站建设 2026/9/2 2:03:32

用长短期记忆网络融合注意力机制做时间序列预测,效果惊人

基于长短期记忆网络融合注意力机制的多变量时间序列预测,预测精度很高。 评价指标: RMSE 0.08024 MSE 0.0064385 MAE 0.071505 MAPE 0.05383在时间序列预测的领域里,多变量时间序列预测一直是个很有挑战性但又特别重要的任务。它广泛应…

作者头像 李华
网站建设 2026/9/2 19:43:24

端到端智驾仿真优选:aiSim破解场景生成、传感器融合核心难题

随着自动驾驶迈入端到端时代,“端到端已来,智驾仿真测试怎么做?”成为研发核心痛点。传统模块化仿真因接口缺失、保真度不足、场景覆盖有限,难以适配端到端模型全链路验证需求。康谋aiSim仿真工具凭借ISO 26262 ASIL-D认证、全链路…

作者头像 李华