最近還是在寫圖表需求涂召，遇到一個之前沒有搞過的場景麻捻，柱狀圖需要根據(jù)x軸的值分段展示數(shù)據(jù)矾屯，如圖兼蕊，x軸值10-30、40-50问拘、60-70顯示不同的顏色
剛看到這個圖的時候一看就是分段展示遍略，看了半天文檔發(fā)現(xiàn)visualMap屬性可以實現(xiàn)分段展示，嘗試用了下：
...
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: '數(shù)據(jù)',
type: 'bar',
data: [330, 302, 301, 934, 1290, 330, 310]
}
]
...
加上visualMap之后發(fā)現(xiàn)整個柱狀圖都不顯示了：
但是
hover的時候發(fā)現(xiàn)數(shù)據(jù)還是展示的骤坐，當時就想既然有數(shù)值大小的比較绪杏，會不會分段這個值是根據(jù)y軸值分的，那么把分段的范圍改成y軸值的范圍纽绍，則：
...
pieces: [
{
gte: 300,
lte: 600,
color: '#096'
}, {
gte: 600,
lte: 900,
color: '#ffde33'
}, {
gte: 1200,
lte: 1500,
color: '#ff9933'
},
],
...
此時顯示為：
充分說明是根據(jù)
y軸值而分段的蕾久，那么怎么讓他根據(jù)x軸值顯示呢，看了好久的文檔發(fā)現(xiàn)dimension屬性是可以設置根據(jù)x軸還是y軸分段拌夏，
...
visualMap: {
...
dimension:0, // 1為y軸僧著，0為x軸
...
設置完了之后發(fā)現(xiàn)又不顯示了，試了好幾組數(shù)據(jù)都不行障簿，突然又想到如果x軸的數(shù)據(jù)為字符串盹愚，那么怎么比較大小呢？如果能用數(shù)字衡量的話站故，只有數(shù)組index了皆怕，所以就嘗試用下標當作數(shù)字來設置分段范圍：
...
pieces: [
{
gte: 0,
lte: 2,
color: '#096'
}, {
gte: 3,
lte: 4,
color: '#ffde33'
}, {
gte: 5,
lte: 6,
color: '#ff9933'
},
],
...
沒想到結果卻讓我覺得驚喜毅舆，真的是根據(jù)下標來顯示的：
image.png
雖然這個顯示好了，但是還有個問題就是愈腾，我需要顯示如下圖的
legend值憋活，并且要和其他圖一樣，點擊每個title時要對該條柱狀圖進行顯示隱藏展示
此時
series就一條數(shù)據(jù)虱黄，怎么顯示三個呢悦即？并且還需要點擊切換展示隱藏功能，查了很多文檔都沒有發(fā)現(xiàn)這樣的需求橱乱，準備放棄這個點的時候辜梳，突然遇到了堆疊圖，然后一波騷操作就想到了泳叠，如果這是三個堆在一起的柱狀圖冗美，想要哪個顏色的值的時候另外兩個不給顯示，即設為空字符串析二，那應該能實現(xiàn)這種問題叭，所以需要三個柱狀圖节预，三個數(shù)組叶摄，然后就嘗試了一下：
...
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]
}
]
...
然后發(fā)現(xiàn)完全可以實現(xiàn)！剛開始只想著分段展示安拟，然后看visualMap怎么實現(xiàn)蛤吓，后面的小需求點怎么想也想不到，最后發(fā)現(xiàn)就是平時經(jīng)常用的堆疊圖就可以實現(xiàn)這個需求糠赦。
感覺雖然這是個小問題会傲，并且可能實現(xiàn)的方式?jīng)]有那么完美，但是通過這個事情發(fā)現(xiàn)拙泽，一個問題剛開始就把它想的復雜化淌山，可能還真沒那么容易實現(xiàn)，如果肯換個角度考慮顾瞻，那可能只需要很簡單的方式就能實現(xiàn)泼疑。
