解决echarts升级:itemStyle.emphasis has been changed to emphasis.itemStyle since 4.0

454 阅读1分钟

DEPRECATED: itemStyle.emphasis has been changed to emphasis.itemStyle since 4.0意思就是 echarts 4.0 版本之后,itemStyle.emphasis 被修改为 emphasis.itemStyle。注意这是直译,里面有一个坑,他的意思不是说让你把 emphasis 包裹到原来的 itemStyle 的外面,而是让你把 emphasis 放到与原来的 itemStyle 同级的位置,并且在 emphasis 内部再写一个 itemStyle。

其实如果你对他的每个 api 的作用理解的比较到位的话,这是非常好理解的。但是你如果不太熟悉 echarts 的话,可能不知道怎么放或者放错位置。下面我举几个代码例子,说明一下

报警告的代码结构

升级之前,经过你的修改或者没有修改,你的 emphasis 是大概这样的一个结构:

// 可能是这样
itemStyle: {
    // normal 状态的样式
    // .....

    // emphasis 状态的样式,这样写在样式并不会生效
    emphasis: {
        itemStyle: {
            // 你的代码
        }
    }
}

// 或者这样
itemStyle: {
    // normal 状态的样式
    // .....

    // emphasis 状态的样式,这样在5.0会生效,但是会报警
    emphasis: {
        // 你的代码
    }
}

正确的代码结构

正确的做法是,把 emphasis.itemStyle 放到 与父 itemStyle 同级的位置。例如:

itemStyle: {
  // normal 状态的样式
  // .....
}
// emphasis 状态的样式
emphasis: {
  itemStyle: {
    // 你的代码
  }
}

错误的做法

把 emphasis 作为 父级 itemStyle 的父级是错误的,这也是直译警告,不经过思考的结果:

// 错误示例
// 这样只设置了emphasis 状态,没有normal状态的
// itemStyle: {}没有设置同级的itemStyle,所以没有正常状态的样式
emphasis: {
  itemStyle: {
    // 你的代码
  }
}

有收获的话,可以点个赞哟,欢迎留言交流。