项目中visualMap 组件的图例默认都显示在一行了,导致屏幕放不下的问题
解决办法:在visualMap 使用数组格式,每行图例为一个对象,示例代码如下
visualMap: [
// 第一行图例
{
type: "piecewise",
top: 10,
left: 'center',
orient: "horizontal",
itemGap: 30,
textStyle: {
color: "#252631",
fontSize: 12,
fontWeight: "bold",
},
pieces: [ //判断值范围
{
gte: 1,
lt: 2,
color: '#28deff',
label: `I类(${this.waterChartRatio.ratio1 || "0%"})`
},
{
gte: 2,
lt: 3,
color: '#5473e8',
label: `II类(${this.waterChartRatio.ratio2 || "0%"})`
},
{
gte: 3,
lt: 4,
color: '#6ea553',
label: `III类(${this.waterChartRatio.ratio3 || "0%"})`
}
],
outOfRange: {
color: '#999'
}
},
// 第二行图例
{
type: "piecewise",
top: 30,
left: 'center',
orient: "horizontal",
itemGap: 30,
textStyle: {
color: "#252631",
fontSize: 12,
fontWeight: "bold",
},
pieces: [ //判断值范围
{
gte: 4,
lt: 5,
color: '#ff9f24',
label: `IV类(${this.waterChartRatio.ratio4 || "0%"})`
},
{
gte: 5,
lt: 6,
color: '#ffe400',
label: `V类(${this.waterChartRatio.ratio5 || "0%"})`
},
{
gte: 6,
color: '#d8464b',
label: `劣V类(${this.waterChartRatio.ratio6 || "0%"})`
}
],
outOfRange: {
color: '#999'
}
}],