echarts使用visualMap显示地图时如何 图例分行?

Question

代码如下

      visualMap: { // 设置地图范围值显示的颜色
          type: 'piecewise',
          splitNumber: 6,
          show: true,
          left: 867,
          top: 210,
          align: 'left',
          orient: 'vertical',
          itemWidth: 20,
          itemHeight: 20,
          itemGap: 20,
          showLabel: true,
          textStyle: {
            color: '#000000'
          },
          h: 200,
          pieces: [
            {
              gte: 5,
              lt: 10,
              label: ' 5-10 ',
              color: '#AEDBFF'
            },
            {
              gte: 0,
              lt: 5,
              label: '  <5     ',
              color: '#E4F3FF'
            },
            {
              gte: 15,
              lt: 50,
              label: '15-50 ',
              color: '#8CD7E6'
            },
            {
              gte: 10,
              lt: 15,
              label: '10-15  ',
              color: '#6FB4F9'
            },
            {
              gte: 101,
              label: ' >100 ',
              color: '#FF9C6E'
            },
            {
              gte: 50,
              lt: 101,
              label: '50-100',
              color: '#62C1D9'
            }
          ]
        },

要求是图例分为三行, 尝试在visualMap传为数组, 会分行但是会导致图中的颜色无法根据范围正常显示, 希望大佬解惑

目标:

Answer 1

在使用ECharts的visualMap控件显示地图时，可以使用splitList属性来实现图例的分行。该属性可以设置一个数组，数组中的每一项表示一行的分割点，每一项的值是一个数字，表示在该数字处分割图例。

例如，以下示例代码演示了如何使用splitList属性来分割图例：

visualMap: {
    splitList: [
        {end: 50},
        {start: 50, end: 100},
        {start: 100, end: 150},
        {start: 150, end: 200}
    ],
    ...
}