earchs柱形图怎样使某个柱子变色

技术学了但是不学以致用的话，其实也是会遗忘的，这次项目中使用了earchs图表，然后又去翻开earchs官网去看文档，总结一下这次的错误思路吧！

earchs官网：https://echarts.apache.org

背景：从一组数组中，去取执行进度< 序时进度的数据，然后将它对应的柱子标红。
我的思路：看了earchs的文档，我首先使用了itemStyle（这里是没有毛病的）

 series: [{data: varietyEnforcementArr,type: 'bar',name: '执行进度',barMaxWidth: 40,itemStyle: {normal: {color: function(){for(let i=0;i<varietyEnforcementArr.length;i++){if(varietyEnforcementArr[i]<chronologicalProgressArr[i]){return '#c23531'}}},},},},{data: chronologicalProgressArr,type: 'line',name: '序时进度',},],

结果：整个柱形图的柱子全部变成了黑色。
原因：其实就是颜色不起作用，在这里的代码itemStyle是全局的。

当时还想了一些其他的方法

就是在组件那里取好执行进度< 序时进度的值，再将这个值传过来，这样子的数据是可行的，但是放到series这里就会出现原本一列的变成两列，这是不符合需求的。（X）
也百度了度娘，写了一种接近正确答案的方法，但是还差那么一点点转弯

data: [10,{itemStyle: {normal: {color:'#c23531',},},},20,30,40,50]

改进后的正确思路：

在data这里进行取值，将取到的value值再给它itemStyle赋予给它，从而进行局部的一个变化。

series: [{data: varietyEnforcementArr.map((value, index) => ({value,itemStyle: {normal: {color: value < chronologicalProgressArr[index] ? '#c23531' : '#2ec7c9',},},})),type: 'bar',name: '执行进度',barMaxWidth: 40,},{data: chronologicalProgressArr,type: 'line',name: '序时进度',},],

结果：是可行的，相应的柱子也变成了红色。

earchs柱形图怎样使某个柱子变色相关推荐

html如何让字体自动变色,CSS使文字部分变色
思路思路很简单,就是一个字写两遍,一个字只显示部分,不过不能真的把一个字写两遍.这里就需要用到CSS伪元素:before和:after,记住这个"伪元素"的"伪&quo ...
Echarts-实现3D柱状图显示，并单个柱子变色
效果如下: <!DOCTYPE html> <html><head><meta charset="utf-8" /><titl ...
帆软-条形图点击柱子变色并联动图表js
版本:帆软10 预期效果:点击条形图chart2的柱子,柱子变成红色,并联动条形图chart1 实现步骤如下: 1.决策报表拖入条形图chart1.chart2,绑定数据集,并设置好样式: 2.在条形 ...
android搜索文字变色_Android实现TextView字符串关键字变色的方法
一.字符串关键字变色在界面显示的时候,偶尔需要将某些字符串中特定的字符串重点标出如下图所示: 便有了下面的方法.这个方法针对于比较固定的字符串 ,并且需要自己计算需要变色的文字位置 ,代码 ...
python 堆叠柱状图,Python可视化matplotlib12-垂直|水平|堆积柱形图详解
柱形图(又称柱状图.直方图.条形图)用于各组数据的数量比较,可以简单的分为水平柱形图.垂直柱形图及堆积柱形图. 本文详细介绍matpltlib中垂直.水平和堆积三种柱形图的绘制. 我的公众号:&quo ...
css鼠标放上按钮变色
找到了一种可以使鼠标悬停变色的方法,觉得挺好用的 .button_ensure {background: red;.button_ensure:hover {background: blue; } 前 ...
如何为你的数据选择最佳图表？
数据可视化的一个难题是有太多不同的图表类型,有时难以选择.如何知道哪一个将为你的数据带来最大的意义? 下面将介绍市面上主流图表的最佳使用场景.(前方多图高能预警) 目录比较类分布类流程类占比类 ...
【Python】数据可视化基本套路总结
真依然很拉风,简书<数据可视化>专栏维护者,里面有很多优秀的文章,本文便是其中一篇. 文章总结了多种数据可视化图形,并简要介绍了各种图形的作用,能为科研工作者在数据可视化阶段提供新的思路, ...
关于封装echarts的那些事
文章目录前言我希望这个echarts组件能设计成什么样一.对使用echarts需要提前知道的知识二.开始封装 1.封装思路及使用 2.灵活配置 3.代码实例 4.效果展示总结前言每个开发 ...

earchs柱形图怎样使某个柱子变色

当时还想了一些其他的方法

改进后的正确思路：

earchs柱形图怎样使某个柱子变色相关推荐

最新文章

热门文章