Echarts实战案例代码(39)：地理坐标整体地图背景色渐变效果和字体随地图缩放的解决方案-阿里云开发者社区

Echarts实战案例代码(39)：地理坐标整体地图背景色渐变效果和字体随地图缩放的解决方案

2023-07-21 1110

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Echarts实战案例代码(39)：地理坐标整体地图背景色渐变效果和字体随地图缩放的解决方案

项目需求：

在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
    }]
};