echarts4升级为echarts5的常见问题

series下 label 下是没有 textStyle 属性

[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

1. series: [
2.   {
3.     type: 'map',
4.     label: {
5.       textStyle: { // textStyle 删除，没有这个属性了
6.         fontSize: 13,
7.         fontWeight: 600,
8.         color: '#000',
9.       }
10.     }
11.   }
12. ]

复制代码

emphasis 下是没有 textStyle 属性

1. emphasis: {
2.   show: true, // 官方:是否显示标签; 自己的理解: 区域hover是否显示省份/直辖市等名称
3.   textStyle: { // textStyle 删除，没有这个属性了
4.     color: '#000' // hover时显示的省份/市等名称的颜色
5.   }
6. }

复制代码

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中配置。

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

复制代码

ECharts 4.0 及之后 (新版写法)

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

复制代码

修改前 (旧版写法)

1. xAxis: {
2.   type: 'category',
3.   data: ['Mon', 'Tue', 'Wed'],
4.   axisLabel: {
5.     show: true,
6.     textStyle: { // 需要移除的层级
7.       color: '#333',
8.       fontSize: 14,
9.       fontStyle: 'italic'
10.     }
11.   }
12. }

复制代码

修改后 (新版写法)

1. xAxis: {
2.   type: 'category',
3.   data: ['Mon', 'Tue', 'Wed'],
4.   axisLabel: {
5.     show: true,
6.     color: '#333',     // 原 textStyle 下的属性
7.     fontSize: 14,      // 直接提升到 axisLabel 下
8.     fontStyle: 'italic' // 直接提升到 axisLabel 下
9.   }
10. }

复制代码

也就是去掉xAxis和 yAxis 的 textStyle，
title: 标题下面是有 textStyle 不要去掉
visualMap下是有textStyle属性的

1. visualMap: [
2.   {
3.     left: 40,
4.     top: '4%',
5.     seriesIndex: 1,
6.     textStyle: {
7.       color: '#333', // 圆点右侧的文字颜色
8.     }
9.   }
10. ]

复制代码

tooltip.textStyle 下是有textStyle属性的

1. tooltip: {
2.   textStyle: {
3.     color: '#333333',
4.     fontSize: 12,
5.     height: 42
6.   }
7. }

复制代码

title 下是有textStyle属性的

1. title: {
2.   text: '标题',
3.   top: 20, // 相对容器顶部的距离值
4.   padding: [0, 0, 0, 20],
5.   textStyle: { // 设置主标题的文字风格
6.     color: '#333333', // 字体颜色
7.     fontSize: 16, // 文字大小
8.     fontWeight: 600,
9.   },
10.   itemGap: 20
11. },

复制代码

legend 下的textStyle是存在的

1. legend: {
2.   type: 'scroll',
3.   orient: 'horizontal',
4.   // textStyle: {
5.     fontSize: 14,
6.     color: '#333333', // 设置图例文本颜色
7.     padding: [3, 0, 0, 0],
8.   // },
9.   data: backData.legend
10. }

复制代码

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
‌错误写法示例‌：

1. itemStyle: {
2.   emphasis: {
3.     color: 'red'
4.   }
5. }

复制代码

‌正确写法‌：

1. emphasis: {
2.   itemStyle: {
3.     color: 'red'
4.   }
5. }

复制代码

错误的写法

1. itemStyle: {
2.   // 地图边框设置
3.   normal: {
4.     areaColor: '#D9D9D9', // 每个区域的颜色
5.     borderColor: '#FFFFFF', // 每个区域的描边颜色
6.     borderWidth: 0.5 // 每个区域的描边宽度
7.   },
8.   // hover效果
9.   emphasis: {
10.     borderColor: '#5c5c5c',
11.     borderWidth: 0.5,
12.     areaColor: {
13.       type: 'linear',
14.       x: 0,
15.       y: 0,
16.       x2: 0,
17.       y2: 1,
18.       colorStops: [
19.         {
20.           offset: 0,
21.           color: '#D9D9D9' // 0% 处的颜色
22.         }
23.       ],
24.       globalCoord: false // 缺省为 false
25.     }
26.   }
27. },

复制代码

正确的写法

1. itemStyle: {
2.   // 地图边框设置
3.   normal: {
4.     areaColor: '#D9D9D9', // 每个区域的颜色
5.     borderColor: '#FFFFFF', // 每个区域的描边颜色
6.     borderWidth: 0.5 // 每个区域的描边宽度
7.   },
8. },
9. // hover效果
10. emphasis: {
11.   itemStyle:{
12.     borderColor: '#5c5c5c',
13.     borderWidth: 0.5,
14.     areaColor: {
15.       type: 'linear',
16.       x: 0,
17.       y: 0,
18.       x2: 0,
19.       y2: 1,
20.       colorStops: [
21.         {
22.           offset: 0,
23.           color: '#D9D9D9' // 0% 处的颜色
24.         }
25.       ],
26.       globalCoord: false // 缺省为 false
27.     }
28.   }
29. },

复制代码

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中配置所有样式特性
如果你之前是这样配置的：

1. series: [{
2.   type: 'line',
3.   lineStyle: {
4.     normal: { // 应该被删除
5.       color: 'green',
6.       width: 2
7.     }
8.   }
9. }]

复制代码

你应该将其修改为：

1. series: [{
2.   type: 'line',
3.   lineStyle: {
4.     color: 'green',
5.     width: 2
6.   }
7. }]

复制代码

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

1. 旧版本：
2. "itemStyle": {
3.   "normal": {
4.     "areaColor": "#eeeeee",
5.     "borderColor": "#999999",
6.     "borderWidth": "0.5"
7.   },
8. },
9. 新版本：
10. "itemStyle": {
11.   "areaColor": "#eeeeee",
12.   "borderColor": "#999999",
13.   "borderWidth": "0.5"
14. },

复制代码

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中配置所有样式属性。
写法（已废弃）：

1. itemStyle: {
2.   normal: {
3.     color: '#62B4FF'
4.   }
5. }
6. 新版本正确写法：
7. itemStyle: {
8.   color: '#62B4FF'
9. }

复制代码

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”层次结构已被删除。现在，所有样式属性都直接在标签中配置。

1. ECharts 4.0 之前        label: { normal: { show: true, position: 'inside', color: '#fff' } }
2. ECharts 4.0 及之后        label: { show: true, position: 'inside', color: '#fff' }
3. 修改前 (旧版写法)：
4. label: {
5.   normal: {
6.     show: true,
7.     position: 'inside',
8.     color: '#fff',
9.     fontSize: 12
10.   }
11. }
12. 修改后 (新版写法)：
13. label: {
14.   show: true,
15.   position: 'inside',
16.   color: '#fff',
17.   fontSize: 12
18. }

复制代码

1. series: [
2.   {
3.     // 地图块的配置相关信息
4.     type: 'map',
5.     map: nameMap,
6.     zoom: 1.2,
7.     // 地图上各个省份的名称哈
8.     label: {
9.       normal: {
10.         show: true, // false隐藏省份的名称
11.         // 各个区域-省/市名称样式设置  label下面现在没有textStyle
12.         textStyle: {
13.           fontSize: 13,
14.           fontWeight: 600,
15.           color: '#000'
16.         }
17.       },
18.       // 文字hover颜色
19.       emphasis: {
20.         show: true, // 是否在高亮状态下显示标签。
21.         textStyle: {
22.           color: '#000'
23.         } // 高亮状态下的标签文本样式。
24.       }
25.     },
26.   }
27. ]
29. 更改为
30. label: {
31.   // normal: {
32.     show: true, // false隐藏省份的名称哈
33.     // 各个区域-省份/市名称样式设置
34.     // textStyle: {
35.       fontSize: 13,
36.       fontWeight: 600,
37.       color: '#000',
38.     // }
39.   // },
40.   // 文字hover颜色
41.   // emphasis: {
42.   //   show: true, // 是否在高亮状态下显示标签。
43.   //   textStyle: {
44.   //     color: '#000'
45.   //   } // 高亮状态下的标签文本样式。
46.   // }
47. },

复制代码

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

                                                微信                                                                                                本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
                        如果文中有什么错误，欢迎指出。以免更多的人被误导。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

喜欢鼓捣这些软件，现在用得少，谢谢分享！