<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#chart-panel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 1000px;
height: 750px;
}
</style>
<script src="./lib/5.5.0/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="chart-panel"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<script type="text/javascript">
//1、初始化图表对象。
var myChart = echarts.init(document.getElementById('chart-panel'));
//2、图表配置。
var uploadedDataURL = "./geo/map25.json";
$.get(uploadedDataURL, function (data) {
echarts.registerMap('wuhan', data);
var geoCoordMap = {
'微信': [113.8432, 31.01165],
'微博': [115.00461, 31.01165],
'热线': [115.00461, 30.08395],
'短信': [113.8432, 30.08395],
'武汉交管局': [114.24717, 30.62063]
};
var data = {
'微信': 20,
'微博': 30,
'热线': 44,
'短信': 30
};
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
let option = {
toolbox: {
feature: {
saveAsImage: {}
}
},
backgroundColor: '#1b1b1b',
title: {
text: '信息渠道',
left: '-5',
top: '10',
textStyle: {
color: '#ffffff',
fontFamily: '微软雅黑',
fontWeight: 'lighter',
fontSize: 18
}
},
tooltip: {
trigger: 'item',
formatter: function (o) {
return o.name + "：" + o.value[2] + "起";
}
},
geo: {
map: 'wuhan',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: 'rgba(22,22,2,0)',
borderColor: 'rgba(22,22,2,0)'
},
emphasis: {
areaColor: 'rgba(22,22,2,0)',
borderColor: 'rgba(22,22,2,0)'
}
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
period: 4,
scale: 2.5,
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: '80',
itemStyle: {
normal: {
color: '#0D6695',
}
},
data: [{
name: '微信',
value: geoCoordMap['微信'].concat(data.微信),
symbol: 'path://M266.048,191.088c50.663,0,92.957,30.761,102.883,71.688c-1.659-0.072-3.339-0.104-5.021-0.104c-55.207,0-99.959,38.572-99.959,86.153c0,7.81,1.204,15.359,3.465,22.554c-0.456,0-0.922,0.011-1.369,0.011c-13.611,0-26.619-2.21-38.559-6.256l-37.043,18.925l10.373-32.126c-24.295-16.517-39.875-42.044-39.875-70.698C160.943,231.442,207.999,191.088,266.048,191.088L266.048,191.088z M360.747,271.463c48.777,0,88.31,33.899,88.31,75.746c0,24.128-13.153,45.62-33.65,59.509l8.132,26.194L393.735,417.5l0.031-0.021c-10.208,3.535-21.349,5.475-33.02,5.475c-48.775,0-88.319-33.909-88.319-75.744C272.428,305.362,311.972,271.463,360.747,271.463L360.747,271.463z M392.864,310.91c6.494,0,11.773,5.287,11.773,11.813c0,6.549-5.279,11.847-11.773,11.847s-11.774-5.298-11.774-11.847C381.09,316.197,386.37,310.91,392.864,310.91L392.864,310.91z M334.513,310.91c6.493,0,11.774,5.287,11.774,11.813c0,6.549-5.281,11.847-11.774,11.847c-6.504,0-11.763-5.298-11.763-11.847C322.75,316.197,328.009,310.91,334.513,310.91L334.513,310.91z M229.523,234.299c8.081,0,14.637,6.58,14.637,14.704c0,8.112-6.556,14.702-14.637,14.702c-8.081,0-14.627-6.59-14.627-14.702C214.896,240.879,221.442,234.299,229.523,234.299L229.523,234.299z M302.055,234.299c8.08,0,14.626,6.58,14.626,14.704c0,8.112-6.546,14.702-14.626,14.702c-8.082,0-14.637-6.59-14.637-14.702C287.418,240.879,293.973,234.299,302.055,234.299L302.055,234.299z'
}, {
name: '微博',
value: geoCoordMap['微博'].concat(data.微博),
symbol: 'path://M124.302,345.927c0.08,59.373,76.261,95.476,150.779,95.476c97.736,0,162.761-56.793,162.761-101.885 c0-27.233-22.951-42.698-43.563-49.094c-5.053-1.503-8.537-2.54-5.877-9.188c5.73-14.441,6.329-26.901,0.106-35.783 c-11.676-16.662-43.589-15.771-80.184-0.452c0-0.014-11.489,5.026-8.551-4.083c5.625-18.098,4.774-33.243-3.976-42.006 c-19.854-19.854-72.644,0.758-117.922,46.009c-33.815,33.828-53.482,69.679-53.575,100.701V345.927L124.302,345.927z M275.268,420.101c-59.493,5.864-110.848-21.023-114.717-60.092c-3.856-39.055,41.262-75.476,100.754-81.354 c59.493-5.891,110.848,20.997,114.704,60.052C379.865,377.788,334.773,414.209,275.268,420.101L275.268,420.101z M459.185,181.664 c-23.604-26.17-58.416-36.143-90.569-29.308l0,0c-7.433,1.582-12.181,8.909-10.585,16.329c1.583,7.42,8.896,12.181,16.33,10.585 c22.871-4.854,47.604,2.247,64.386,20.837c16.768,18.59,21.329,43.948,14.135,66.168l0.014,0.014 c-2.34,7.233,1.609,14.986,8.856,17.326c7.233,2.327,14.999-1.622,17.34-8.843c0-0.014,0-0.04,0-0.053 C489.17,243.443,482.787,207.807,459.185,181.664L459.185,181.664z M422.936,214.376c-11.489-12.739-28.443-17.579-44.107-14.255 c-6.409,1.356-10.479,7.659-9.109,14.068c1.37,6.383,7.673,10.479,14.056,9.096v0.013c7.646-1.622,15.943,0.731,21.568,6.955 c5.611,6.236,7.128,14.72,4.708,22.18h0.026c-2.021,6.21,1.383,12.898,7.605,14.906c6.237,1.995,12.912-1.396,14.92-7.632 C437.522,244.481,434.451,227.114,422.936,214.376L422.936,214.376z M278.565,349.345c-2.088,3.563-6.688,5.279-10.292,3.79 c-3.537-1.463-4.654-5.439-2.633-8.937c2.074-3.471,6.488-5.173,10.025-3.763C279.257,341.738,280.547,345.768,278.565,349.345 L278.565,349.345z M259.604,373.679c-5.758,9.188-18.085,13.204-27.366,8.976c-9.149-4.175-11.835-14.84-6.091-23.789 c5.691-8.909,17.606-12.885,26.808-9.016C262.289,353.813,265.255,364.41,259.604,373.679L259.604,373.679z M281.225,308.708c-28.311-7.367-60.317,6.741-72.617,31.688c-12.513,25.438-0.412,53.682,28.19,62.923c29.64,9.548,64.56-5.093,76.7-32.552C325.479,34
