河北省市级echarts地图文件_echarts河北地图资源-CSDN文库

共29个文件

js：15个

json：13个

html：1个

需积分: 50 89 浏览量 2018-06-21 09:19:03 上传评论收藏 1.92MB RAR 举报

**正文** 本资源是关于“河北省市级echarts地图文件”的集合，主要包含用于展示河北省各市级行政区域的地图数据。ECharts是一款由百度开发的、基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图以及地图等，支持在Web页面上进行交互式的数据可视化。在本压缩包中，ECharts被用来绘制河北省各市的地图，以帮助用户直观地了解各市的地理分布和相关统计数据。我们要理解ECharts地图的原理。ECharts中的地图是基于GeoJSON格式的数据，这是一种轻量级的数据交换格式，用于地理空间数据。在这个压缩包里，你将找到与河北省各市级行政区划对应的js和json文件，这些文件存储了各个城市的地理位置、边界信息以及可能的其他属性。通过加载这些数据，ECharts可以动态渲染出地图，并允许用户进行点击、缩放等交互操作。在实际使用时，开发者需要将这些地图数据与ECharts的配置项结合，创建一个地图实例。例如，你需要在JavaScript代码中引入ECharts库和地图数据，然后设置地图的系列配置，指定数据源、地图类型、颜色等。示例代码可能如下： ```javascript var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: {}, geo: { map: 'hebei', // 地图名，对应于压缩包中的地图文件名 label: { normal: { show: true, color: 'rgba(0,0,0,0.8)' }, emphasis: { show: true, color: 'rgb(0,0,0)' } }, itemStyle: { normal: { areaColor: '#f3f3f3', borderColor: '#d8d8d8', borderWidth: 1 }, emphasis: { areaColor: '#99d3ff', borderColor: '#64b5f6', borderWidth: 1 } } }, series: [] }; myChart.setOption(option); ``` 需要注意的是，由于压缩包内未包含县级地图数据，因此无法展示到县级层面的细节。如果你需要展示更细致的地区信息，可能需要寻找额外的县级GeoJSON数据并将其集成到ECharts配置中。在浏览器兼容性方面，由于ECharts主要是基于现代浏览器的特性构建的，推荐使用火狐浏览器打开这些地图。对于谷歌浏览器，由于同源策略的限制，可能存在跨域问题。为了解决这个问题，你可以采用CORS（跨源资源共享）配置服务器，或者使用JSONP、代理服务器等方法来实现数据的跨域访问。这个“河北省市级echarts地图文件”资源是针对JavaScript开发者设计的，它提供了一种直观展示河北省各市地理分布的方法。通过学习和应用这些数据，你可以创建出富有交互性的地图应用，用于展示各种与地理位置相关的数据分析结果。在实际开发中，还需要考虑浏览器兼容性、数据加载优化以及与其他功能的整合等因素，以提升用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

hebei.rar （29个子文件）

hebei

北京.html 8KB

json

北京市.json 21KB

河北省

石家庄市.json 218KB

衡水市.json 135KB

承德市.json 538KB

保定市.json 431KB

河北省.json 119KB

张家口市.json 535KB

邯郸市.json 190KB

廊坊市.json 218KB

唐山市.json 305KB

秦皇岛市.json 239KB

邢台市.json 167KB

沧州市.json 261KB

echarts.min.js 544KB

jquery.js 94KB

北京市.js 22KB

河北省

邢台市.js 168KB

张家口市.js 535KB

保定市.js 431KB

秦皇岛市.js 239KB

沧州市.js 261KB

邯郸市.js 190KB

河北省.js 120KB

衡水市.js 136KB

唐山市.js 306KB

廊坊市.js 218KB

石家庄市.js 219KB

