代码信息

保存到分组
外部资源
$[libs.length]
暂无
- $[lib.showName]
添加新的资源

$[newLibMessage]

更多文件见开放CDN服务
快捷键
快捷键风格同 Sublime，同时支持 Emmet 特性，常用快捷键：

全局快捷键
- Ctrl + Enter：运行
- Ctrl + ←/→：折叠左侧菜单
- Ctrl + O：打开添加常用资源
- Ctrl + Z：撤销所有编辑器
- Ctrl + U：恢复所有编辑器
- F11：最大化运行结果
- ESC：关闭添加常用资源
编辑器快捷键
- Ctrl + Enter：运行
- Ctrl + /：注释代码
- Ctrl + H：格式化代码
- Ctrl + Z：撤销
- Ctrl + Y：恢复
- Tab：快捷生成代码
- Ctrl + L：选中当前行
- Ctrl + Q：折叠当前代码
- F11：最大化当前编辑器
关于

JShare 是一个在线代码测试、托管、分享的工具；

当前版本 $[base.version]，这里有更新日志；

使用前请查阅帮助文档及说明；

Copyright © 2020 JShare，由简数科技提供服务，浙ICP备16004892号-3

中国地图：用经纬度定位城市 | JShare

var data = [{ name: '河南', value: 9613, rank: 1 },
            { name: '山东', value: 9082, rank: 2 },
            { name: '四川', value: 8673, rank: 3 },
            { name: '广东', value: 7859, rank: 4 },
            { name: '江苏', value: 7381, rank: 5 },
            { name: '河北', value: 6735, rank: 6 },
            { name: '湖南', value: 6629, rank: 7 },
            { name: '安徽', value: 6338, rank: 8 },
            { name: '湖北', value: 5988, rank: 9 },
            { name: '广西', value: 4822, rank: 10 },
            { name: '浙江', value: 4647, rank: 11 },
            { name: '云南', value: 4333, rank: 12 },
            { name: '江西', value: 4222, rank: 13 },
            { name: '辽宁', value: 4203, rank: 14 },
            { name: '贵州', value: 3837, rank: 15 },
            { name: '黑龙江', value: 3813, rank: 16 },
            { name: '陕西', value: 3674, rank: 17 },
            { name: '福建', value: 3466, rank: 18 },
            { name: '山西', value: 3294, rank: 19 },
            { name: '重庆', value: 3107, rank: 20 },
            { name: '吉林', value: 2699, rank: 21 },
            { name: '甘肃', value: 2593, rank: 22 },
            { name: '内蒙古', value: 2379, rank: 23 },
            { name: '新疆', value: 1905, rank: 24 },
            { name: '上海', value: 1625, rank: 25 },
            { name: '北京', value: 1423, rank: 26 },
            { name: '天津', value: 1007, rank: 27 },
            { name: '海南', value: 803, rank: 28 },
            { name: '宁夏', value: 572, rank: 29 },
            { name: '青海', value: 529, rank: 30 },
            { name: '西藏', value: 267, rank: 31 },
            { name: '台湾', value: 0, rank: 0 }
           ];
