echarts-all实现炫酷地图markPoint流动指示图表效果代码
代码语言:html
所属分类:图表
代码描述:echarts-all实现炫酷地图markPoint流动指示图表效果代码,可作为人口迁移流动图、运输图等图表用途。
代码标签: echarts-all 炫酷 地图 markPoint 流动 指示 图表
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body style="background:#1B1B1B">
<div id="mainMap" style="height:400px;width: 700px;padding:10px;background:#1B1B1B"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-all.js"></script>
<script type="text/javascript">
$('#document').ready(function () {
getEcharts();
});
</script>
<script type="text/javascript">
function getEcharts() {
var myChart2 = echarts.init(document.getElementById('mainMap'));
myChart2.setOption({
dataRange: {
min: 0,
max: 100,
calculable: true,
color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
textStyle: {
color: '#fff'
}
},
series: [{
name: '全国',
type: 'map',
roam: true,
hoverable: false,
mapType: 'china',
itemStyle: {
normal: {
borderColor: 'rgba(100,149,237,1)',
borderWidth: 0.5,
areaStyle: {
color: '#1b1b1b'
}
}
},
data: [],
markLine: {
smooth: true,
symbol: ['none', 'circle'],
symbolSize: 1,
itemStyle: {
normal: {
color: '#fff',
borderWidth: 1,
borderColor: 'rgba(30,144,255,0.5)'
}
},
data: [],
},
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],
&#.........完整代码请登录后点击上方下载按钮下载查看
网友评论0