zoukankan      html  css  js  c++  java
  • echarts中国地图散点涟漪效果

    echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map

    代码:

    var data = [{
            name: '郑州',
            value: 100 //扩散的大小
        },
        {
            name: '北京',
            value: 100
        },
        {
            name: '香港',
            value: 100
        },
        {
            name: '上海',
            value: 100
        },
    ];
    var geoCoordMap = {
        '郑州': [113.649638, 34.75659],
        '香港': [114.186133, 22.29343],
        '北京': [116.395645, 39.92998],
        '上海': [121.487884, 31.24910]
    };
    
    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };
    
    option = {
        backgroundColor: '#404a59',
        tooltip: {
            trigger: 'item',
            formatter: function(obj) {
                return obj.name + ':' + obj.value[0] + ',' + obj.value[1];
            },
            textStyle: {
                fontSize: 18
            }
        },
        series: [{
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function(a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function(val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            zlevel: 2,
            rippleEffect: {
                period: 2.5, //波纹秒数
                brushType: 'fill', //stroke(涟漪)和fill(扩散),两种效果
                scale: 20 //波纹范围
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'top',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    show: true,
                    color: "#0579FA", //字体和点颜色
                    label: {
                        textStyle: {
                            fontWeight: 'bold', //字体
                            fontSize: 18, //字体大小
                            color: "#023AFD"
                        }
                    },
                }
            },
        }],
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            layoutCenter: ['50%', '50%'],
            layoutSize: "130%",
            itemStyle: {
                normal: {
                    color: '#51FFFF',
                    borderColor: '#0285FF'
                },
                emphasis: {
                    color: '#004881'
                }
            }
        }
    };
  • 相关阅读:
    MIne FirstBlog
    P6563 [SBCOI2020]一直在你身旁
    P6563 [SBCOI2020]一直在你身旁
    T122085 [SBCOI2020]时光的流逝
    LC 918. Maximum Sum Circular Subarray
    1026 Table Tennis
    LC 1442. Count Triplets That Can Form Two Arrays of Equal XOR
    LC 1316. Distinct Echo Substrings
    LC 493. Reverse Pairs
    1029 Median (二分)
  • 原文地址:https://www.cnblogs.com/raitorei/p/9933588.html
Copyright © 2011-2022 走看看