[Feature] Implement custom value range segmentation with corresponding color mapping using continuous visualMap

### What problem does this feature solve?

The display format is similar to the image below


### What does the proposed API look like?

visualMap: {
min: 0,
max: 100,
calculable: true,
realtime: false,
inRange: {
color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"],
value:[[0,0.1],[0.1,0.2],[0.2,0.3],[0.3,0.7].........,[16.1,17.2]]
}
}