JS + Echarts实现中国地图 China.js |
您所在的位置：网站首页 › 中国地图的代码是什么 › JS + Echarts实现中国地图 China.js |
JS + Echarts实现中国地图 China.js
|
China.js文件现在已经下载不到了 China.js文件已经放到末尾了 China.json以及各个省市json可以私 效果图：
1.创建容器 我在CSS里给过了宽高 所以没写 复制的时候一定要加宽高！ 2.引入China.js 和 Echarts 这里Echarts用的CDN 5.3.2版本 3. 实例化代码 data_list是数据 瞎写的 建议折叠一下 (function () { const data_list = [{ name: '江苏', value: 0 }, { name: '安徽', value: 1 }, { name: '湖北', value: 1 }, { name: '湖南', value: 0 }, { name: '广东', value: 1 }, { name: '浙江', value: 1 }, { name: '福建', value: 1 }, { name: '山东', value: 1 }, { name: '河南', value: 4 }, { name: '四川', value: 0 }, { name: '河北', value: 0 }, { name: '江西', value: 0 }, { name: '黑龙江', value: 1 }, { name: '陕西', value: 0 }, { name: '贵州', value: 0 }, { name: '吉林', value: 0 }, { name: '广西', value: 1 }, { name: '山西', value: 0 }, { name: '云南', value: 0 }, { name: '辽宁', value: 0 }, { name: '甘肃', value: 0 }, { name: '重庆', value: 0 }, { name: '内蒙古', value: 0 }, { name: '海南', value: 0 }, { name: '天津', value: 0 }, { name: '新疆', value: 0 }, { name: '上海', value: 2 }, { name: '宁夏', value: 0 }, { name: '青海', value: 0 }, { name: '北京', value: 0 }, { name: '西藏', value: 0 }] let new_data_list = data_list.map((item, index) => { return item.value }) let data_list_max = Math.max(...new_data_list); var map_Chart = echarts.init(document.getElementById('map')); option = { title: { text: '本群闸总鼠窝分布', x: 'center' }, tooltip: { trigger: 'item', formatter: (params) => { let num let showHtml = '' if (isNaN(params.value)) { num = '0' } else { num = params.value } showHtml += ` ${'省份'}：${params.name} ${'鼠窝'}：${num} ` return showHtml } }, dataRange: { x: 'left', y: 'bottom', min: 0, max: data_list_max, text: ['高', '低'], // 文本，默认为数值文本 calculable: true, inRange: { color: ['#d1e7fe', '#1989fa'], } }, series: [{ name: '数据', type: 'map', mapType: 'china', roam: false, selectedMode: false, itemStyle: { normal: { label: { show: true, textStyle: { color: 'black' } } }, emphasis: { areaColor: '#95ec69', label: { show: true } } }, data: data_list }] }; map_Chart.setOption(option) })();China.js下载地址： 提取码：ul18 如果出现乱码情况 不用担心 正常引入使用即可 阿里云盘分享 |
【本文地址】