echarts如何对柱状图中的每个柱子进行条件判断 数值大于变量a的变红色 小于变量a的变黄色并且数据来源于一个二维数组数组的第一层有两个元素第一个元素是string 第二个元素是个数组 第二个元素的第二个元素是个number 也就是我们要判断的数据来源
时间: 2024-05-01 20:21:46 浏览: 56
您可以使用 ECharts 的 visualMap 组件来实现对柱状图中每个柱子的条件判断,以及颜色的变化。具体实现步骤如下:
1. 在 ECharts 的 option 中,设置 visualMap 组件:
```javascript
visualMap: {
type: 'piecewise',
pieces: [
{min: 0, max: a, color: 'yellow'}, // 小于变量 a 的部分变为黄色
{min: a, max: Infinity, color: 'red'} // 大于变量 a 的部分变为红色
]
}
```
2. 在数据源中,将每个柱子的数值与变量 a 进行比较,将结果保存到一个数组中,并将该数组作为柱状图的数据源:
```javascript
var data = [
['柱子1', [1, 2, 3, 4, 5].map((item) => item > a ? item : -item)],
['柱子2', [6, 7, 8, 9, 10].map((item) => item > a ? item : -item)]
];
option = {
xAxis: {
type: 'category',
data: data.map((item) => item[0])
},
yAxis: {},
series: [{
type: 'bar',
data: data.map((item) => item[1])
}],
visualMap: {
type: 'piecewise',
pieces: [
{min: 0, max: a, color: 'yellow'},
{min: a, max: Infinity, color: 'red'}
]
}
};
```
这样就可以对柱状图中的每个柱子进行条件判断,并且根据不同的条件将柱子变为不同的颜色。
阅读全文