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动态渲染柱状图背景颜色以及顶部数值相关推荐

Atitit 动态按钮图片背景颜色与文字组合解决方案
Atitit 动态按钮图片背景颜色与文字组合解决方案转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标文字分拆,使用字 ...
Android——动态设置view背景颜色setBackgroundColor
setBackgroundColor 用于动态设置view背景颜色今天写代码的时候遇到个小问题动态设置的时候用Color.GRAY,系统自己带着的颜色,是没有问题的但是用自己定义的颜色,就不生效 ...
android背景颜色动态修改,Android自定义TextView带圆角及背景颜色（动态改变圆角背景颜色）...
最近根据项目需求自定义了一个TextView控件,主要用来做状态的标识,比如一个订单状态有各种,当然了这种设置在Android中可以直接用xml文件来处理,但是对于xml文件太过于麻烦,针对不同的颜色 ...
微信小程序开发——动态改变按钮背景颜色
在wxss文件中可以简单地设置button的背景颜色和各种样式,然而,这样的样式设计不能够动态改变.那么,如何动态改变控件的样式呢?下面以button为例来介绍. 此方法不用修改wxss文件,首先,在 ...
echarts调节提示框背景颜色与透明度
效果图: js代码: //提示框tooltip: {//触发类型:坐标轴触发trigger: 'axis',backgroundColor:'rgba(255,255,255,0.8)',//通过设置 ...
echarts折线图修改背景颜色_不会美化Excel图表？学会这招！小白也能轻松做出高逼格的折线图...
好多人都觉得做一个好看的数据图表是件困难的事,所以很多时候都是选择插入一个图表寥寥完事.短期对我们的工作来说是可以按时完成任务,但从长远角度来讲,对我们的职业能力没有提升,所以今天就来和小编一起学习制 ...
为echarts的叠加柱状图设置颜色
1.废话少说,直接上代码(前提先引入echarts先关文件) var myChart = echarts.init(document.getElementById('chartOne'));// 指定 ...
Vue.js使用Echarts动态渲染多个图表
@Author: 雨 <雨> @Date: 2020-07-04T15:44:54+15:00 @Email: 2607503865@qq.com @Last modified by: S ...
echarts 设置背景颜色
问题:echarts 设置背景颜色描述: @Kener-林峰你好,想跟你请教个问题:请问怎么设置echarts整个图标的背景颜色??我用了color属性,在官网实验的时候不显示.... 解决方案1 ...

echarts动态渲染柱状图背景颜色以及顶部数值

第一种单个柱子变色

第二种多个柱子变色

echarts动态渲染柱状图背景颜色以及顶部数值相关推荐

最新文章

热门文章

echarts动态渲染柱状图背景颜色以及顶部数值

第一种 单个柱子变色

第二种 多个柱子变色

echarts动态渲染柱状图背景颜色以及顶部数值相关推荐

最新文章

热门文章

第一种单个柱子变色

第二种多个柱子变色