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属性都直接在标签中配置。
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
参考地址:
旧版本:
"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的回调中调用它