echarts结合高度地图api实现可点击切换到省市区的全国销售数据统计图效果代码
代码语言:html
所属分类:图表
代码描述:echarts结合高度地图api实现可点击切换到省市区的全国销售数据统计图效果代码
代码标签: echarts 高度地图 api 点击 切换 省 市 区 全国 销售 数据 统计图
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
<script src="https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a&plugin=AMap.DistrictSearch"></script>
<script src="https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a" type="text/javascript"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-gl.js"></script>
<style type="text/css">
body{background-color: #191919}
#chart-panel {
width: 100%;
height: 770px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-top: 10px;
background-size: 100% auto;background-color: #0E0E29
}
#chart-panel .back{opacity: 0.5; position:absolute;left: 25px;top: 20px;color:#b3efff;font-size: 16px;cursor: not-allowed;z-index:100;}
</style>
</head>
<body>
<div id="chart-panel"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("chart-panel"));
$('<div class="back">返 回</div>').appendTo($('#chart-panel'));
$('.back').click(function() {
$(this).css({"cursor":"not-allowed","opacity":"0.5"})
if (parentInfo.length === 1) {return;}
parentInfo.pop()
init(parentInfo[parentInfo.length - 1].code)
})
var geoJson = {}
var parentInfo = [{cityName: '全国',code: 100000}]
var currentIndex = 0
var timeTitle = ['2015', '2016', '2017', '2018', '2019']
init(100000)
function init(adcode){
getGeoJson(adcode).then(data => {
geoJson = data
getMapData()
})
}
//这里封装了,直接可以拿过来用
function getGeoJson(adcode, childAdcode = '') {
return new Promise((resolve, reject) => {
function insideFun(adcode, childAdcode) {
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
var districtExplorer = new DistrictExplorer();
districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
if (error) {
console.error(e.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0