ECharts地图-自定义8.rar_广东省Echarts资源-CSDN文库

共7个文件

js：4个

json：2个

html：1个

echarts

echarts地图

自定义标签

统计分析

需积分: 5 49 浏览量 2024-09-13 09:19:27 上传评论收藏 976KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECharts地图-自定义8.rar （7个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

bmap

bmap.min.js 6KB

bmap.js 13KB

svg

geo

china.json 69KB

guangdong.json 1.2MB

index.html 12KB

images

json

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> #chart-panel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 1000px; height: 750px; } </style> <script src="./lib/5.5.0/echarts.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div id="chart-panel"></div>  <script type="text/javascript"> //1、初始化图表对象。 var myChart = echarts.init(document.getElementById('chart-panel')); //2、图表配置。 var uploadedDataURL = "./geo/guangdong.json"; var data = []; $.getJSON(uploadedDataURL, function (geoJson) { echarts.registerMap('广东', geoJson); //动态创建测试数据。 data = geoJson.features.map((item) => { return { value: (Math.random() * 1000).toFixed(0), name: item.properties.name } }); //广东省各个市的中心坐标。 var gdGeoCoordMap = { '广州市': [113.507649675, 23.3200491021], '东莞市': [113.863433991, 22.9430238154], "中山市": [113.422060021, 22.5451775145], '云浮市': [111.750945959, 22.9379756855], "佛山市": [113.034025635, 23.0350948405], "惠州市": [114.41065808, 23.1135398524], "揭阳市": [116.079500855, 23.3479994669], "梅州市": [116.126403098, 24.304570606], "汕头市": [116.588650288, 23.2839084533], "汕尾市": [115.572924289, 22.9787305002], "江门市": [112.678125341, 22.2751167835], "河源市": [114.913721476, 23.9572508505], "深圳市": [114.025973657, 22.5960535462], "清远市": [113.040773349, 23.9984685504], "湛江市": [110.165067263, 21.2574631038], "潮州市": [116.830075991, 23.7618116765], "珠海市": [113.362447026, 22.1369146461], "肇庆市": [112.37965337, 23.5786632829], "茂名市": [110.931245331, 21.9682257188], "阳江市": [111.777009756, 21.9715173045], "韶关市": [113.594461107, 24.8029603119] }; //数据转换方法。 var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = gdGeoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; //图表配置对象。 let option = { toolbox: { feature: { saveAsImage: {} } }, backgroundColor: '#131C38', geo: [ { map: '广东', layoutCenter: ['50%', '50%'], layoutSize: '100%', itemStyle: { normal: { borderColor: 'rgba(192,245,249,.8)', borderWidth: 3, shadowColor: '#6FFDFF', shadowBlur: 10, areaColor: 'transparent', }, emphasis: { areaColor: 'rgba(29,85,139,.6)', } }, }, //重影 { map: '广东', zlevel: -1, layoutCenter: ['50%', '50.7%'], layoutSize: '100%', itemStyle: { normal: { borderColor: 'rgba(172, 122, 255,0.5)', shadowColor: 'rgba(172, 122, 255,0.5)', shadowOffsetY: 5, shadowBlur: 15, areaColor: 'transparent' } } }, { type: 'map', map: '广东', zlevel: -2, layoutCenter: ['50%', '51.4%'], layoutSize: '100%', itemStyle: { normal: { borderColor: 'rgba(172, 122, 255,0.4)', shadowColor: 'rgba(172, 122, 255,0.6)', shadowOffsetY: 5, shadowBlur: 15, areaColor: 'transparent' } } }, { type: 'map', map: '广东', zlevel: -3, layoutCenter: ['50%', '52.1%'], layoutSize: '100%', itemStyle: { normal: { borderColor: 'rgba(172, 122, 255,0.3)', shadowColor: 'rgba(172, 122, 255,0.8)', shadowOffsetY: 15, shadowBlur: 8, areaColor: 'transparent' } } } ], series: [ { name: '广东省数据', type: 'map', map: '广东', showLegendSymbol: false, layoutCenter: ['50%', '50%'], layoutSize: '100%', label: { normal: { show: false, }, emphasis: { show: false, } }, itemStyle: { normal: { areaColor: { type: 'linear', x: 0, y: 300, x2: 0, y2: 0, colorStops: [{ offset: 0, color: 'RGBA(37,108,190,1)' // 0% 处的颜色 }, { offset: 1, color: 'RGBA(15,169,195,1)' // 100% 处的颜色 }], global: true // 缺省为 false }, borderColor: '#4ECEE6',

评论收藏

内容反馈