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动态渲染柱状图背景色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS深度拷贝Object Array,结合实例形式分析了JavaScript深度拷贝的原理,需要的朋友可以参考下2016-03-03
下面小编就为大家带来一篇浅谈js数据类型判断与数组判断。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了点评js异步加载的4种方式，帮助大家更全面的了解js异步加载方式，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要与大家分享js获取一个checkbox看其是否被选中的具体实现，很简单，但很实用，需要的朋友可以参考下2014-09-09
Javascript将string类型转换int类型的过程中总会出现不如意的问题，下面为大家介绍下js string转int的一些注意的问题，感兴趣的朋友可以参考下2013-08-08
uni-app实现页面通信EventChannel的操作方法
使用了EventBus的方法实现不同页面组件之间的一个通信,在uni-app中,我们也可以使用uni-app API,uni.navigateTo来实现页面间的通信,这篇文章主要介绍了uni-app实现页面通信EventChannel的操作方法,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了layui在表格中嵌入上传按钮并修改上传进度条的实例,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
javascript获得CheckBoxList选中的数量(jQuery与Javascript对照学习/前台与后台)2009-10-10
显然，效果很实用。对于这个效果，我们并不解释如何去使用效果库，而是讲解如何创建类似的效果，并保持他的可用性，分离式（unobtrusive），可维护性（让未来的维护者，在不需要修改你的脚本的情况下，修改图片，外观或文本标签）。2008-06-06
这篇文章主要为大家详细介绍了JavaScript实现水平进度条拖拽效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
最新评论