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的回调中调用它