淘先锋技术网

首页 1 2 3 4 5 6 7

项目中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'
						}
					}],