ECharts地图-自定义29.zip资源-CSDN文库

共9个文件

js：5个

json：2个

png：1个

版权申诉

echarts

统计分析

数据可视化

大屏可视化

139 浏览量 2025-01-02 09:26:14 上传评论收藏 1.19MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECharts地图-自定义29.zip （9个子文件）

ECharts地图-自定义29

图表

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

hebei.json 379KB

china.js 60KB

index.html 6KB

images

json

ECharts地图-自定义29.png 67KB

<!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、图表配置。 let rawData = [ { name: '保定', value: [10.6, 9.1, 7.1] }, { name: '沧州', value: [4.6, 13.1, 2.1] }, { name: '石家庄', value: [10.6, 9.1, 7.1] }, { name: '邢台', value: [10.6, 9.1, 7.1] }, { name: '邯郸', value: [10.6, 9.1, 7.1] }, { name: '衡水', value: [10.6, 9.1, 7.1] }, { name: '雄安', value: [10.6, 9.1, 7.1] }, ]; let geoCoordMap = { '保定': [115.0488, 39.0948], '沧州': [116.8286, 38.2104], '石家庄': [114.4995, 38.1006], '邢台': [114.8071, 37.2821], '邯郸': [114.4775, 36.535], '衡水': [115.8838, 37.7161], '雄安': [115.9731, 38.9914] }; let namearr = ['1', '2', '3']; // 获取河北地区的json文件 var uploadedDataURL = "./geo/hebei.json"; // 请求的方式获取 $.get(uploadedDataURL, function (geoJson) { echarts.registerMap('hebei', geoJson); function renderEachCity() { var options = { toolbox: { feature: { saveAsImage: {} } }, backgroundColor: '#010b43', tooltip: { trigger: "axis" }, geo: { type: 'map', map: 'hebei', label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { normal: { areaColor: "rgba(0,0,0,0)", borderColor: "#126cc4", borderWidth: 1.3 }, emphasis: { areaColor: "rgba(233,0,200,0.3)" } } }, legend: [], xAxis: [], yAxis: [], grid: [], series: [] }; myChart.setOption(options); //添加图例。 options.legend.push({ data: namearr, left: '70%', top: '85%', itemWidth: 25, itemHeight: 15, textStyle: { color: '#ddd', fontSize: 15 }, }); echarts.util.each(rawData, function (dataItem, idx) { var geoCoord = geoCoordMap[dataItem.name]; var coord = myChart.convertToPixel('geo', geoCoord); idx += ''; options.xAxis.push({ id: idx, gridId: idx, type: 'category', name: dataItem.name, nameTextStyle: { color: '#fff', fontSize: 14 }, nameLocation: 'middle', nameGap: 3, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, axisLine: { show: false, }, data: [dataItem.name], }); options.yAxis.push({ id: idx, gridId: idx, show: false }); options.grid.push({ id: idx, width: 50, height: 40, left: coord[0] - 15, top: coord[1] - 35, }); for (var i = 0; i < namearr.length; i++) { options.series.push({ name: namearr[i], type: 'bar', xAxisId: idx, yAxisId: idx, barWidth: '20%', data: [dataItem.value[i]] }); } }); //3、通过图表对象的setOption方法和图表配置进行关联。 myChart.setOption(options); } renderEachCity(); }); </script> </body> </html>

评论收藏

内容反馈

版权申诉