ECharts乡镇级别行政地图定制指南

版权申诉
5星 · 超过95%的资源 1 下载量 105 浏览量 更新于2024-11-08 收藏 51KB ZIP 举报
资源摘要信息:"ECharts自定义地图——行政划分‘乡镇级别’地图山西长治潞城区乡镇级地图",该资源主要涉及到的知识点有ECharts的使用,自定义地图的创建以及行政区地图的制作。 首先,ECharts是一种基于JavaScript的开源可视化库,它可以在浏览器中渲染出各种数据可视化的图表。ECharts提供了丰富的配置项,可以轻松地实现数据的可视化。在本资源中,我们主要使用ECharts来创建和显示自定义的地图。 其次,自定义地图的创建是本资源的核心内容。一般来说,ECharts自带的地图类型无法满足所有需求,因此需要我们自己创建地图。创建自定义地图的步骤主要包括下载地图的JSON文件,然后将这个JSON文件导入到ECharts中。在本资源中,我们创建的是山西长治潞城区的乡镇级地图,这种详细级别的地图可以让我们更精确地展示地理信息。 最后,行政区地图的制作也是本资源的重要知识点。行政区地图主要用于展示行政区划信息,如国家、省、市、县、乡镇等。在本资源中,我们主要是展示乡镇级别的行政区划信息,这对于需要展示详细地理信息的应用场景非常有用。 在使用本资源时,首先需要安装ECharts库,然后在ECharts中导入下载的地图JSON文件。在ECharts的配置项中,我们可以设置地图的样式、数据显示等,从而实现各种复杂的数据可视化需求。 总的来说,本资源主要涉及到ECharts的使用,自定义地图的创建和行政区地图的制作等知识点,对于需要在web中展示地理信息的应用场景非常有用。通过学习本资源,我们可以了解到如何使用ECharts来创建和显示各种复杂的地图,从而实现数据的可视化展示。
2018-09-17 上传
function getGzMap(_data) { if (_chinaMap == undefined) { var dom = document.getElementById("container"); _chinaMap = echarts.init(dom); _chinaMap.on('click', function(params) { console.log(params); var _type = params.seriesType; if (_type == "map") { //window.parent.aaa('aa') //调用父页面方法 } else if (_type == "effectScatter") { window.parent.showMap(); } }) } var option = { backgroundColor: 'rgba(0,0,0,0)', visualMap: { type: 'piecewise', show: false, min: 0, max: 300, splitNumber: 3, itemWidth: 10, itemHeight: 10, itemGap: 5, seriesIndex: [1], pieces: [ { min: 0, max: 100, label: '优' }, { min: 101, max: 200, label: '良' }, { min: 201, max: 300, label: '高风险' } ], //color: ['#FA4D08', '#4BD94F', '#FBD32B'], //红、绿、黄 color: ['#F8DAE6', '#FEF9B5', '#B0D8B3'], //红、黄、绿 textStyle: { color: '#9EA8B1', fontSize: 10 } }, tooltip: { formatter: '{b}' }, geo: { map: 'guangdong', roam: true, aspectScale: 1, zoom: 1.5, layoutCenter: ['55%', '40%'], layoutSize: 500, label: { normal: { show: true }, emphasis: { show: true } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111', borderColor: '#3BB4DF', shadowColor: '#25A3FC', shadowBlur: 10 }, emphasis: { areaColor: '#ddb926' } } }, series: [{ type: 'effectScatter', coordinateSystem: 'geo', data: unitData, symbolSize: 10, symbol: 'image://../../../../Content/images/One/fire.png', //symbolRotate: 35, rippleEffect: { period: 4, scale: 5, brushType: 'fill', }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: false } }, itemStyle: { normal: { color: '#fff' } } }, { name: '', type: 'map', geoIndex: 0, mapType: 'guangdong', // 自定义扩展图表类型 label: { normal: { show: true, } }, itemStyle: { normal: { label: { show: true, fontSize: 10, color: '#111' }, shadowColor: '#ddb926', shadowBlur: 5, }, emphasis: { label: { show: true }, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10 } }, data: _data }, { type: 'effectScatter', coordinateSystem: 'geo', data: windData, symbolSize: 10, symbol: 'image://../../../../Content/images/One/wind.png', //symbolRotate: 35, rippleEffect: { period: 4, scale: 5, brushType: 'fill', }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: false } }, itemStyle: { normal: { color: '#fff' } } }, ] }; $.getJSON('../../MapCN/guangdong.json', function(chinaJson) { echarts.registerMap('guangdong', chinaJson); _chinaMap.setOption(option, true); }); }