echarts全國門店銷售地圖分布代碼

jQuery基于echarts.js制作全國線下門店銷售額，訂單統(tǒng)計地圖分布統(tǒng)計圖表代碼。點擊地圖省份板塊，進入省份線下城市板塊效果。中國地圖上面數(shù)據(jù)氣泡顯示、提示效果。

使用方法：

1、head引入css文件

<style>
    body {
        background:#fafafa;
    }
    .box {
        position:relative;
        width:800px;
        margin:0 auto;
        padding-top:60px;
    }
    #china-map {
        width:760px;
        height:660px;
        margin:auto;
    }
    #back {
        position:absolute;
        top:10px;
        left:0;
        cursor:pointer;
    }
    .hidden {
        display:none;
    }
</style>

2、head引入js文件

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/map/china.js"></script>

3、body引入HTML代碼

<div class="box">
	<button id="back" class="hidden">返回全國</button>
	<div id="china-map"></div>
</div>

4、全國省份數(shù)據(jù)修改以”北京“為例

<script>
var toolTipData = [{
	"provinceName": "北京",
	"provinceKey": 110000,
	"cityName": null,
	"cityKey": null,
	"shopCount": 58,  //門店數(shù) 
	"totalPrice": 860448.7,  //銷售額
	"orderCount": 31744,  //訂單數(shù)
	"onlineCount": 0
}]
</script>

建議修改：shopCount，totalPrice，orderCount這三個參數(shù)即可。其它不要亂改

使用聲明

1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權，著作權歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權，請勿用于商業(yè)用途，會員不得以任何形式發(fā)布、傳播、復制、轉售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統(tǒng)商業(yè)用途請預先授權。

查看演示下載資源

1437 21303 64