charts.geo3D和scatter3D绘制字定义省市区地图ECharts Gallery

20:11:45图表已生成
代码
var uploadedDataURL = "/asset/get/s/data-1545447470075-Agehfllqq.js";
var foot = [{
    id: "150",
    img: "http://127.0.0.1:81/data/upload/portal/20181127/5bfcf8200a048.jpg",
    name: "兴隆镇",
    title: "流动科技馆-兴隆站",
    value: [127.9, 46.44, 10]
}]
var size = parseInt($(window).width());
var mapSize = 100;
if (1720 < size && size < 1920) {
    mapSize = 75;
}

if (1200 < size && size < 1720) {
    mapSize = 90;
}
// 弹窗详情页的显示和控制
function get(point, params) {
    var id = params.data.id;
    $('#detail').css({
        top: point[1] - 60,
        left: point[0] + 120
    });
    var href = "{:U('Show/flow_content')}" + "/id/" + id;
    $('#detail a').attr('href', href);
    $('#detail img').attr('src', params.data.img);
    $('#detail,#mask').show();
    $('#detail h3').text(params.data.title);
    $('#mask').click(function() {
        $('#detail,#mask').hide();
    })
    $('#detail').on('mouseleave', function() {
        $('#detail,#mask').hide();
    })
}
var option = {
    tooltip: {
        show: true,
        backgroundColor: 'transparent',
        textStyle: {
            color: 'transparent'
        },
        position: function(point, params, dom, rect, size) {
            // 鼠标浮动控制展示的显示
            get(point, params)
        }
    },
    geo3D: {
        map: 'hlj', // 地图的名称，与hjk.js中的注册地图属性相对应
        itemStyle: {
            color: 'rgb(220,239,242)', // 颜色值
            areaColor: ['rgb(220,239,242)'], // 区域颜色
            borderWidth: 2, // 绘制边的粗细
            borderColor: '#f5f5f5', // 区域边的颜色
            opacity: 1, // 边的透明度
            emphasis: {
                areaColor: 'rgb(220,239,242)', // 鼠标悬浮的效果
            }
        },
        silent: true,
        boxHeight: 15,
        instancing: true,
        groundPlane: {
            show: false
        },
        aspectScale: 0.92,
        layoutCenter: ['50%', '50%'],
        layoutSize: 600,
        viewControl: {
            rotateSensitivity: 0, // 不能旋转
            alpha: 70, // x轴旋转
            beta: 0,
            projection: 'orthographic',
            orthographicSize: mapSize,
            maxOrthographicSize: mapSize,
            minOrthographicSize: mapSize,
            animationDurationUpdate: 5,
        },
        label: {
            show: true, // 初始化是否显示文本
            textStyle: {
                color: '#999', // 地图初始化区域字体颜色
                fontSize: 0, // 初始化字体大小
                opacity: 1, // 初始化透明度
                backgroundColor: '' // 初始化的背景颜色
            },
        },
        emphasis: { //当鼠标放上去  地区区域是否显示名称
            label: {
                show: true,
                textStyle: {
                    color: '#000',
                    fontSize: 3,
                    backgroundColor: ''
                }
            }
        },

        light: { //光照阴影
            main: {
                color: '#fff', //光照颜色
                intensity: 1.2, //光照强度
                //shadowQuality: 'high', //阴影亮度
                shadow: true, //是否显示阴影
                alpha: 55,
                beta: 10
            },
            ambient: {
                intensity: 0.3
            }
        }
    },
    visualMap: {
        min: 10,
        max: 1000,
        textStyle: {
            color: '#fff',
        },
        formatter: function(val) {
            return val / 10
        },
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
        }
    },
    series: [{
        name: 'scatter3D',
        type: 'scatter3D', // 这里可以选择map(非3d的效果)、bar3D 
        coordinateSystem: 'geo3D', // 坐标系的旋转
        symbol: 'path://M201.142857 58.514286v658.285714s131.657143-160.914286 336.457143-73.142857c80.457143 43.885714 153.6 109.714286 277.942857 109.714286 124.342857 0 204.8-73.142857 204.8-73.142858V43.885714s-182.857143 182.857143-409.6 29.257143C552.228571 29.257143 449.828571-14.628571 369.371429 7.314286 281.6 29.257143 201.142857 58.514286 201.142857 58.514286M54.857143 1024c-29.257143 0-51.2-21.942857-51.2-58.514286V51.2C3.657143 21.942857 25.6 0 54.857143 0s51.2 21.942857 51.2 51.2v914.285714c7.314286 36.571429-14.628571 58.514286-51.2 58.514286z',
        //标点的大小
        data: foot,
        symbolSize: 30,
        label: {
            normal: {
                distance: 10,
                position: 'right',
                formatter: '{b}',
                show: true //根据需求可以更改标点标签是否显示
            },
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                color: '#ff5f5f'
            },
            emphasis: {
                color: '#1f6ccc'
            }
        }
    }]
};
myChart.setOption(option);
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