var mapArray = Highcharts.maps['cn-with-city'];
var mappoint = Highcharts.geojson(mapArray, 'mappoint');
var map = null;
$('#container').highcharts('Map', {
    colors: ['#67B86D', '#19E1CF', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee',
             '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'
            ],
    credits: {
        enabled: true,
        text: '',
        style: {
            color: 'rgba(255, 255, 255, 0.6)'
        },
        position: {
            y: -40
        }
    },
    chart: {
        spacing: 10,
        //height: 360,
        //backgroundColor: '#F49952'
    },
    mapNavigation: {
        buttonOptions: {
            verticalAlign: 'bottom',
            theme: {
                fill: 'rgba(255, 255, 255, 0.2)',
                stroke: 'rgba(255, 255, 255, 0.7)',
                style: {
                    color: 'white'
                },
                states: {
                    hover: {
                        fill: 'rgba(255, 255, 255, 0.4)',
                        stroke: 'rgba(255, 255, 255, 0.7)'
                    },
                    select: {
                        fill: 'rgba(255, 255, 255, 0.4)',
                        stroke: 'rgba(255, 255, 255, 0.7)'
                    }
                }
            }
        },
        enabled: true,
        enableMouseWheelZoom: false
    },
    title: {
        text: '中国省份 & 城市人口',
        floating: true
    },
    subtitle: {
        text: '模拟数据仅供参考',
        floating: true,
        y: 30,
        style: {
            color: 'rgba(255, 255, 255, 0.9)'
        }
    },
    xAxis: {
        minRange: 200
    },
    colorAxis: {
        min: 0,
        stops: [
            [0, '#EFEFFF'],
            [0.5, Highcharts.getOptions().colors[0]],
            [1, '#006cee']
        ]
    },
    legend: {
        enabled: true,
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'bottom',
        //y: 30,
        //left: -20,
        floating: true
    },
    tooltip: {
        useHTML: true,
        headerFormat: '<span style="font-size: 10 px;font - weight: bold">{point.key}</span><table>',
        pointFormatter: function() {
            var str = '<tr><td>人口：</td><td ><b>';
            if (this.shapeType === 'circle') {
                str += this.z + '</b> 万</td></tr>';
            } else {
                str += (this.value || '-') + '</b> 千万</td></tr>' + '<tr><td>排名：</td><td><b>' + (this.rank || '-') + '</b></td></tr>';
            }
            return str;
        },
        footerFormat: '</table>'
    },
    plotOptions: {
        series: {
            animation: {
                // duration: animDuration
            }
        }
    },
    series: [{
        data: data,
        mapData: mapArray,
        joinBy: ['name', 'name'],
        name: '省份人口',
        showInLegend: false,
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        borderWidth: 1,
        dataLabels: {
            enabled: false,
            format: '{point.name}',
            style: {
                fontSize: '10px',
                fontWeight: 'normal',
                color: '#333',
                textShadow: 'none'
            }
        }
    }, {
        type: 'mappoint',
        name: 'Cities',
        color: Highcharts.getOptions().colors[3],
        data: [{
            name: '杭州',
            lat: 30.26,
            lon: 120.19
        },{
            name:'福州',
            lat:26.0741734513,
            lon:119.2964598587,
            color: 'red',
            marker: {
                symbol: 'circle',
                radius: 3
            }
        },{
            name: '黑龙江',
            lat: 45.7420515676,
            lon: 126.6628387132
        }]
    }],
    navigation: {
        buttonOptions: {
            symbolStroke: 'rgba(255, 255, 255, 0.8)',
            theme: {
                fill: 'rgba(255, 255, 255, 0.2)',
                states: {
                    hover: {
                        fill: 'rgba(255, 255, 255, 0.4)',
                        stroke: 'transparent'
                    },
                    select: {
                        fill: 'rgba(255, 255, 255, 0.4)',
                        stroke: 'transparent'
                    }
                }
            }
        }
    }
}, function(m) {
    map = m;
});
$('button').click(function(){
    // 参考 API文档：https://api.hcharts.cn/#Series.setData
    map.series[0].setData(
        [{ name: '河南', value: 9613, rank: 1 },
         { name: '山东', value: 9082, rank: 2 },
         { name: '四川', value: 8673, rank: 3 },
         { name: '广东', value: 7859, rank: 4 },
         { name: '江苏', value: 7381, rank: 5 },
         { name: '河北', value: 6735, rank: 6 },
         { name: '湖南', value: 6629, rank: 7 },
         { name: '安徽', value: 6338, rank: 8 },
         { name: '湖北', value: 5988, rank: 9 },
         { name: '广西', value: 4822, rank: 10 },
         { name: '浙江', value: 4647, rank: 11 },
         { name: '云南', value: 4333, rank: 12 },
         { name: '江西', value: 4222, rank: 13 },
         { name: '辽宁', value: 4203, rank: 14 }]
    );
});

<div id="container" style="height:400px"></div>
<script src="//img.hcharts.cn/mapdata/cn-with-citys.js"></script>
<script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script>
<button>更新</button>

{"resource":"1,30","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":0}}","code":{"code":"MhpTqX","name":"中国地图：用经纬度定位城市","version":3,"doctype":0,"description":"","meta":"","newGroup":441,"group":{"id":441,"name":"默认分组","code":"jianshukeji"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

中国地图：用经纬度定位城市 | JShare

模板（查看所有模板）

外部资源
$[libs.length]