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属性都直接在标签中配置。 [blog.csdn.net/qq_33489538...](https://link.juejin.cn?target=https%3A%2F%2Fblog.csdn.net%2Fqq_33489538%2Farticle%2Fdetails%2F140325353 "https://blog.csdn.net/qq_33489538/article/details/140325353") [www.cnblogs.com/tanxj/p/180...](https://link.juejin.cn?target=https%3A%2F%2Fwww.cnblogs.com%2Ftanxj%2Fp%2F18070040 "https://www.cnblogs.com/tanxj/p/18070040") ```yaml series: [ { type: 'map', label: { textStyle: { // textStyle 删除，没有这个属性了 fontSize: 13, fontWeight: 600, color: '#000', } } } ] ``` #### emphasis 下是没有 textStyle 属性 ```css 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中配置。 ```css axisLabel: { textStyle: { color: '#333', fontSize: 14 } } ``` ECharts 4.0 及之后 (新版写法) ```css axisLabel: { color: '#333', fontSize: 14 } ``` 修改前 (旧版写法) ```css xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'], axisLabel: { show: true, textStyle: { // 需要移除的层级 color: '#333', fontSize: 14, fontStyle: 'italic' } } } ``` 修改后 (新版写法) ```go 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属性的 ```less visualMap: [ { left: 40, top: '4%', seriesIndex: 1, textStyle: { color: '#333', // 圆点右侧的文字颜色 } } ] ``` #### tooltip.textStyle 下是有textStyle属性的 ```css tooltip: { textStyle: { color: '#333333', fontSize: 12, height: 42 } } ``` #### title 下是有textStyle属性的 ```less title: { text: '标题', top: 20, // 相对容器顶部的距离值 padding: [0, 0, 0, 20], textStyle: { // 设置主标题的文字风格 color: '#333333', // 字体颜色 fontSize: 16, // 文字大小 fontWeight: 600, }, itemGap: 20 }, ``` ### legend 下的textStyle是存在的 ```css 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 错误写法示例： ```css itemStyle: { emphasis: { color: 'red' } } ``` 正确写法： ```css emphasis: { itemStyle: { color: 'red' } } ``` 错误的写法 ```yaml 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 } } }, ``` 正确的写法 ```yaml 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中配置所有样式特性 如果你之前是这样配置的： ```css series: [{ type: 'line', lineStyle: { normal: { // 应该被删除 color: 'green', width: 2 } } }] ``` 你应该将其修改为： ```css 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 参考地址：[zhuanlan.zhihu.com/p/526439319](https://link.juejin.cn?target=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F526439319 "https://zhuanlan.zhihu.com/p/526439319") ```css 旧版本： "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中配置所有样式属性。 写法（已废弃）： ```css 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"层次结构已被删除。现在，所有样式属性都直接在标签中配置。 ```css 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 } ``` ```yaml 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的回调中调用它