BootStrap+Echarts实现响应式中国地图
效果图：
1315×860
具体代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>地图</title> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="js/echarts.min.js"></script> <script src="js/china.js"></script> </head> <body> <div class="row"> <div class="col-md-12"> <div id="main" style="width: 100%;height: 800px"></div> </div> </div> <script> let myEcharts = echarts.init(document.getElementById("main")); let option = { title: { text: '中国地图', x: "center", textStyle: { fontSize: 18, color: "skyblue" }, }, tooltip: { trigger: 'item', backgroundColor: "skyblue", formatter: '地区：{b}<br/>数据：{c}', extraCssText:'width:120px;height:60px;' }, visualMap: { top: 'center', left: 'left', min: 10, max: 500000, text: ['High', 'Low'], realtime: false, calculable: true, inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } }, series: [ { name: '模拟数据', type: 'map', mapType: 'china', roam: false, center: ['50%','50%'], itemStyle: { normal: { label: { show: true, textStyle: { color: "black" } } }, zoom: 1.5, emphasis: { label: { show: true } } }, top: "3%", data: [ { name: '北京', value: 'xx' }, { name: '天津', value: 'xx' }, { name: '上海', value: 'xx' }, { name: '重庆', value: 'xx' }, { name: '河北', value: 'xx' }, { name: '河南', value: 'xx' }, { name: '云南', value: 'xx' }, { name: '辽宁', value: 'xx' }, { name: '黑龙江', value: 'xx' }, { name: '湖南', value: 'xx' }, { name: '安徽', value: 'xx' }, { name: '山东', value: 'xx' }, { name: '新疆', value: 'xx' }, { name: '江苏', value: 'xx' }, { name: '浙江', value: 'xx' }, { name: '江西', value: 'xx' }, { name: '湖北', value: 'xx' }, { name: '广西', value: 'xx' }, { name: '甘肃', value: 'xx' }, { name: '山西', value: 'xx' }, { name: '内蒙古', value: 'xx' }, { name: '陕西', value: 'xx' }, { name: '吉林', value: 'xx' }, { name: '福建', value: 'xx' }, { name: '贵州', value: 'xx' }, { name: '广东', value: 'xx' }, { name: '青海', value: 'xx' }, { name: '西藏', value: 'xx' }, { name: '四川', value: 'xx' }, { name: '宁夏', value: 'xx' }, { name: '海南', value: 'xx' }, { name: '台湾', value: 'xx' }, { name: '香港', value: 'xx' }, { name: '澳门', value: 'xx' } ] } ] }; myEcharts.setOption(option); window.onresize = function (){ myEcharts.resize(); } </script> </body> </html> 字段的配置信息可以在Echarts官方文档中查询
原文链接：https://blog.csdn.net/m0_46533814/article/details/122808598?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918469516781683976240%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918469516781683976240&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-13-122808598-null-null.nonecase&utm_term=%E9%A6%99%E6%B8%AFcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/2340
