解决Echarts根据x轴值分段展示...的过程

最近还是在写图表需求,遇到一个之前没有搞过的场景,柱状图需要根据x轴的值分段展示数据,如图,x轴值10-3040-5060-70显示不同的颜色

解决Echarts根据x轴值分段展示...的过程_第1张图片

刚看到这个图的时候一看就是分段展示,看了半天文档发现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之后发现整个柱状图都不显示了:

解决Echarts根据x轴值分段展示...的过程_第2张图片

但是 hover的时候发现数据还是展示的,当时就想既然有数值大小的比较,会不会分段这个值是根据 y轴值分的,那么把分段的范围改成 y轴值的范围,则:

...
 pieces: [
            {
                gte: 300,
                lte: 600,
                color: '#096'
            }, {
                gte: 600,
                lte: 900,
                color: '#ffde33'
            }, {
                gte: 1200,
                lte: 1500,
                color: '#ff9933'
            },
            ],
...

此时显示为:

解决Echarts根据x轴值分段展示...的过程_第3张图片

充分说明是根据 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'
            },
            ],
...

没想到结果却让我觉得惊喜,真的是根据下标来显示的:

解决Echarts根据x轴值分段展示...的过程_第4张图片
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怎么实现,后面的小需求点怎么想也想不到,最后发现就是平时经常用的堆叠图就可以实现这个需求。

感觉虽然这是个小问题,并且可能实现的方式没有那么完美,但是通过这个事情发现,一个问题刚开始就把它想的复杂化,可能还真没那么容易实现,如果肯换个角度考虑,那可能只需要很简单的方式就能实现。

你可能感兴趣的:(解决Echarts根据x轴值分段展示...的过程)