项目需求:
在echarts地图上实现整体的渐变效果。
属性分析:
areaColor: {}
线性渐变
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 0.6)',
borderWidth: 0.8,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1500,
x2: 1000,
y2: 0,
colorStops: [{
offset: 0.5,
color: '#277aec' // 0% 处的颜色
}, {
offset: 1,
color: '#FF0033' // 100% 处的颜色
}],
global: true // 缺省为 false
},
},
emphasis: {
areaColor: 'rgba(147, 235, 248, 0)'
}
},
字体缩放
var myZoom;
myChart.on('georoam', function(params) {
if (params.dy || params.dx) {
return;
}
var _zoom = myChart.getOption().geo[0].zoom;
if (myZoom == _zoom) {
return;
}
option = myChart.getOption();
if (_zoom > myZoom) {
option.legend.selected = tempLegend;
var fontSize = option.series[0].label.fontSize;
if (fontSize + 1 > 26) {
option.series[0].label.fontSize = 26;
} else {
option.series[0].label.fontSize = fontSize + 1;
}
myChart.setOption(option);
} else {
var fontSize = option.series[0].label.fontSize;
if (fontSize - 1 < 12) {
option.series[0].label.fontSize = 12;
} else {
option.series[0].label.fontSize = fontSize - 1;
}
myChart.setOption(option);
}
myZoom = _zoom;
});
整体代码
option = {
backgroundColor: 'rgba(0, 10, 52, 1)',
series: [{
type: 'map',
map: 'china',
tooltip: {
show: false
},
label: {
show: true,
color: '#FFFFFF',
fontSize: 16
},
aspectScale: 0.75,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '100%',
roam: true,
geoIndex: 0,
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 0.6)',
borderWidth: 0.8,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1500,
x2: 1000,
y2: 0,
colorStops: [{
offset: 0.5,
color: '#277aec' // 0% 处的颜色
}, {
offset: 1,
color: '#FF0033' // 100% 处的颜色
}],
global: true // 缺省为 false
},
},
emphasis: {
areaColor: 'rgba(147, 235, 248, 0)'
}
},
zlevel: 1
}]
};
Done!