ECharts地图使用

小鱼儿 2022-08-09 18:39 541阅读 0赞

**ECharts地图使用**

最近项目开发中用到了ECharts地图，感觉ECharts地图美观炫酷，所以写篇博客记录下来。

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库[ZRender][]，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

![Center][]

模块化包引入

如果熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如[esl.js][]，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载[zrender][]到本地，可参考[demo][]，你需要配置如下。

需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。

//from echarts example
    require.config({
        packages: [
            {
                name: 'echarts',
                location: '../../src',
                main: 'echarts'
            },
            {
                name: 'zrender',
                location: '../../../zrender/src', // zrender与echarts在同一级目录
                main: 'zrender'
            }
        ]
    });

模块化单文件引入（推荐）

如果使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。

自2.1.8起，我们为echarts开发了专门的合并压缩工具[echarts-optimizer][]。如你所发现的，build文件夹下已经包含了由[echarts-optimizer][]生成的单文件：

*  dist（文件夹） : 经过合并、压缩的单文件
 *   *  echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
     *  chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
        
         *  line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
         *  bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
         *  scatter.js : 散点图
         *  k.js : K线图
         *  pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
         *  radar.js : 雷达图
         *  map.js : 地图
         *  force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
         *  chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
         *  funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
         *  gauge.js : 仪表盘
         *  eventRiver.js : 事件河流图
         *  treemap.js : 矩阵树图
         *  venn.js : 韦恩图
 *  source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试

采用单一文件使用例子见[ECharts单一文件引入][ECharts]，存放在example/www下，首先你需要通过script标签引入echarts主文件

//from echarts example
    <body>
        <div id="main" style="height:400px;"></div>
        ...
        <script src="./js/echarts.js"></script>
    </body>

在主文件引入后你将获得一个AMD环境，配置require.conifg如下：

require.config配置后就可以通过动态加载使用echarts

//from echarts example
    <body>
        <div id="main" style="height:400px;"></div>
        ...
        <script src="./js/echarts.js"></script>
        <script type="text/javascript">
            require.config({
                paths: {
                    echarts: './js/dist'
                }
            });
            require(
                [
                    'echarts',
                    'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                    'echarts/chart/bar'
                ],
                function (ec) {
                    var myChart = ec.init(document.getElementById('main'));
                    var option = {
                        ...
                    }
                    myChart.setOption(option);
                }
            );
        </script>
    </body>

总结来说，模块化单文件引入ECharts，你需要如下4步：

1.  为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
2.  通过script标签引入echarts主文件
3.  为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明
4.  动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）

我的js插件路径：如下图

![Center 1][]

页面引入js:

声明js包的路径

require.config({
                paths: {
                    'echarts':"static/echarts/doc/example/www/js",
                    'echarts/chart/map': "static/echarts/doc/example/www/js/chart",
                    'zrender':"static/echarts/zrender"
                }
            });

动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径

// Step:4 require echarts and use it in the callback.
            // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
            require(
            [
                'echarts',
                'echarts/chart/map' //按需加载图表关于地图相关的js文件
            ],
                DrawEChart //异步加载的回调函数绘制图表
            );

