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

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

发表评论

评论已关闭。

相关文章