echarts动态渲染柱状图背景颜色及顶部数值方法详解
更新时间：2023年11月09日 10:28:49 作者：关忆北_
在使用echarts时,有时需要给柱状图设置背景,下面这篇文章主要给大家介绍了关于echarts动态渲染柱状图背景颜色及顶部数值的相关资料,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下
第一种 单个柱子变色
众所周知 柱状图的背景色在series下的 itemStyle 的color下修改 不同数据让每个柱状图背景颜色不同 这个时候就需要自定义 所以我在color后跟了一个箭头函数 里面的参数params跟formatter里的是一样的 可以打印出来 看下里面有什么值 我打印了一下
所以这个时候就可以根据你想要的数据 改变成想要的颜色 就如我这里的写法
itemStyle:{
color: (params) =>{
console.log(params)
if (params.name == "Mon"){
return "yellowgreen"
} else {
return "bisque"
}
}
},我判断这里x轴名字为Mon的那个颜色为黄绿 其他的为bisque
然后下方的顶部数值也简单了
老规矩先打印一下params
label:{
show: true,
position:"top",
formatter: (params) =>{
let res = ""
// 如果背景颜色为yellowgreen的 则显示
if (params.color == "yellowgreen"){
res += params.data
}
console.log(params)
return res
}
}直接根据背景颜色进行判断就好了
第二种 多个柱子变色
比方有一个数组 来判断当前是什么颜色的 color下面就可以用params.dataIndex当前柱子的下标来做 如果你的数组里 不是颜色（一般不是）而是一个参数比如isColor为1时是yellowgreen为0时是bisque 则color里如下写法
if (bg[params.dataIndex] == 1){
return "yellowgreen"
} else if (bg[params.dataIndex] == 0){
return "bisque"
}
下方的顶部数据还是根据颜色判断即可
总结
到此这篇关于echarts动态渲染柱状图背景颜色及顶部数值的文章就介绍到这了,更多相关echarts动态渲染柱状图背景色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
枚举是一种数据结构，它定义了一个有限的具名常量集，每个常量都可以通过其名称来访问，这篇文章主要介绍了JavaScript中的四种枚举方式,需要的朋友可以参考下2023-05-05
ie9都不支持websocket,何况ie6,往往这些不可思议的事情却意想不到的发生了;websocket能开发那么酷的功能,怎么能让ie拦住我们的脚步,用falsh封装吧，感兴趣的你可不要错过了哈2013-02-02
浅谈JavaScript中Date(日期对象),Math对象
这篇文章主要简单介绍了JavaScript中Date(日期对象),Math对象的相关资料,需要的朋友可以参考下2015-02-02
JavaScript有许多批量创建数组的方法，为了衡量它们的性能，我分别使用不同的方法创建一个长度为100000的数组，且键和值相等，今天小编给大家分享基于js批量创建数组的方法，一起看看吧2017-03-03
js如何使用Pagination+PageHelper实现分页
本文主要介绍了js如何使用Pagination+PageHelper实现分页，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
下面小编就为大家带来一篇原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了微信小程序前端源码逻辑和工作流 的相关资料,本文还给大家提供了文本基本结构图和实例代码，非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
声明文件是以.d.ts为后缀的文件，开发者在声明文件中编写类型声明，TypeScript根据声明文件的内容进行类型检查，这篇文章主要介绍了TypeScript使用及类型声明文件的相关知识,需要的朋友可以参考下2022-06-06
javascript同步Import,同步调用外部js的方法
javascript同步Import,同步调用外部js的实现代码，测试确实可用2008-07-07
JavaScript Array Flatten 与递归使用介绍
用 JavaScript 将 [1,2,3,[4,5, [6,7]], [[[8]]]] 这样一个 Array 变成 [1,2,3,4,5, 6,7,8] 呢？传说中的 Array Flatten2011-10-10
最新评论