ECharts地图使用
最近项目开发中用到了ECharts地图，感觉ECharts地图美观炫酷，所以写篇博客记录下来。
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
模块化包引入
如果熟悉模块化开发，你的项目本身就是模块化且遵循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单一文件引入，存放在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如下：
//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'
}
});
</script>
</body>
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步：
- 为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
- 通过script标签引入echarts主文件
- 为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明
- 动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）
我的js插件路径：如下图
页面引入js:
<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>声明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 //异步加载的回调函数绘制图表
);<%@ 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>
扫一扫
6081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
