1.图例展示两列
legend可以写成数组,里面有两个对象,data: legendData.slice(0, 4)
分割
legend: [{
type: "scroll", //可滚动
orient: 'vertical',
icon: 'rect',
left: '0%',
align: 'left',
top: '65%',
itemWidth: 10,
itemHeight: 10,
formatter: function (name) {
return `{a|${name}:}{percent|${objData[name].value}%}`
},
textStyle: {
rich: {
a: {
fontSize: 12,
color: '#8fbfef',
},
percent: {
color: '#82baff',
fontSize: 12,
align: 'right',
// padding: [0, 0, 0, 20]
}
}
},
data: legendData.slice(0, 4)
}, {
type: "scroll",
orient: 'vertical',
icon: 'rect',
left: '50%',
align: 'left',
top: '65%',
itemWidth: 10,
itemHeight: 10,
formatter: function (name) {
return `{a|${name}:}{percent|${objData[name].value}%}`
},
textStyle: {
rich: {
a: {
fontSize: 12,
color: '#8fbfef',
},
percent: {
color: '#82baff',
fontSize: 12,
align: 'right',
// padding: [0, 0, 0, 20]
}
}
},
data: legendData.slice(4, 8)
},],
2.地图隐藏南海
修改属性 “geo.regions”
geo: {
map: 'china',
zoom: 1, //当前视角的缩放比例
roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 3
},
// 这里是重点!!!
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
}
],
show: true,
label: {
emphasis: {
show: false
}
},
layoutSize: "100%",
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
}
},