jQuery基于echarts.js制作全国线下门店销售额,订单统计地图分布统计图表代码。点击地图省份板块,进入省份线下城市板块效果。中国地图上面数据气泡显示、提示效果。
使用方法
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、全国省份数据修改以”北京“为例
<script> var toolTipData = [{ "provinceName": "北京", "provinceKey": 110000, "cityName": null, "cityKey": null, "shopCount": 58, //门店数 "totalPrice": 860448.7, //销售额 "orderCount": 31744, //订单数 "onlineCount": 0 }] </script>
建议修改:shopCount,totalPrice,orderCount这三个参数即可。其它不要乱改