最近还是在写图表需求，遇到一个之前没有搞过的场景，柱状图需要根据x轴的值分段展示数据，如图，x轴值10-30、40-50、60-70显示不同的颜色
刚看到这个图的时候一看就是分段展示，看了半天文档发现visualMap属性可以实现分段展示，尝试用了下：
...
xAxis: {
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ['10','20','30','40','50','60','70']
},
yAxis: {
type: 'value',
},
visualMap: [
{
type: 'piecewise', // 分段型
pieces: [ // 自定义分段
{
gte: 10, // 小于等于
lte: 30, // 大于等于
color: '#096'
}, {
gte: 40,
lte: 50,
color: '#ffde33'
}, {
gte: 60,
lte: 70,
color: '#ff9933'
},
]
}
],
series: [
{
name: '数据',
type: 'bar',
data: [330, 302, 301, 934, 1290, 330, 310]
}
]
...
加上visualMap之后发现整个柱状图都不显示了：
但是
hover的时候发现数据还是展示的，当时就想既然有数值大小的比较，会不会分段这个值是根据y轴值分的，那么把分段的范围改成y轴值的范围，则：
...
pieces: [
{
gte: 300,
lte: 600,
color: '#096'
}, {
gte: 600,
lte: 900,
color: '#ffde33'
}, {
gte: 1200,
lte: 1500,
color: '#ff9933'
},
],
...
此时显示为：
充分说明是根据
y轴值而分段的，那么怎么让他根据x轴值显示呢，看了好久的文档发现dimension属性是可以设置根据x轴还是y轴分段，
...
visualMap: {
...
dimension:0, // 1为y轴，0为x轴
...
设置完了之后发现又不显示了，试了好几组数据都不行，突然又想到如果x轴的数据为字符串，那么怎么比较大小呢？如果能用数字衡量的话，只有数组index了，所以就尝试用下标当作数字来设置分段范围：
...
pieces: [
{
gte: 0,
lte: 2,
color: '#096'
}, {
gte: 3,
lte: 4,
color: '#ffde33'
}, {
gte: 5,
lte: 6,
color: '#ff9933'
},
],
...
没想到结果却让我觉得惊喜，真的是根据下标来显示的：
image.png
虽然这个显示好了，但是还有个问题就是，我需要显示如下图的
legend值，并且要和其他图一样，点击每个title时要对该条柱状图进行显示隐藏展示
此时
series就一条数据，怎么显示三个呢？并且还需要点击切换展示隐藏功能，查了很多文档都没有发现这样的需求，准备放弃这个点的时候，突然遇到了堆叠图，然后一波骚操作就想到了，如果这是三个堆在一起的柱状图，想要哪个颜色的值的时候另外两个不给显示，即设为空字符串，那应该能实现这种问题叭，所以需要三个柱状图，三个数组，然后就尝试了一下：
...
legend: {
data: ['第一段', '第二段','第三段']
},
series: [
{
name: '第一段',
type: 'bar',
stack: '总量',
color:'#096',
data: [330, 302, 301, '', '', '', '']
},
{
name: '第二段',
type: 'bar',
stack: '总量',
color:'#ffde33',
data: ['', '', '', 934, 1290, '', '']
},
{
name: '第三段',
type: 'bar',
stack: '总量',
color:'#ff9933',
data: ['', '', '', '', '', 330, 310]
}
]
...
然后发现完全可以实现！刚开始只想着分段展示，然后看visualMap怎么实现，后面的小需求点怎么想也想不到，最后发现就是平时经常用的堆叠图就可以实现这个需求。
感觉虽然这是个小问题，并且可能实现的方式没有那么完美，但是通过这个事情发现，一个问题刚开始就把它想的复杂化，可能还真没那么容易实现，如果肯换个角度考虑，那可能只需要很简单的方式就能实现。
网友评论