echarts湖南省地图。js文件版_echart湖南地图,echarts湖南地图资源-CSDN文库

共5个文件

js：4个

html：1个

5星 · 超过95%的资源需积分: 38 119 浏览量 2018-07-10 12:53:34 上传评论 1 收藏 534KB ZIP 举报

在IT行业中，ECharts是一款非常流行的、基于JavaScript的数据可视化库，它由百度开发并开源，提供了丰富的图表类型，包括柱状图、折线图、饼图以及地理图表等。在这个场景下，我们主要关注的是“湖南省地图.js文件版”，这意味着我们将讨论如何利用ECharts来绘制特定的地理区域——湖南省的地图，并在网页上进行展示。 ECharts中的地理图表功能允许开发者绘制中国各个省份、城市甚至更细致的地区地图。在ECharts中，每个地理区域都有对应的编码，通过这些编码可以与数据进行关联，从而实现数据驱动的地图渲染。对于湖南省地图，我们需要一个预处理的JSON文件，这个文件包含了湖南省各地区的边界信息和对应的编码。通常，这样的JSON文件可以通过ECharts的内置地图或者自定义地图服务获取。描述中提到“自己慢慢磨出来的”，这可能意味着开发者为了绘制湖南省地图，可能进行了以下步骤： 1. 获取地图数据：可能从公开数据源如GeoJSON或Shapefile获取湖南省的地理边界信息。 2. 转换格式：将获取到的地理数据转换为ECharts能识别的JSON格式，这通常涉及到坐标系统的转换和编码的映射。 3. 集成到ECharts：将转换后的JSON数据与ECharts的配置项结合，设置地图的样式、交互等功能。压缩包中的“地图静态页js版本”可能是一个包含了ECharts初始化、地图加载和数据绑定的JavaScript文件。这个文件的主要内容可能包括以下几个部分： 1. 引入ECharts库：在HTML中通过`<script>`标签引入ECharts的JavaScript库，如`echarts.min.js`。 2. 创建ECharts实例：在DOM元素（如div）上创建ECharts实例，设置容器的宽高。 3. 加载地图：使用`echarts.registerMap`方法注册湖南省地图的JSON数据，赋予其一个唯一的标识符。 4. 初始化配置：设置ECharts的基本配置项，如标题、图例、工具提示、颜色等。 5. 数据绑定：将数据与地图的各个区域编码关联，设置系列（series）的类型为`map`，并将数据数组提供给ECharts。 6. 渲染图表：调用`myChart.setOption`方法，传入配置项对象，使ECharts开始渲染地图。在实际应用中，我们可以根据业务需求进一步定制地图，例如添加点击事件监听，实现鼠标悬停时显示详细信息，或者根据数据动态改变区域颜色等。此外，为了提高用户体验，还可以考虑优化地图的加载速度，例如使用CDN加速库的加载，或者对地图数据进行适当的压缩。通过ECharts绘制湖南省地图涉及地图数据的获取与处理、ECharts库的使用以及JavaScript编程技巧。这是一项将地理信息与数据可视化结合的任务，对于Web开发人员来说，掌握这一技能可以极大地提升数据展示的效果和互动性。

资源推荐

资源详情

资源评论

收起资源包目录

地图静态页js版本.zip （5个子文件）

地图静态页js版本

jquery.js 90KB

china-main-city-map.js 11KB

hunan.js 45KB

echarts.js 2.27MB

contextmenuMap - 副本.html 7KB

<!DOCTYPE html> <html> <head > <meta charset="utf-8"> <script type="text/javascript" src="echarts.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="hunan.js"></script> <script type="text/javascript" src="china-main-city-map.js" charset="utf-8"></script> </head> <body> <div id= "main" style="width:1300px;height:800px;"></div> <script type="text/javascript"> $(function(){ //使用echarts.init()方法初始化一个Echarts实例，在init方法中传入echarts map的容器 dom对象 var mapChart = echarts.init(document.getElementById('main')); var geoCoordMap = { '长沙市':[112.98,28.19], '邵阳市':[111.20,27.10], '娄底市':[111.50,27.73], '株洲市':[113.15,27.43], '湘潭市':[112.55,27.82], '衡阳市':[112.60,26.90], '岳阳市':[113.13,28.99], '常德市':[111.69,29.04], '张家界市':[110.47,29.32], '益阳市':[112.00,28.57], '郴州市':[113.03,25.79], '永州市':[111.60,26.13], '怀化市':[109.97,27.55], '湘西土家族苗族自治州':[109.73,28.52], } var data =[ {name: '长沙市', value: 107}, {name: '邵阳市', value: 105}, {name: '娄底市', value: 102}, {name: '株洲市', value: 72}, {name: '湘潭市', value: 89}, {name: '衡阳市', value: 117}, {name: '岳阳市', value: 110}, {name: '常德市', value: 139}, {name: '张家界市', value: 107}, {name: '益阳市', value: 147}, {name: '郴州市', value: 97}, {name: '永州市', value: 78}, {name: '怀化市', value: 105}, {name: '湘西土家族苗族自治州', value: 78}, ] 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; }; // mapChart的配置 var option = { title:{ text: '湖南省地图', left:'center', textStyle: { color: '#ccc' } }, tooltip: { trigger: 'item', position: function (pos, params, dom, rect, size) { // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。 var compare=pos[0] < size.viewSize[0] / 2; if(compare){ return [pos[0]-100,pos[1]]; }else{ return [pos[0]+60,pos[1]]; } }, formatter: function (params) { if(typeof(params.value)[2] == "undefined"){ return params.name + ' : ' + params.value; }else{ return params.name + ' : ' + params.value[2]; } } }, legend: { orient: 'vertical', y: 'bottom', x: 'right', data: ['credit_pm2.5'], textStyle: { color: '#fff' } }, geo: { show: true, map: '湖南', label: { normal: { show: false }, emphasis: { show: false, } }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#3B5077', }, emphasis: { areaColor: '#2B91B7', } } }, series:[ { name: 'credit_pm2.5', 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: '湖南', 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 }, ] }; //设置图表的配置项 mapChart.setOption(option); }) </script> </body> </html>

评论收藏

内容反馈