visualMap piecewise not work on dimension x/y in some kind of configurations

### Version
4.7.0

### Steps to reproduce

This option does not work and throws an error.
```js
option = {
xAxis: { type: 'time' },
yAxis: { type: 'value' },
visualMap: {
type: 'piecewise',
show: false,
dimension: 0,
pieces: [{
lte: new Date('2020-04-01T01:00'),
color: 'blue'
}, {
gt: new Date('2020-04-01T01:00'),
color: 'red'
}]
},
tooltip:{ trigger: "axis" },
series: [{
type: 'line',
data: [
['2020-04-01T00:00', 200],
['2020-04-01T01:00', 400],
['2020-04-01T02:00', 650],
['2020-04-01T03:00', 500]
]
}]
};
```

This option works (which is the expected result):
```js
option = {
xAxis: { type: 'time' },
yAxis: { type: 'value' },
visualMap: {
type: 'piecewise',
show: false,
dimension: 0,
pieces: [{
gt: new Date('2020-04-01T00:00'),
lte: new Date('2020-04-01T01:00'),
color: 'blue'
}, {
gt: new Date('2020-04-01T01:00'),
lte: new Date('2020-04-01T04:00'),
color: 'red'
}]
},
tooltip:{ trigger: "axis" },
series: [{
type: 'line',
data: [
['2020-04-01T00:00', 200],
['2020-04-01T01:00', 400],
['2020-04-01T02:00', 650],
['2020-04-01T03:00', 500]
]
}]
};
```
But users are not easy to know they should config `visualMap` like that.

### What is expected?
Make the previous option work.

### What is actually happening?
It not works and throws an error.

### Related issue

#12366