以下贴出整个页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta charset="utf-8">
    	<title>echarts使用</title>
    </head>
    
    <body>
    	<div id="main" style="height:800px;"></div>
    
    	<script src="static/echarts/doc/asset/js/esl/esl.js"
    		type="text/javascript"></script>
    	<script src="static/echarts/doc/example/www/js/echarts.js"
    		type="text/javascript"></script>
    	<script src="static/echarts/doc/example/www/js/chart/map.js"
    		type="text/javascript"></script>
    	<script src="static/echarts/doc/example/www/js/chart/map.js"
    		type="text/javascript"></script>
    	<script src="static/echarts/doc/asset/js/jquery.min.js"
    		type="text/javascript"></script>
    
    	<script type="text/javascript">
            //声明js包的路径
            require.config({
                paths: {
                    'echarts':"static/echarts/doc/example/www/js",
                    'echarts/chart/map': "static/echarts/doc/example/www/js/chart",
                    'zrender':"static/echarts/zrender"
                }
            });
            // Step:4 require echarts and use it in the callback.
            // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
            require(
            [
                'echarts',
                'echarts/chart/map' //按需加载图表关于地图相关的js文件
            ],
                DrawEChart //异步加载的回调函数绘制图表
            );
    
            var myChart;
    
            //创建ECharts图表方法
    		function DrawEChart(ec) {
    			debugger;
    			//定义图表options
    			var option = {
    				backgroundColor : '#1b1b1b',
    				color: ['gold','aqua','lime'],
                title : {
                    text: '模拟迁徙',
                    subtext:'数据纯属虚构',
                    x:'center',
                    textStyle : {
                        color: '#fff'
                    }
                },
                tooltip : {
                    trigger: 'item',
                    formatter: function (v) {
                        return v[1].replace(':', ' > ');
                    }
                },
                legend: {
                    orient: 'vertical',
                    x:'left',
                    data:['北京', '上海', '广州'],
                    selectedMode: 'single',
                    selected:{
                        '上海' : false,
                        '广州' : false
                    },
                    textStyle : {
                        color: '#fff'
                    }
                },
                toolbox: {
                    show : true,
                    orient : 'vertical',
                    x: 'right',
                    y: 'center',
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                dataRange: {
                    min : 0,
                    max : 100,
                    range: {
                        start: 10,
                        end: 90
                    },
                    x: 'right',
                    calculable : true,
                    color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
                    textStyle:{
                        color:'#fff'
                    }
                },
                series : [
                    {
                        name:'世界地图',
                        type:'map',
                        mapType: 'world',
                        data:[],
                        // 自定义名称
                        nameMap : {
                    'Afghanistan':'阿富汗',
                    'Angola':'安哥拉',
                    'Albania':'阿尔巴尼亚',
                    'United Arab Emirates':'阿联酋',
                    'Argentina':'阿根廷',
                    'Armenia':'亚美尼亚',
                    'French Southern and Antarctic Lands':'法属南半球和南极领地',
                    'Australia':'澳大利亚',
                    'Austria':'奥地利',
                    'Azerbaijan':'阿塞拜疆',
                    'Burundi':'布隆迪',
                    'Belgium':'比利时',
                    'Benin':'贝宁',
                    'Burkina Faso':'布基纳法索',
                    'Bangladesh':'孟加拉国',
                    'Bulgaria':'保加利亚',
                    'The Bahamas':'巴哈马',
                    'Bosnia and Herzegovina':'波斯尼亚和黑塞哥维那',
                    'Belarus':'白俄罗斯',
                    'Belize':'伯利兹',
                    'Bermuda':'百慕大',
                    'Bolivia':'玻利维亚',
                    'Brazil':'巴西',
                    'Brunei':'文莱',
                    'Bhutan':'不丹',
                    'Botswana':'博茨瓦纳',
                    'Central African Republic':'中非共和国',
                    'Canada':'加拿大',
                    'Switzerland':'瑞士',
                    'Chile':'智利',
                    'China':'中国',
                    'Ivory Coast':'象牙海岸',
                    'Cameroon':'喀麦隆',
                    'Democratic Republic of the Congo':'刚果民主共和国',
                    'Republic of the Congo':'刚果共和国',
                    'Colombia':'哥伦比亚',
                    'Costa Rica':'哥斯达黎加',
                    'Cuba':'古巴',
                    'Northern Cyprus':'北塞浦路斯',
                    'Cyprus':'塞浦路斯',
                    'Czech Republic':'捷克共和国',
                    'Germany':'德国',
                    'Djibouti':'吉布提',
                    'Denmark':'丹麦',
                    'Dominican Republic':'多明尼加共和国',
                    'Algeria':'阿尔及利亚',
                    'Ecuador':'厄瓜多尔',
                    'Egypt':'埃及',
                    'Eritrea':'厄立特里亚',
                    'Spain':'西班牙',
                    'Estonia':'爱沙尼亚',
                    'Ethiopia':'埃塞俄比亚',
                    'Finland':'芬兰',
                    'Fiji':'斐',
                    'Falkland Islands':'福克兰群岛',
                    'France':'法国',
                    'Gabon':'加蓬',
                    'United Kingdom':'英国',
                    'Georgia':'格鲁吉亚',
                    'Ghana':'加纳',
                    'Guinea':'几内亚',
                    'Gambia':'冈比亚',
                    'Guinea Bissau':'几内亚比绍',
                    'Equatorial Guinea':'赤道几内亚',
                    'Greece':'希腊',
                    'Greenland':'格陵兰',
                    'Guatemala':'危地马拉',
                    'French Guiana':'法属圭亚那',
                    'Guyana':'圭亚那',
                    'Honduras':'洪都拉斯',
                    'Croatia':'克罗地亚',
                    'Haiti':'海地',
                    'Hungary':'匈牙利',
                    'Indonesia':'印尼',
                    'India':'印度',
                    'Ireland':'爱尔兰',
                    'Iran':'伊朗',
                    'Iraq':'伊拉克',
                    'Iceland':'冰岛',
                    'Israel':'以色列',
                    'Italy':'意大利',
                    'Jamaica':'牙买加',
                    'Jordan':'约旦',
                    'Japan':'日本',
                    'Kazakhstan':'哈萨克斯坦',
                    'Kenya':'肯尼亚',
                    'Kyrgyzstan':'吉尔吉斯斯坦',
                    'Cambodia':'柬埔寨',
                    'South Korea':'韩国',
                    'Kosovo':'科索沃',
                    'Kuwait':'科威特',
                    'Laos':'老挝',
                    'Lebanon':'黎巴嫩',
                    'Liberia':'利比里亚',
                    'Libya':'利比亚',
                    'Sri Lanka':'斯里兰卡',
                    'Lesotho':'莱索托',
                    'Lithuania':'立陶宛',
                    'Luxembourg':'卢森堡',
                    'Latvia':'拉脱维亚',
                    'Morocco':'摩洛哥',
                    'Moldova':'摩尔多瓦',
                    'Madagascar':'马达加斯加',
                    'Mexico':'墨西哥',
                    'Macedonia':'马其顿',
                    'Mali':'马里',
                    'Myanmar':'缅甸',
                    'Montenegro':'黑山',
                    'Mongolia':'蒙古',
                    'Mozambique':'莫桑比克',
                    'Mauritania':'毛里塔尼亚',
                    'Malawi':'马拉维',
                    'Malaysia':'马来西亚',
                    'Namibia':'纳米比亚',
                    'New Caledonia':'新喀里多尼亚',
                    'Niger':'尼日尔',
                    'Nigeria':'尼日利亚',
                    'Nicaragua':'尼加拉瓜',
                    'Netherlands':'荷兰',
                    'Norway':'挪威',
                    'Nepal':'尼泊尔',
                    'New Zealand':'新西兰',
                    'Oman':'阿曼',
                    'Pakistan':'巴基斯坦',
                    'Panama':'巴拿马',
                    'Peru':'秘鲁',
                    'Philippines':'菲律宾',
                    'Papua New Guinea':'巴布亚新几内亚',
                    'Poland':'波兰',
                    'Puerto Rico':'波多黎各',
                    'North Korea':'北朝鲜',
                    'Portugal':'葡萄牙',
                    'Paraguay':'巴拉圭',
                    'Qatar':'卡塔尔',
                    'Romania':'罗马尼亚',
                    'Russia':'俄罗斯',
                    'Rwanda':'卢旺达',
                    'Western Sahara':'西撒哈拉',
                    'Saudi Arabia':'沙特阿拉伯',
                    'Sudan':'苏丹',
                    'South Sudan':'南苏丹',
                    'Senegal':'塞内加尔',
                    'Solomon Islands':'所罗门群岛',
                    'Sierra Leone':'塞拉利昂',
                    'El Salvador':'萨尔瓦多',
                    'Somaliland':'索马里兰',
                    'Somalia':'索马里',
                    'Republic of Serbia':'塞尔维亚共和国',
                    'Suriname':'苏里南',
                    'Slovakia':'斯洛伐克',
                    'Slovenia':'斯洛文尼亚',
                    'Sweden':'瑞典',
                    'Swaziland':'斯威士兰',
                    'Syria':'叙利亚',
                    'Chad':'乍得',
                    'Togo':'多哥',
                    'Thailand':'泰国',
                    'Tajikistan':'塔吉克斯坦',
                    'Turkmenistan':'土库曼斯坦',
                    'East Timor':'东帝汶',
                    'Trinidad and Tobago':'特里尼达和多巴哥',
                    'Tunisia':'突尼斯',
                    'Turkey':'土耳其',
                    'United Republic of Tanzania':'坦桑尼亚联合共和国',
                    'Uganda':'乌干达',
                    'Ukraine':'乌克兰',
                    'Uruguay':'乌拉圭',
                    'United States of America':'美国',
                    'Uzbekistan':'乌兹别克斯坦',
                    'Venezuela':'委内瑞拉',
                    'Vietnam':'越南',
                    'Vanuatu':'瓦努阿图',
                    'West Bank':'西岸',
                    'Yemen':'也门',
                    'South Africa':'南非',
                    'Zambia':'赞比亚',
                    'Zimbabwe':'津巴布韦'
                },
                        geoCoord: {
                            '上海': [121.4648,31.2891],
                            '东莞': [113.8953,22.901],
                            '东营': [118.7073,37.5513],
                            '中山': [113.4229,22.478],
                            '临汾': [111.4783,36.1615],
                            '临沂': [118.3118,35.2936],
                            '丹东': [124.541,40.4242],
                            '丽水': [119.5642,28.1854],
                            '乌鲁木齐': [87.9236,43.5883],
                            '佛山': [112.8955,23.1097],
                            '保定': [115.0488,39.0948],
                            '兰州': [103.5901,36.3043],
                            '包头': [110.3467,41.4899],
                            '北京': [116.4551,40.2539],
                            '北海': [109.314,21.6211],
                            '南京': [118.8062,31.9208],
                            '南宁': [108.479,23.1152],
                            '南昌': [116.0046,28.6633],
                            '南通': [121.1023,32.1625],
                            '厦门': [118.1689,24.6478],
                            '台州': [121.1353,28.6688],
                            '合肥': [117.29,32.0581],
                            '呼和浩特': [111.4124,40.4901],
                            '咸阳': [108.4131,34.8706],
                            '哈尔滨': [127.9688,45.368],
                            '唐山': [118.4766,39.6826],
                            '嘉兴': [120.9155,30.6354],
                            '大同': [113.7854,39.8035],
                            '大连': [122.2229,39.4409],
                            '天津': [117.4219,39.4189],
                            '太原': [112.3352,37.9413],
                            '威海': [121.9482,37.1393],
                            '宁波': [121.5967,29.6466],
                            '宝鸡': [107.1826,34.3433],
                            '宿迁': [118.5535,33.7775],
                            '常州': [119.4543,31.5582],
                            '广州': [113.5107,23.2196],
                            '廊坊': [116.521,39.0509],
                            '延安': [109.1052,36.4252],
                            '张家口': [115.1477,40.8527],
                            '徐州': [117.5208,34.3268],
                            '德州': [116.6858,37.2107],
                            '惠州': [114.6204,23.1647],
                            '成都': [103.9526,30.7617],
                            '扬州': [119.4653,32.8162],
                            '承德': [117.5757,41.4075],
                            '拉萨': [91.1865,30.1465],
                            '无锡': [120.3442,31.5527],
                            '日照': [119.2786,35.5023],
                            '昆明': [102.9199,25.4663],
                            '杭州': [119.5313,29.8773],
                            '枣庄': [117.323,34.8926],
                            '柳州': [109.3799,24.9774],
                            '株洲': [113.5327,27.0319],
                            '武汉': [114.3896,30.6628],
                            '汕头': [117.1692,23.3405],
                            '江门': [112.6318,22.1484],
                            '沈阳': [123.1238,42.1216],
                            '沧州': [116.8286,38.2104],
                            '河源': [114.917,23.9722],
                            '泉州': [118.3228,25.1147],
                            '泰安': [117.0264,36.0516],
                            '泰州': [120.0586,32.5525],
                            '济南': [117.1582,36.8701],
                            '济宁': [116.8286,35.3375],
                            '海口': [110.3893,19.8516],
                            '淄博': [118.0371,36.6064],
                            '淮安': [118.927,33.4039],
                            '深圳': [114.5435,22.5439],
                            '清远': [112.9175,24.3292],
                            '温州': [120.498,27.8119],
                            '渭南': [109.7864,35.0299],
                            '湖州': [119.8608,30.7782],
                            '湘潭': [112.5439,27.7075],
                            '滨州': [117.8174,37.4963],
                            '潍坊': [119.0918,36.524],
                            '烟台': [120.7397,37.5128],
                            '玉溪': [101.9312,23.8898],
                            '珠海': [113.7305,22.1155],
                            '盐城': [120.2234,33.5577],
                            '盘锦': [121.9482,41.0449],
                            '石家庄': [114.4995,38.1006],
                            '福州': [119.4543,25.9222],
                            '秦皇岛': [119.2126,40.0232],
                            '绍兴': [120.564,29.7565],
                            '聊城': [115.9167,36.4032],
                            '肇庆': [112.1265,23.5822],
                            '舟山': [122.2559,30.2234],
                            '苏州': [120.6519,31.3989],
                            '莱芜': [117.6526,36.2714],
                            '菏泽': [115.6201,35.2057],
                            '营口': [122.4316,40.4297],
                            '葫芦岛': [120.1575,40.578],
                            '衡水': [115.8838,37.7161],
                            '衢州': [118.6853,28.8666],
                            '西宁': [101.4038,36.8207],
                            '西安': [109.1162,34.2004],
                            '贵阳': [106.6992,26.7682],
                            '连云港': [119.1248,34.552],
                            '邢台': [114.8071,37.2821],
                            '邯郸': [114.4775,36.535],
                            '郑州': [113.4668,34.6234],
                            '鄂尔多斯': [108.9734,39.2487],
                            '重庆': [107.7539,30.1904],
                            '金华': [120.0037,29.1028],
                            '铜川': [109.0393,35.1947],
                            '银川': [106.3586,38.1775],
                            '镇江': [119.4763,31.9702],
                            '长春': [125.8154,44.2584],
                            '长沙': [113.0823,28.2568],
                            '长治': [112.8625,36.4746],
                            '阳泉': [113.4778,38.0951],
                            '青岛': [120.4651,36.3373],
                            '韶关': [113.7964,24.7028]
                        },
                        
                        markLine : {
                            smooth:true,
                            /* effect : {
                                show: true,
                                scaleSize: 1,
                                period: 30,
                                color: '#fff',
                                shadowBlur: 10
                            },
                            itemStyle : {
                                normal: {
                                    borderWidth:1,
                                    lineStyle: {
                                        type: 'solid',
                                        shadowBlur: 10
                                    }
                                }
                            }, */
                            symbol: ['none', 'circle'],
                            symbolSize : 1,
                            itemStyle : {
                                normal: {
                                    color:'#fff',
                                    borderWidth:1,
                                    borderColor:'rgba(30,144,255,0.5)'
                                }
                            }, 
                            data : [
                                [{name:'北京'},{name:'包头',value:95}],
                                [{name:'北京'},{name:'北海'}],
                                [{name:'北京'},{name:'广州'}],
                                [{name:'北京'},{name:'郑州'}],
                                [{name:'北京'},{name:'长春'}],
                                [{name:'北京'},{name:'长治'}],
                                [{name:'北京'},{name:'重庆'}],
                                [{name:'北京'},{name:'长沙'}],
                                [{name:'北京'},{name:'成都'}],
                                [{name:'北京'},{name:'常州'}],
                                [{name:'北京'},{name:'丹东'}],
                                [{name:'北京'},{name:'大连'}],
                                [{name:'北京'},{name:'东营'}],
                                [{name:'北京'},{name:'延安'}],
                                [{name:'北京'},{name:'福州'}],
                                [{name:'北京'},{name:'海口'}],
                                [{name:'北京'},{name:'呼和浩特'}],
                                [{name:'北京'},{name:'合肥'}],
                                [{name:'北京'},{name:'杭州'}],
                                [{name:'北京'},{name:'哈尔滨'}],
                                [{name:'北京'},{name:'舟山'}],
                                [{name:'北京'},{name:'银川'}],
                                [{name:'北京'},{name:'衢州'}],
                                [{name:'北京'},{name:'南昌'}],
                                [{name:'北京'},{name:'昆明'}],
                                [{name:'北京'},{name:'贵阳'}],
                                [{name:'北京'},{name:'兰州'}],
                                [{name:'北京'},{name:'拉萨'}],
                                [{name:'北京'},{name:'连云港'}],
                                [{name:'北京'},{name:'临沂'}],
                                [{name:'北京'},{name:'柳州'}],
                                [{name:'北京'},{name:'宁波'}],
                                [{name:'北京'},{name:'南京'}],
                                [{name:'北京'},{name:'南宁'}],
                                [{name:'北京'},{name:'南通'}],
                                [{name:'北京'},{name:'上海'}],
                                [{name:'北京'},{name:'沈阳'}],
                                [{name:'北京'},{name:'西安'}],
                                [{name:'北京'},{name:'汕头'}],
                                [{name:'北京'},{name:'深圳'}],
                                [{name:'北京'},{name:'青岛'}],
                                [{name:'北京'},{name:'济南'}],
                                [{name:'北京'},{name:'太原'}],
                                [{name:'北京'},{name:'乌鲁木齐'}],
                                [{name:'北京'},{name:'潍坊'}],
                                [{name:'北京'},{name:'威海'}],
                                [{name:'北京'},{name:'温州'}],
                                [{name:'北京'},{name:'武汉'}],
                                [{name:'北京'},{name:'无锡'}],
                                [{name:'北京'},{name:'厦门'}],
                                [{name:'北京'},{name:'西宁'}],
                                [{name:'北京'},{name:'徐州'}],
                                [{name:'北京'},{name:'烟台'}],
                                [{name:'北京'},{name:'盐城'}],
                                [{name:'北京'},{name:'珠海'}],
                                [{name:'上海'},{name:'包头'}],
                                [{name:'上海'},{name:'北海'}],
                                [{name:'上海'},{name:'广州'}],
                                [{name:'上海'},{name:'郑州'}],
                                [{name:'上海'},{name:'长春'}],
                                [{name:'上海'},{name:'重庆'}],
                                [{name:'上海'},{name:'长沙'}],
                                [{name:'上海'},{name:'成都'}],
                                [{name:'上海'},{name:'丹东'}],
                                [{name:'上海'},{name:'大连'}],
                                [{name:'上海'},{name:'福州'}],
                                [{name:'上海'},{name:'海口'}],
                                [{name:'上海'},{name:'呼和浩特'}],
                                [{name:'上海'},{name:'合肥'}],
                                [{name:'上海'},{name:'哈尔滨'}],
                                [{name:'上海'},{name:'舟山'}],
                                [{name:'上海'},{name:'银川'}],
                                [{name:'上海'},{name:'南昌'}],
                                [{name:'上海'},{name:'昆明'}],
                                [{name:'上海'},{name:'贵阳'}],
                                [{name:'上海'},{name:'兰州'}],
                                [{name:'上海'},{name:'拉萨'}],
                                [{name:'上海'},{name:'连云港'}],
                                [{name:'上海'},{name:'临沂'}],
                                [{name:'上海'},{name:'柳州'}],
                                [{name:'上海'},{name:'宁波'}],
                                [{name:'上海'},{name:'南宁'}],
                                [{name:'上海'},{name:'北京'}],
                                [{name:'上海'},{name:'沈阳'}],
                                [{name:'上海'},{name:'秦皇岛'}],
                                [{name:'上海'},{name:'西安'}],
                                [{name:'上海'},{name:'石家庄'}],
                                [{name:'上海'},{name:'汕头'}],
                                [{name:'上海'},{name:'深圳'}],
                                [{name:'上海'},{name:'青岛'}],
                                [{name:'上海'},{name:'济南'}],
                                [{name:'上海'},{name:'天津'}],
                                [{name:'上海'},{name:'太原'}],
                                [{name:'上海'},{name:'乌鲁木齐'}],
                                [{name:'上海'},{name:'潍坊'}],
                                [{name:'上海'},{name:'威海'}],
                                [{name:'上海'},{name:'温州'}],
                                [{name:'上海'},{name:'武汉'}],
                                [{name:'上海'},{name:'厦门'}],
                                [{name:'上海'},{name:'西宁'}],
                                [{name:'上海'},{name:'徐州'}],
                                [{name:'上海'},{name:'烟台'}],
                                [{name:'上海'},{name:'珠海'}],
                                [{name:'广州'},{name:'北海'}],
                                [{name:'广州'},{name:'郑州'}],
                                [{name:'广州'},{name:'长春'}],
                                [{name:'广州'},{name:'重庆'}],
                                [{name:'广州'},{name:'长沙'}],
                                [{name:'广州'},{name:'成都'}],
                                [{name:'广州'},{name:'常州'}],
                                [{name:'广州'},{name:'大连'}],
                                [{name:'广州'},{name:'福州'}],
                                [{name:'广州'},{name:'海口'}],
                                [{name:'广州'},{name:'呼和浩特'}],
                                [{name:'广州'},{name:'合肥'}],
                                [{name:'广州'},{name:'杭州'}],
                                [{name:'广州'},{name:'哈尔滨'}],
                                [{name:'广州'},{name:'舟山'}],
                                [{name:'广州'},{name:'银川'}],
                                [{name:'广州'},{name:'南昌'}],
                                [{name:'广州'},{name:'昆明'}],
                                [{name:'广州'},{name:'贵阳'}],
                                [{name:'广州'},{name:'兰州'}],
                                [{name:'广州'},{name:'拉萨'}],
                                [{name:'广州'},{name:'连云港'}],
                                [{name:'广州'},{name:'临沂'}],
                                [{name:'广州'},{name:'柳州'}],
                                [{name:'广州'},{name:'宁波'}],
                                [{name:'广州'},{name:'南京'}],
                                [{name:'广州'},{name:'南宁'}],
                                [{name:'广州'},{name:'南通'}],
                                [{name:'广州'},{name:'北京'}],
                                [{name:'广州'},{name:'上海'}],
                                [{name:'广州'},{name:'沈阳'}],
                                [{name:'广州'},{name:'西安'}],
                                [{name:'广州'},{name:'石家庄'}],
                                [{name:'广州'},{name:'汕头'}],
                                [{name:'广州'},{name:'青岛'}],
                                [{name:'广州'},{name:'济南'}],
                                [{name:'广州'},{name:'天津'}],
                                [{name:'广州'},{name:'太原'}],
                                [{name:'广州'},{name:'乌鲁木齐'}],
                                [{name:'广州'},{name:'温州'}],
                                [{name:'广州'},{name:'武汉'}],
                                [{name:'广州'},{name:'无锡'}],
                                [{name:'广州'},{name:'厦门'}],
                                [{name:'广州'},{name:'西宁'}],
                                [{name:'广州'},{name:'徐州'}],
                                [{name:'广州'},{name:'烟台'}],
                                [{name:'广州'},{name:'盐城'}]
                            ]
                        },
                    markPoint : {
                            symbol:'emptyCircle',
                            symbolSize : function (v){
                                return 10 + v/10
                            },
                            effect : {
                                show: true,
                                shadowBlur : 0
                            },
                            itemStyle:{
                                normal:{
                                    label:{show:false}
                                }
                            },
                            data : [
                                {name:'上海',value:95},
                                {name:'广州',value:90},
                                {name:'大连',value:80},
                                {name:'南宁',value:70},
                                {name:'南昌',value:60},
                                {name:'拉萨',value:50},
                                {name:'长春',value:40},
                                {name:'包头',value:30},
                                {name:'重庆',value:20},
                                {name:'常州',value:10}
                            ]
                        }
                    }
                ]
            };
    
    			//图表对象渲染
    			myChart = ec.init(document.getElementById('main'));
    			var ecConfig = require('echarts/config');
    			myChart.setOption(option);
    		}
    	</script>
    </body>
    
    </html>

显示效果如下图：

![Center 2][]

![Center 3][]

[ZRender]: http://ecomfe.github.io/zrender/
[Center]: /images/20220731/833e251583cc4a6287a8393c9a8eb2ed.png
[esl.js]: https://github.com/ecomfe/esl
[zrender]: https://github.com/ecomfe/zrender
[demo]: http://echarts.baidu.com/doc/example/demo.html
[echarts-optimizer]: https://github.com/ecomfe/echarts-optimizer
[ECharts]: http://echarts.baidu.com/doc/example/www/index.html
[Center 1]: /images/20220731/399df6381e134c62915680288e8c3435.png
[Center 2]: /images/20220731/9acce9c9768f43c98a4fb3e117c28ab8.png
[Center 3]: /images/20220731/ad20cb1ffcd64aab93ce99358db7fde1.png