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'
                }
            }
        }
    };
  • 相关阅读:
    Java 原理性文章收录
    kafka connect userguide【confluence】
    curl 工具使用
    MySQL 数据类型
    Kafka Producer (0.10.0.0)原理
    Kafka Consumer 原理与实践
    java 泛型详解
    redis 高可用集群之水平扩展
    Redis 5.0.0 安装(集群)
    Apollo(阿波罗)架构深度剖析
  • 原文地址:https://www.cnblogs.com/raitorei/p/9933588.html
Copyright © 2011-2022 走看看