diff --git a/css/common.css b/css/common.css
index 9756872..303f93e 100644
--- a/css/common.css
+++ b/css/common.css
@@ -1,9 +1,9 @@
-[v-cloak]{
- display: none!important;
+[v-cloak] {
+ display: none !important;
}
/**占满屏幕**/
-.page-fill{
+.page-fill {
width: 100%;
height: 100%;
display: block;
@@ -11,88 +11,124 @@
}
/**card**/
-.ok-card-body{
+.ok-card-body {
padding: 20px;
position: relative;
width: 100%;
box-sizing: border-box;
}
-.ok-card-body-tb{
+
+.ok-card-body-tb {
padding: 20px 0;
position: relative;
width: 100%;
box-sizing: border-box;
}
-.ok-card{
- -webkit-box-shadow: 0 0 20px rgba(0,0,0,.08);
- box-shadow: 0 0 20px rgba(0,0,0,.08);
+
+.ok-card {
+ -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .08);
+ box-shadow: 0 0 20px rgba(0, 0, 0, .08);
border-radius: 5px;
}
/**断行**/
-.wp1{ word-break:break-all; }/*只对英文起作用,以字母作为换行依据*/
-.wp2{ word-wrap:break-word; }/*--只对英文起作用,以单词作为换行依据*/
-.wp3{white-space:pre-wrap; }/*只对中文起作用,强制换行*/
-.wp4{white-space:nowrap; }/*强制不换行,都起作用*/
+.wp1 {
+ word-break: break-all;
+}
+
+/*只对英文起作用,以字母作为换行依据*/
+.wp2 {
+ word-wrap: break-word;
+}
+
+/*--只对英文起作用,以单词作为换行依据*/
+.wp3 {
+ white-space: pre-wrap;
+}
+
+/*只对中文起作用,强制换行*/
+.wp4 {
+ white-space: nowrap;
+}
+
+/*强制不换行,都起作用*/
/**边距**/
-.p0{
- padding: 0!important;
+.p0 {
+ padding: 0 !important;
}
-.ptb0{
- padding-top: 0!important;
- padding-bottom: 0!important;
+
+.ptb0 {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
}
-.plr0{
- padding-left: 0!important;
- padding-right: 0!important;
+
+.plr0 {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
}
-.ptb20{
- padding-top: 20px!important;
- padding-bottom: 20px!important;
+
+.ptb20 {
+ padding-top: 20px !important;
+ padding-bottom: 20px !important;
}
-.plr20{
- padding-left: 20px!important;
- padding-right: 20px!important;
+
+.plr20 {
+ padding-left: 20px !important;
+ padding-right: 20px !important;
}
-.pl20{
- padding-left: 20px!important;
+
+.pl20 {
+ padding-left: 20px !important;
}
-.pr20{
- padding-right: 20px!important;
+
+.pr20 {
+ padding-right: 20px !important;
}
/**浮动**/
-.f-left{
+.f-left {
float: left;
}
-.f-right{
+
+.f-right {
float: right;
}
-.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
+
+.clearfix:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden
+}
/**卡片样式**/
-.my-cart{
- -webkit-box-shadow: 0 0 20px rgba(0,0,0,.08);
- box-shadow: 0 0 20px rgba(0,0,0,.08);
+.my-cart {
+ -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .08);
+ box-shadow: 0 0 20px rgba(0, 0, 0, .08);
border-radius: 5px;
}
/**颜色**/
-.bg-white{
- background: white!important;
+.bg-white {
+ background: white !important;
}
-.col-white{
- color: white!important;
+
+.col-white {
+ color: white !important;
}
+
.childrenBody {
padding: 15px;
background-color: #f1f2f7;
}
-.ok-card-list{
+
+.ok-card-list {
padding: 15px;
}
-.ok-card-list .ok-big-font{
+
+.ok-card-list .ok-big-font {
font-size: 36px;
color: #666;
line-height: 36px;
@@ -106,27 +142,29 @@
/*********************美化滚动条样式*********************/
-.not-scroll::-webkit-scrollbar{ /*不显示滚动条*/
+.not-scroll::-webkit-scrollbar { /*不显示滚动条*/
height: 0;
width: 0;
background: transparent;
display: none;
}
-.scrollBody::-webkit-scrollbar{/*不显示滚动条*/
+
+.scrollBody::-webkit-scrollbar { /*不显示滚动条*/
display: none;
}
::-webkit-scrollbar,
-.scrollBody::-webkit-scrollbar{
+.scrollBody::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #F5F5F5;
}
+
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track,
.scrollBody::-webkit-scrollbar-track {
/*border-radius: 10px;*/
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #FFFFFF;
}
@@ -134,55 +172,62 @@
::-webkit-scrollbar-thumb,
.scrollBody::-webkit-scrollbar-thumb {
/*border-radius: 10px;*/
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #A8A8A8;
}
/**内页body滚动条样式**/
::-webkit-scrollbar,
-.ok-body-scroll::-webkit-scrollbar{
+.ok-body-scroll::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #FFFFFF;
}
+
::-webkit-scrollbar-track,
-.ok-body-scroll::-webkit-scrollbar-track{/*定义滚动条轨道 内阴影+圆角*/
+.ok-body-scroll::-webkit-scrollbar-track { /*定义滚动条轨道 内阴影+圆角*/
/*border-radius: 10px;*/
background-color: #FFFFFF;
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}
+
::-webkit-scrollbar-thumb,
-.ok-body-scroll::-webkit-scrollbar-thumb{/*定义滑块 内阴影+圆角*/
+.ok-body-scroll::-webkit-scrollbar-thumb { /*定义滑块 内阴影+圆角*/
border-radius: 10px;
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
background-color: #dadada;
}
/*进度条颜色*/
-.per-bg-a{
- background:#00c292 !important;
+.per-bg-a {
+ background: #00c292 !important;
}
-.per-bg-b{
- background:#ab8ce4 !important;
+
+.per-bg-b {
+ background: #ab8ce4 !important;
}
-.per-bg-c{
+
+.per-bg-c {
background: #03a9f3 !important;
}
-.per-bg-d{
- background:#fb9678 !important;
+
+.per-bg-d {
+ background: #fb9678 !important;
}
/*减去220是左侧的菜单宽度为220*/
-@media screen and (max-width: 750px) {/*当屏幕宽度小于970-220时执行*/
- .ok-in-hide-md{
- display: none!important;
+@media screen and (max-width: 750px) {
+ /*当屏幕宽度小于970-220时执行*/
+ .ok-in-hide-md {
+ display: none !important;
}
}
-@media screen and (max-width: 548px) {/*当屏幕宽度小于768-220时执行*/
+@media screen and (max-width: 548px) {
+ /*当屏幕宽度小于768-220时执行*/
[ok-pc-in-show],
.ok-in-hide-xs {
display: none !important;
diff --git a/data/navs.json b/data/navs.json
index 865d8bb..287a733 100644
--- a/data/navs.json
+++ b/data/navs.json
@@ -63,14 +63,14 @@
"children": [
{
"title": "中国地图",
- "href": "pages/echarts/mapchina2.html",
- "icon": "",
+ "href": "pages/echarts/map-china.html",
+ "icon": "",
"spread": false
},
{
"title": "地区地图",
- "href": "pages/echarts/mapchina.html",
- "icon": "",
+ "href": "pages/echarts/map-area.html",
+ "icon": "",
"spread": false
}
]
@@ -84,31 +84,31 @@
{
"title": "统计图",
"href": "pages/echarts/map1.html",
- "icon": "",
+ "icon": "",
"spread": false
},
{
"title": "折线图",
"href": "pages/echarts/map2.html",
- "icon": "",
+ "icon": "",
"spread": false
},
{
"title": "馅饼图",
"href": "pages/echarts/map4.html",
- "icon": "",
+ "icon": "",
"spread": false
},
{
"title": "圆形图",
"href": "pages/echarts/map5.html",
- "icon": "",
+ "icon": "",
"spread": false
},
{
"title": "指数图",
"href": "pages/echarts/map6.html",
- "icon": "",
+ "icon": "",
"spread": false
}
]
diff --git a/js/echartsData.js b/js/echartsData.js
index 70e6662..ac91c54 100644
--- a/js/echartsData.js
+++ b/js/echartsData.js
@@ -1,572 +1,573 @@
function randomData() {
- return Math.round(Math.random()*500);
+ return Math.round(Math.random() * 500);
}
+
var mydata = [
- {name: '北京',value: '100' },{name: '天津',value: randomData() },
- {name: '上海',value: randomData() },{name: '重庆',value: randomData() },
- {name: '河北',value: randomData() },{name: '河南',value: randomData() },
- {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
- {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
- {name: '安徽',value: randomData() },{name: '山东',value: randomData() },
- {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
- {name: '浙江',value: randomData() },{name: '江西',value: randomData() },
- {name: '湖北',value: randomData() },{name: '广西',value: randomData() },
- {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
- {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
- {name: '吉林',value: randomData() },{name: '福建',value: randomData() },
- {name: '贵州',value: randomData() },{name: '广东',value: randomData() },
- {name: '青海',value: randomData() },{name: '西藏',value: randomData() },
- {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
- {name: '海南',value: randomData() },{name: '台湾',value: randomData() },
- {name: '香港',value: randomData() },{name: '澳门',value: randomData() }
+ {name: '北京', value: '100'}, {name: '天津', value: randomData()},
+ {name: '上海', value: randomData()}, {name: '重庆', value: randomData()},
+ {name: '河北', value: randomData()}, {name: '河南', value: randomData()},
+ {name: '云南', value: randomData()}, {name: '辽宁', value: randomData()},
+ {name: '黑龙江', value: randomData()}, {name: '湖南', value: randomData()},
+ {name: '安徽', value: randomData()}, {name: '山东', value: randomData()},
+ {name: '新疆', value: randomData()}, {name: '江苏', value: randomData()},
+ {name: '浙江', value: randomData()}, {name: '江西', value: randomData()},
+ {name: '湖北', value: randomData()}, {name: '广西', value: randomData()},
+ {name: '甘肃', value: randomData()}, {name: '山西', value: randomData()},
+ {name: '内蒙古', value: randomData()}, {name: '陕西', value: randomData()},
+ {name: '吉林', value: randomData()}, {name: '福建', value: randomData()},
+ {name: '贵州', value: randomData()}, {name: '广东', value: randomData()},
+ {name: '青海', value: randomData()}, {name: '西藏', value: randomData()},
+ {name: '四川', value: randomData()}, {name: '宁夏', value: randomData()},
+ {name: '海南', value: randomData()}, {name: '台湾', value: randomData()},
+ {name: '香港', value: randomData()}, {name: '澳门', value: randomData()}
];
layui.define(function (exports) {
- var mapTree = {
- "title": {
- "text": "堆叠区域图"
- },
- "tooltip": {
- "trigger": "axis",
- "axisPointer": {
- "type": "cross",
- "label": {
- "backgroundColor": "#6a7985"
- }
- }
- },
- "legend": {
- "data": [
- "邮件营销",
- "联盟广告",
- "视频广告",
- "直接访问",
- "搜索引擎"
- ]
- },
- "toolbox": {
- "feature": {
- "saveAsImage": {}
- }
- },
- "grid": {
- "left": "3%",
- "right": "4%",
- "bottom": "3%",
- "containLabel": true
- },
- "xAxis": [
- {
- "type": "category",
- "boundaryGap": false,
- "data": [
- "周一",
- "周二",
- "周三",
- "周四",
- "周五",
- "周六",
- "周日"
- ]
- }
- ],
- "yAxis": [
- {
- "type": "value"
- }
- ],
- "series": [
- {
- "name": "邮件营销",
- "type": "line",
- "stack": "总量",
- "areaStyle": {},
- "data": [
- 120,
- 132,
- 101,
- 134,
- 90,
- 230,
- 210
- ]
+ var mapTree = {
+ "title": {
+ "text": "堆叠区域图"
+ },
+ "tooltip": {
+ "trigger": "axis",
+ "axisPointer": {
+ "type": "cross",
+ "label": {
+ "backgroundColor": "#6a7985"
+ }
+ }
+ },
+ "legend": {
+ "data": [
+ "邮件营销",
+ "联盟广告",
+ "视频广告",
+ "直接访问",
+ "搜索引擎"
+ ]
+ },
+ "toolbox": {
+ "feature": {
+ "saveAsImage": {}
+ }
+ },
+ "grid": {
+ "left": "3%",
+ "right": "4%",
+ "bottom": "3%",
+ "containLabel": true
+ },
+ "xAxis": [
+ {
+ "type": "category",
+ "boundaryGap": false,
+ "data": [
+ "周一",
+ "周二",
+ "周三",
+ "周四",
+ "周五",
+ "周六",
+ "周日"
+ ]
+ }
+ ],
+ "yAxis": [
+ {
+ "type": "value"
+ }
+ ],
+ "series": [
+ {
+ "name": "邮件营销",
+ "type": "line",
+ "stack": "总量",
+ "areaStyle": {},
+ "data": [
+ 120,
+ 132,
+ 101,
+ 134,
+ 90,
+ 230,
+ 210
+ ]
+ },
+ {
+ "name": "联盟广告",
+ "type": "line",
+ "stack": "总量",
+ "areaStyle": {},
+ "data": [
+ 220,
+ 182,
+ 191,
+ 234,
+ 290,
+ 330,
+ 310
+ ]
+ },
+ {
+ "name": "视频广告",
+ "type": "line",
+ "stack": "总量",
+ "areaStyle": {},
+ "data": [
+ 150,
+ 232,
+ 201,
+ 154,
+ 190,
+ 330,
+ 410
+ ]
+ },
+ {
+ "name": "直接访问",
+ "type": "line",
+ "stack": "总量",
+ "areaStyle": {
+ "normal": {}
+ },
+ "data": [
+ 320,
+ 332,
+ 301,
+ 334,
+ 390,
+ 330,
+ 320
+ ]
+ },
+ {
+ "name": "搜索引擎",
+ "type": "line",
+ "stack": "总量",
+ "label": {
+ "normal": {
+ "show": true,
+ "position": "top"
+ }
+ },
+ "areaStyle": {
+ "normal": {}
+ },
+ "data": [
+ 820,
+ 932,
+ 901,
+ 934,
+ 1290,
+ 1330,
+ 1320
+ ]
+ }
+ ]
},
- {
- "name": "联盟广告",
- "type": "line",
- "stack": "总量",
- "areaStyle": {},
- "data": [
- 220,
- 182,
- 191,
- 234,
- 290,
- 330,
- 310
- ]
- },
- {
- "name": "视频广告",
- "type": "line",
- "stack": "总量",
- "areaStyle": {},
- "data": [
- 150,
- 232,
- 201,
- 154,
- 190,
- 330,
- 410
- ]
- },
- {
- "name": "直接访问",
- "type": "line",
- "stack": "总量",
- "areaStyle": {
- "normal": {}
- },
- "data": [
- 320,
- 332,
- 301,
- 334,
- 390,
- 330,
- 320
- ]
- },
- {
- "name": "搜索引擎",
- "type": "line",
- "stack": "总量",
- "label": {
- "normal": {
- "show": true,
- "position": "top"
- }
- },
- "areaStyle": {
- "normal": {}
- },
- "data": [
- 820,
- 932,
- 901,
- 934,
- 1290,
- 1330,
- 1320
- ]
- }
- ]
- },
- mapCircle = {
- "title": {
- "text": "某站点用户访问来源",
- "subtext": "",
- "x": "center"
- },
- "tooltip": {
- "trigger": "item",
- "formatter": "{a}
{b} : {c} ({d}%)"
- },
- "legend": {
- "orient": "vertical",
- "left": "left",
- "data": [
- "直接访问",
- "邮件营销",
- "联盟广告",
- "视频广告",
- "搜索引擎"
- ]
- },
- "series": [
- {
- "name": "访问来源",
- "type": "pie",
- "radius": "55%",
- "center": [
- "50%",
- "60%"
- ],
- "data": [
+ mapCircle = {
+ "title": {
+ "text": "某站点用户访问来源",
+ "subtext": "",
+ "x": "center"
+ },
+ "tooltip": {
+ "trigger": "item",
+ "formatter": "{a}
{b} : {c} ({d}%)"
+ },
+ "legend": {
+ "orient": "vertical",
+ "left": "left",
+ "data": [
+ "直接访问",
+ "邮件营销",
+ "联盟广告",
+ "视频广告",
+ "搜索引擎"
+ ]
+ },
+ "series": [
+ {
+ "name": "访问来源",
+ "type": "pie",
+ "radius": "55%",
+ "center": [
+ "50%",
+ "60%"
+ ],
+ "data": [
+ {
+ "value": 335,
+ "name": "直接访问"
+ },
+ {
+ "value": 310,
+ "name": "邮件营销"
+ },
+ {
+ "value": 234,
+ "name": "联盟广告"
+ },
+ {
+ "value": 135,
+ "name": "视频广告"
+ },
+ {
+ "value": 1548,
+ "name": "搜索引擎"
+ }
+ ],
+ "itemStyle": {
+ "emphasis": {
+ "shadowBlur": 10,
+ "shadowOffsetX": 0,
+ "shadowColor": "rgba(0, 0, 0, 0.5)"
+ }
+ }
+ }
+ ]
+ },
+
+ mapChina = {
+ "title": {
+ "text": "用户家庭所在地统计",
+ "subtext": "",
+ "x": "center"
+ },
+
+ "tooltip": {
+ "trigger": "item"
+ },
+
+ "visualMap": {
+ "color": [
+ "#eeeeee"
+ ],
+ "show": false,
+ "x": "left",
+ "y": "center",
+ "splitList": [
+ {
+ "start": 500,
+ "end": 600
+ },
+ {
+ "start": 400,
+ "end": 500
+ },
+ {
+ "start": 300,
+ "end": 400
+ },
+ {
+ "start": 200,
+ "end": 300
+ },
+ {
+ "start": 100,
+ "end": 200
+ },
+ {
+ "start": 0,
+ "end": 100
+ }
+ ]
+ },
+
+ "series": [
+ {
+ "name": "用户家庭所在地统计",
+ "roam": true,
+ "type": "map",
+ "mapType": "china",
+ "data": [],
+ "itemStyle": {
+ "normal": {
+ "areaColor": "#eeeeee",
+ "borderColor": "#aaaaaa",
+ "borderWidth": 0.5
+ },
+ "emphasis": {
+ "areaColor": "rgba(63,177,227,0.25)",
+ "borderColor": "#3fb1e3",
+ "borderWidth": 1
+ }
+ },
+ "label": {
+ "normal": {
+ "textStyle": {
+ "color": "#000"
+ }
+ },
+ "emphasis": {
+ "textStyle": {
+ "color": "#000"
+ }
+ }
+ }
+ }
+ ]
+ },
+
+ mapChina2 = {
+ "title": {
+ "text": "用户家庭所在地统计",
+ "subtext": "",
+ "x": "center"
+ },
+
+ "tooltip": {
+ "trigger": "item"
+ },
+
+ "visualMap": {
+ "show": true,//是否显示数据条
+ "min": 0,
+ "max": 1,
+ "left": 10,
+ "top": "center",
+ "orient": "vertical",
+ "text": [
+ "高",
+ "低"
+ ],
+ "realtime": false,
+ "calculable": true,
+ "inRange": {
+ "color": [
+ "#E0FFFF",
+ "#BEEFEC",
+ "#6cd2d2",
+ "#6CC8C1",
+ ]
+ }
+ },
+
+ "series": [
+ {
+ "name": "用户家庭所在地统计",
+ "roam": true,
+ "type": "map",
+ "mapType": "china",
+ "data": [],
+ "itemStyle": {
+ "normal": {
+ "areaColor": "#eeeeee",
+ "borderColor": "#aaaaaa",
+ "borderWidth": 0.5
+ },
+ "emphasis": {
+ "areaColor": "rgba(63,177,227,0.25)",
+ "borderColor": "#3fb1e3",
+ "borderWidth": 1
+ }
+ },
+ "label": {
+ "normal": {
+ "textStyle": {
+ "color": "#000"
+ }
+ },
+ "emphasis": {
+ "textStyle": {
+ "color": "#000"
+ }
+ }
+ }
+ }
+ ]
+ },
+
+ mapChina3 = {
+ backgroundColor: '#FFFFFF',
+ title: {
+ text: '全国地图大数据',
+ subtext: '',
+ x: 'center'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+
+ //左侧小导航图标
+ visualMap: {
+ show: true,
+ x: 'left',
+ y: 'center',
+ splitList: [
+ {start: 500, end: 600}, {start: 400, end: 500},
+ {start: 300, end: 400}, {start: 200, end: 300},
+ {start: 100, end: 200}, {start: 0, end: 100},
+ ],
+ color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
+ },
+
+ //配置属性
+ series: [{
+ name: '数据统计',
+ type: 'map',
+ mapType: 'china',
+ roam: false,//是否启用鼠标滚轮缩放地图
+ label: {
+ normal: {
+ show: true //省份名称
+ },
+ emphasis: {
+ show: false
+ }
+ },
+ data: mydata //数据
+ }]
+ },
+
+ Address = [
{
- "value": 335,
- "name": "直接访问"
+ "name": "北京",
+ "value": 100
},
{
- "value": 310,
- "name": "邮件营销"
+ "name": "天津",
+ "value": 83
},
{
- "value": 234,
- "name": "联盟广告"
+ "name": "上海",
+ "value": 113
},
{
- "value": 135,
- "name": "视频广告"
+ "name": "重庆",
+ "value": 188
},
{
- "value": 1548,
- "name": "搜索引擎"
- }
- ],
- "itemStyle": {
- "emphasis": {
- "shadowBlur": 10,
- "shadowOffsetX": 0,
- "shadowColor": "rgba(0, 0, 0, 0.5)"
- }
- }
- }
- ]
- },
-
- mapChina = {
- "title": {
- "text": "用户家庭所在地统计",
- "subtext": "",
- "x": "center"
- },
-
- "tooltip": {
- "trigger": "item"
- },
-
- "visualMap": {
- "color": [
- "#eeeeee"
- ],
- "show": false,
- "x": "left",
- "y": "center",
- "splitList": [
- {
- "start": 500,
- "end": 600
- },
- {
- "start": 400,
- "end": 500
- },
- {
- "start": 300,
- "end": 400
- },
- {
- "start": 200,
- "end": 300
- },
- {
- "start": 100,
- "end": 200
- },
- {
- "start": 0,
- "end": 100
- }
- ]
- },
-
- "series": [
- {
- "name": "用户家庭所在地统计",
- "roam": true,
- "type": "map",
- "mapType": "china",
- "data": [],
- "itemStyle": {
- "normal": {
- "areaColor": "#eeeeee",
- "borderColor": "#aaaaaa",
- "borderWidth": 0.5
+ "name": "河北",
+ "value": 197
},
- "emphasis": {
- "areaColor": "rgba(63,177,227,0.25)",
- "borderColor": "#3fb1e3",
- "borderWidth": 1
- }
- },
- "label": {
- "normal": {
- "textStyle": {
- "color": "#000"
- }
+ {
+ "name": "河南",
+ "value": 327
},
- "emphasis": {
- "textStyle": {
- "color": "#000"
- }
- }
- }
- }
- ]
- },
-
- mapChina2 = {
- "title": {
- "text": "用户家庭所在地统计",
- "subtext": "",
- "x": "center"
- },
-
- "tooltip": {
- "trigger": "item"
- },
-
- "visualMap": {
- "show": true,//是否显示数据条
- "min": 0,
- "max": 1,
- "left": 10,
- "top": "center",
- "orient": "vertical",
- "text": [
- "高",
- "低"
- ],
- "realtime": false,
- "calculable": true,
- "inRange": {
- "color": [
- "#E0FFFF",
- "#BEEFEC",
- "#6cd2d2",
- "#6CC8C1",
- ]
- }
- },
-
- "series": [
- {
- "name": "用户家庭所在地统计",
- "roam": true,
- "type": "map",
- "mapType": "china",
- "data": [],
- "itemStyle": {
- "normal": {
- "areaColor": "#eeeeee",
- "borderColor": "#aaaaaa",
- "borderWidth": 0.5
+ {
+ "name": "云南",
+ "value": 371
},
- "emphasis": {
- "areaColor": "rgba(63,177,227,0.25)",
- "borderColor": "#3fb1e3",
- "borderWidth": 1
- }
- },
- "label": {
- "normal": {
- "textStyle": {
- "color": "#000"
- }
+ {
+ "name": "辽宁",
+ "value": 224
},
- "emphasis": {
- "textStyle": {
- "color": "#000"
- }
+ {
+ "name": "黑龙江",
+ "value": 295
+ },
+ {
+ "name": "湖南",
+ "value": 463
+ },
+ {
+ "name": "安徽",
+ "value": 7
+ },
+ {
+ "name": "山东",
+ "value": 176
+ },
+ {
+ "name": "新疆",
+ "value": 0
+ },
+ {
+ "name": "江苏",
+ "value": 396
+ },
+ {
+ "name": "浙江",
+ "value": 472
+ },
+ {
+ "name": "江西",
+ "value": 243
+ },
+ {
+ "name": "湖北",
+ "value": 226
+ },
+ {
+ "name": "广西",
+ "value": 404
+ },
+ {
+ "name": "甘肃",
+ "value": 210
+ },
+ {
+ "name": "山西",
+ "value": 451
+ },
+ {
+ "name": "内蒙古",
+ "value": 97
+ },
+ {
+ "name": "陕西",
+ "value": 369
+ },
+ {
+ "name": "吉林",
+ "value": 221
+ },
+ {
+ "name": "福建",
+ "value": 216
+ },
+ {
+ "name": "贵州",
+ "value": 221
+ },
+ {
+ "name": "广东",
+ "value": 85
+ },
+ {
+ "name": "青海",
+ "value": 21
+ },
+ {
+ "name": "西藏",
+ "value": 414
+ },
+ {
+ "name": "四川",
+ "value": 380
+ },
+ {
+ "name": "宁夏",
+ "value": 205
+ },
+ {
+ "name": "海南",
+ "value": 73
+ },
+ {
+ "name": "台湾",
+ "value": 348
+ },
+ {
+ "name": "香港",
+ "value": 54
+ },
+ {
+ "name": "澳门",
+ "value": 340
}
- }
- }
- ]
- },
+ ];
- mapChina3 = {
- backgroundColor: '#FFFFFF',
- title: {
- text: '全国地图大数据',
- subtext: '',
- x: 'center'
- },
- tooltip: {
- trigger: 'item'
- },
-
- //左侧小导航图标
- visualMap: {
- show: true,
- x: 'left',
- y: 'center',
- splitList: [
- {start: 500, end: 600}, {start: 400, end: 500},
- {start: 300, end: 400}, {start: 200, end: 300},
- {start: 100, end: 200}, {start: 0, end: 100},
- ],
- color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
- },
-
- //配置属性
- series: [{
- name: '数据统计',
- type: 'map',
- mapType: 'china',
- roam: false,//是否启用鼠标滚轮缩放地图
- label: {
- normal: {
- show: true //省份名称
- },
- emphasis: {
- show: false
- }
- },
- data: mydata //数据
- }]
- },
-
- Address = [
- {
- "name": "北京",
- "value": 100
- },
- {
- "name": "天津",
- "value": 83
- },
- {
- "name": "上海",
- "value": 113
- },
- {
- "name": "重庆",
- "value": 188
- },
- {
- "name": "河北",
- "value": 197
- },
- {
- "name": "河南",
- "value": 327
- },
- {
- "name": "云南",
- "value": 371
- },
- {
- "name": "辽宁",
- "value": 224
- },
- {
- "name": "黑龙江",
- "value": 295
- },
- {
- "name": "湖南",
- "value": 463
- },
- {
- "name": "安徽",
- "value": 7
- },
- {
- "name": "山东",
- "value": 176
- },
- {
- "name": "新疆",
- "value": 0
- },
- {
- "name": "江苏",
- "value": 396
- },
- {
- "name": "浙江",
- "value": 472
- },
- {
- "name": "江西",
- "value": 243
- },
- {
- "name": "湖北",
- "value": 226
- },
- {
- "name": "广西",
- "value": 404
- },
- {
- "name": "甘肃",
- "value": 210
- },
- {
- "name": "山西",
- "value": 451
- },
- {
- "name": "内蒙古",
- "value": 97
- },
- {
- "name": "陕西",
- "value": 369
- },
- {
- "name": "吉林",
- "value": 221
- },
- {
- "name": "福建",
- "value": 216
- },
- {
- "name": "贵州",
- "value": 221
- },
- {
- "name": "广东",
- "value": 85
- },
- {
- "name": "青海",
- "value": 21
- },
- {
- "name": "西藏",
- "value": 414
- },
- {
- "name": "四川",
- "value": 380
- },
- {
- "name": "宁夏",
- "value": 205
- },
- {
- "name": "海南",
- "value": 73
- },
- {
- "name": "台湾",
- "value": 348
- },
- {
- "name": "香港",
- "value": 54
- },
- {
- "name": "澳门",
- "value": 340
- }
- ];
-
- exports('echartsData', {
- mapTree:mapTree,
- mapCircle:mapCircle,
- mapChina3:mapChina3,
- mapChina2:mapChina2,
- mapChina:mapChina,
- Address:Address
- });
+ exports('echartsData', {
+ mapTree: mapTree,
+ mapCircle: mapCircle,
+ mapChina3: mapChina3,
+ mapChina2: mapChina2,
+ mapChina: mapChina,
+ Address: Address
+ });
});
diff --git a/js/mapTest.js b/js/mapTest.js
index 98b2726..b03ba30 100644
--- a/js/mapTest.js
+++ b/js/mapTest.js
@@ -317,9 +317,9 @@ layui.define(function (exports) {
};
exports('mapTest', {
- option_a:option_a,
- option_b:option_b,
- option_c:option_c,
- option_d:option_d
+ option_a: option_a,
+ option_b: option_b,
+ option_c: option_c,
+ option_d: option_d
});
});
diff --git a/pages/echarts/map-area.html b/pages/echarts/map-area.html
new file mode 100644
index 0000000..51951f5
--- /dev/null
+++ b/pages/echarts/map-area.html
@@ -0,0 +1,99 @@
+
+
+