承德市.js 538KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>北京市</title> <script src="js/jquery.js"></script> <script src="js/echarts.min.js"></script> <script src="js/北京市.js"></script> </head> <body> <div id="c1_div" style="width: 800px;height:600px;"></div> <script type="text/javascript"> var c1_myChart = echarts.init(document.getElementById('c1_div')); var uploadedDataURL = "json/北京市.json"; c1_myChart.showLoading(); $.getJSON(uploadedDataURL, function(geoJson) { echarts.registerMap('beijing', geoJson); c1_myChart.hideLoading(); var geoCoordMap = { '怀柔区':[116.63,40.32], '朝阳区':[116.43,39.92], '密云区':[116.83,40.37], '平谷区':[117.12,40.13], '顺义区':[116.65,40.13], '昌平区':[116.23,40.22], '海淀区':[116.3,39.95], '房山区':[116.13,39.75], '大兴区':[116.33,39.73], '东城区':[116.42,39.93], '通州区':[116.65,40.13], '丰台区':[116.28,39.85], '石景山区':[116.22,39.9], '门头沟区':[116.1,39.93], '延庆区':[115.97,40.45], '西城区':[116.43,39.92], } var data = [ {name:'怀柔区', value: 199}, {name:'朝阳区', value: 99}, {name:'密云区', value: 299}, {name:'平谷区', value: 199}, {name:'顺义区', value: 19}, {name:'昌平区', value: 99}, {name:'海淀区', value: 499}, {name:'房山区', value: 299}, {name:'大兴区', value: 199}, {name:'东城区', value: 200}, {name:'通州区', value: 299}, {name:'丰台区', value: 39}, {name:'石景山区', value: 99}, {name:'门头沟区', value: 199}, {name:'延庆区', value: 499}, {name:'西城区', value: 1}, ]; var max = 480, min = 9; // todo var maxSize4Pin = 100, minSize4Pin = 20; var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; option = { title: { text: '“大数据” - 北京市', subtext: '', x: 'center', textStyle: { color: '#ccc' } }, tooltip: { trigger: 'item', formatter: function (params) { if(typeof(params.value)[2] == "undefined"){ return params.name + ' : ' + params.value; }else{ return params.name + ' : ' + params.value[2]; } } }, legend: { show:false, orient: 'vertical', y: 'bottom', x: 'right', data: ['某指标'], textStyle: { color: '#fff' } }, visualMap: { show: false, min: 0, max: 500, left: 'left', top: 'bottom', text: ['高', '低'], // 文本，默认为数值文本 calculable: true, seriesIndex: [1], inRange: { // color: ['#3B5077', '#031525'] // 蓝黑 // color: ['#ffc0cb', '#800080'] // 红紫 // color: ['#3C3B3F', '#605C3C'] // 黑绿 color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑 // color: ['#23074d', '#cc5333'] // 紫红 // color: ['#00467F', '#A5CC82'] // 蓝绿 // color: ['#1488CC', '#2B32B2'] // 浅蓝 // color: ['#00467F', '#A5CC82'] // 蓝绿 // color: ['#00467F', '#A5CC82'] // 蓝绿 // color: ['#00467F', '#A5CC82'] // 蓝绿 // color: ['#00467F', '#A5CC82'] // 蓝绿 } }, geo: { show: true, map: 'beijing', label: { normal: { show: false }, emphasis: { show: false, } }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#3B5077', }, emphasis: { areaColor: '#2B91B7', } } }, series : [ { name: '某指标', type: 'scatter', coordinateSystem: 'geo', data: convertData(data), symbolSize: function (val) { return val[2] / 10; }, label: { normal: { formatter: '{b}', position: 'right', show: true }, emphasis: { show: true } }, itemStyle: { normal: { color: '#05C3F9' } } }, { type: 'map', map: 'beijing', geoIndex: 0, aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: false }, emphasis: { show: false, textStyle: { color: '#fff' } } }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#3B5077', }, emphasis: { areaColor: '#2B91B7' } }, animation: false, data: data }, { name: '点', type: 'scatter', coordinateSystem: 'geo', symbol: 'pin', symbolSize: function (val) { var a = (maxSize4Pin - minSize4Pin) / (max - min); var b = minSize4Pin - a*min; b = maxSize4Pin - a*max; return a*val[2]+b; }, label: { normal: { show: true, textStyle: { color: '#fff', fontSize: 9, } } }, itemStyle: { normal: { color: '#F62157', //标志颜色 } }, zlevel: 6, data: convertData(data), }, { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: convertData(data.sort(function (a, b) { return b.value - a.value; }).slice(0, 5)), symbolSize: function (val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: '#05C3F9', shadowBlur: 10, shadowColor: '#05C3F9' } }, zlevel: 1 }, ] }; c1_myChart.setOption(option)

评论收藏

内容反馈