echarts中visualMap 自定义值的范围并设置颜色

在echarts中visualMap的设置中 不想单纯的以max指数splitNumber分层，或者上下拖动来实现数据的筛选。如下：

visualMap: {
          min: 0,
          max: 1000,
          left: 80,
          bottom: 50,
          //上下拖动
          //text: ['High', 'Low'],
          //color: ['#df3d20', '#fff']
          realtime: false,
          //平均分层
          splitNumber: 5,
           inRange: {
             color: ['#fff', '#b8ddf0', '#e0bdb8', '#e16f56', '#EB190A', ]
           },
          outOfRange: {
            color: ['#fff'],
          },
        },

---

所以目的：自由选择值区间
举个栗子 类似于百度疫情数据的分层

visualMap: {
          ...
          pieces: [
            { gte: 10000, color: '#b80909' },
            { gte: 1000, lt: 9999, color: '#e64546' },
            { gte: 100, lt: 999, color: '#f57567' },
            { gte: 10, lt: 99, color: '#ff9985' },
            { gte: 1, lt: 9, color: '#ffe5db' },
            { value: 0, color: '#fff' },
          ],
          ...
        },

如下所示，就可以实现啦