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属性都直接在标签中配置。 blog.csdn.net/qq_33489538... www.cnblogs.com/tanxj/p/180...

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

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:116ECharts已弃用: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的回调中调用它

相关推荐
半个烧饼不加肉10 分钟前
JS 底层探究-- 事件循环
开发语言·前端·javascript
goDeep23 分钟前
useMemo 和 useCallback 的区别,我终于搞懂了
前端
小亮学前端24 分钟前
在1Panel中部署Nuxt项目
前端·vue.js
产品研究员27 分钟前
AI生成可用的React交互代码实测:Lovable vs Stitch vs Paico
前端·react.js·aigc
labixiong28 分钟前
Prompt 工程:当一段文字学会了思考、行动与统治
前端·ai编程
biubiubiu_LYQ31 分钟前
入门开发者必学篇之JS事件循环:为什么你的代码输出总翻车?
前端·javascript
HwJack2039 分钟前
鸿蒙背景下 Cocos Creator 的三大 JS 引擎:JIT 与热更新的十字路口
javascript·华为·harmonyos
程序员黑豆1 小时前
AI全栈开发之Java:怎么安装JDK
前端·ai编程·全栈
周杰伦fans1 小时前
AutoCAD C# 二次开发:如何精确监听工作空间切换事件
前端·c#
丷丩1 小时前
MapLibre GL JS第41课:向地图添加图标
前端·javascript·mapbox·maplibre gl js