echarts地图上实现柱状图

作者：小啊丌-619 | 来源：互联网 | 2023-09-17 10:59

根据官网的案例套用研究了一下，其中还有一部分代码不是很明白，希望能帮到有需要的朋友<!DOCTYPEhtml><html><head

根据官网的案例套用研究了一下，其中还有一部分代码不是很明白，希望能帮到有需要的朋友

这里写图片描述


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="jquery.min.js">script>
    <script src="echarts.min.js">script>
    <script src="beijing.js">script>
head>
<body>
    <div class="wrap" style="position: relative;">
        <div id="map" style="width: 100%; height: 800px;">div>
    div>

    <script>
 var myChart = echarts.init(document.getElementById('map'));
 // 市区坐标
 var geoCoordMap = {
 "东城区": [116.418757, 39.937544],
 "西城区": [116.366794, 39.910309],
 "朝阳区": [116.486409, 39.991489],
 "丰台区": [116.286968, 39.863642],
 "石景山区": [116.170445, 39.974601],
 "海淀区": [116.280316, 40.039074],
 "门头沟区": [115.905381, 40.009183],
 "房山区": [115.701157, 39.735535],
 "通州区": [116.758603, 39.802486],
 "顺义区": [116.753525, 40.128936],
 "昌平区": [116.235906, 40.318085],
 "大兴区": [116.338033, 39.658908],
 "怀柔区": [116.607122, 40.524272],
 "平谷区": [117.112335, 40.244783],
 "密云区": [116.943352, 40.477362],
 "延庆区": [115.985006, 40.465325]
 };
 var rawData = [
 // ["东城区",10,20,30],
 // ["西城区",10,20,30],
 ["朝阳区",10,20,30],
 ["丰台区",10,20,30],
 ["石景山区",10,20,30],
 ["海淀区",10,20,30],
 ["门头沟区",10,20,30],
 ["房山区",10,20,30],
 ["通州区",10,20,30],
 ["顺义区",10,20,30],
 ["昌平区",10,20,30],
 ["大兴区",10,20,30],
 ["怀柔区",10,20,30],
 ["平谷区",10,20,30],
 ["密云区",10,20,30],
 ["延庆区",10,20,30]
 ];


 function makeMapData(rawData) {
 var mapData = [];
 for (var i = 0; i  var geoCoord = geoCoordMap[rawData[i][0]];
 if (geoCoord) {
 mapData.push({
 name: rawData[i][0],
 value: geoCoord.concat(rawData[i].slice(1))
 });
 }
 }
 return mapData;
 };

 option = {
 animation: false,
 // 地图背景颜色
 backgroundColor: new echarts.graphic.RadialGradient(0.5, 0.5, 0.4, [{
 offset: 0,
 color: '#4b5769'
 }, {
 offset: 1,
 color: '#404a59'
 }]),
 tooltip: {
 trigger: 'axis'
 },
 geo: {
 map: '北京',
 // silent: true,
 roam: true,
 zoom: 1.155, // 地图初始大小
 center: [116.366794, 40.400309], // 初始中心位置
 label: {
 emphasis: {
 show: false,
 areaColor: '#eee'
 }
 },
 // 地区块儿颜色
 itemStyle: {
 normal: {
 areaColor: '#55C3FC',
 borderColor: '#fff'
 },
 emphasis: {
 areaColor: '#21AEF8'
 }
 }
 },
 series: []
 };

 function renderEachCity() {
 var option = {
 xAxis: [],
 yAxis: [],
 grid: [],
 series: []
 };
 // var inflatiOnStartIdx= 14;
 // var inflatiOnYearCount= 3;
 // var inflatiOnYearStart= '2006';
 // var xAxisCategory = [];
 // for (var i = 0; i 
 // xAxisCategory.push((+inflationYearStart + i) + '');
 // }

 echarts.util.each(rawData, function(dataItem, idx) {
 var geoCoord = geoCoordMap[dataItem[0]];
 var coord = myChart.convertToPixel('geo', geoCoord);
 // var boundL = -12.782788213627585;
 // var boundR = 35.92763028872384;
 // var boundT = 32.22854555899493;
 // var boundB = 95.18817097360194;
 // if (!coord ||
 // geoCoord[0] 
 // geoCoord[0] > boundR ||
 // geoCoord[1] > boundB ||
 // geoCoord[1] 
 // ) {
 // return;
 // }
 idx += '';

 inflatiOnData= [30,50,20];
 // for (var k = 0; k 
 // inflationData.push(dataItem[inflationStartIdx + k]);
 // }

 option.xAxis.push({
 id: idx,
 gridId: idx,
 type: 'category',
 name: dataItem[0],
 // nameStyle: {
 // color: 'red',
 // fontSize: 12
 // },
 nameLocation: 'middle',
 nameGap: 3,
 splitLine: {
 show: false
 },
 axisTick: {
 show: false
 },
 axisLabel: {
 show: false
 },
 axisLine: {
 onZero: false,
 lineStyle: {
 color: '#666'
 }
 },
 // data: xAxisCategory,
 data: ["数据A","数据B","数据C"],
 z: 100

 });
 option.yAxis.push({
 id: idx,
 gridId: idx,
 splitLine: {
 show: false
 },
 axisTick: {
 show: false
 },
 axisLabel: {
 show: false
 },
 axisLine: {
 show: false,
 lineStyle: {
 color: '#1C70B6'
 }
 },
 z: 100
 });
 option.grid.push({
 id: idx,
 width: 30,
 height: 40,
 left: coord[0] - 15,
 top: coord[1] - 15,
 z: 100
 });
 option.series.push({
 id: idx,
 type: 'bar',
 xAxisId: idx,
 yAxisId: idx,
 barGap: 0,
 barCategoryGap: 0,
 // data: inflationData,
 data: inflationData,
 z: 100,
 itemStyle: {
 normal: {
 color: function(params){
 // 柱状图每根柱子颜色
 var colorList = ['#F75D5D','#59ED4F','#4C91E7'];
 return colorList[params.dataIndex];
 }
 }
 }
 });
 });
 console.time('a');
 myChart.setOption(option);
 console.timeEnd('a');
 }

 setTimeout(renderEachCity, 0);
 // 缩放和拖拽
 function throttle(fn, delay, debounce) {

 var currCall;
 var lastCall = 0;
 var lastExec = 0;
 var timer = null;
 var diff;
 var scope;
 var args;

 delay = delay || 0;

 function exec() {
 lastExec = (new Date()).getTime();
 timer = null;
 fn.apply(scope, args || []);
 }

 var cb = function() {
 currCall = (new Date()).getTime();
 scope = this;
 args = arguments;
 diff = currCall - (debounce ? lastCall : lastExec) - delay;

 clearTimeout(timer);

 if (debounce) {
 timer = setTimeout(exec, delay);
 } else {
 if (diff >= 0) {
 exec();
 } else {
 timer = setTimeout(exec, -diff);
 }
 }

 lastCall = currCall;
 };

 return cb;
 }

 var throttledRenderEachCity = throttle(renderEachCity, 0);
 myChart.on('geoRoam', throttledRenderEachCity);
 myChart.setOption(option);


 // 点击显示柱状图
 myChart.on('click',function(e){
 console.log(e)
 // console.log(params);
 if(e.compOnentSubType== "bar"){
 // 先清除所有柱状图
 $('.tongJiTu').remove();
 // 创建遮挡层
 creatWrap();
 // 创建柱状图容器
 var divObj = document.createElement('div');
 $(divObj).addClass('tongJiTu');
 divObj.id = 'zhuzhuang';
 var divX = getMousePos()['x']; 
 var divY = getMousePos()['y']; 
 $(divObj).css({
 'width': 250,
 'height': 180,
 'border': '1px solid #ccc',
 'position': 'absolute',
 'top': divY,
 'left': divX
 }).appendTo('.wrap');
 // 创建柱状图
 zhuZhuangTu();
 // 点击遮挡层消失
 clearWrap('.zhedang');
 }
 return;
 });
 // 获取横纵坐标
 function getMousePos(e) {
 var e = event || window.event;
 var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
 var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
 var x = e.pageX || e.clientX + scrollX;
 var y = e.pageY || e.clientY + scrollY;
 // console.log(x,y)
 return {'x': x,'y': y};
 }
 // 生成柱状图
 function zhuZhuangTu() {
 var zhuzhuang = echarts.init(document.getElementById('zhuzhuang'));
 option = {
 backgroundColor: 'rgba(255,255,255,.3)',
 legend: {
 data: ['数据A','数据B','数据C']
 },
 xAxis: [
 {

 type: 'category',
 data: ['数据A','数据B','数据C']
 }
 ],
 yAxis: [
 {
 splitLine: {
 show: false
 },
 type: 'value'
 }
 ],
 series: [
 {
 type: 'bar',
 itemStyle: {
 normal: {
 color: function(params){
 var colorList = ['#F75D5D','#59ED4F','#4C91E7'];
 return colorList[params.dataIndex];
 },
 label: {
 show: true,
 position: 'top',
 textStyle: {
 color: '#000'
 }
 }
 }
 },
 data: [10,20,30]
 }
 ]
 };
 zhuzhuang.setOption(option);
 }
 // 生成遮挡层
 function creatWrap(){
 var zheDang = document.createElement('div');
 $(zheDang).addClass('zhedang').css({
 width: '100%',
 height: '100%',
 position: 'absolute',
 top: 0,
 left: 0,
 backgroundColor: 'rgba(0,0,0,.2)'
 }).appendTo('.wrap');
 }
 // 去掉遮挡层
 function clearWrap(id){
 $(id).click(function(e){
 // console.log(this);
 this.remove();
 $('.tongJiTu').remove();
 return false;
 });
 }
 script>
body>
html>

希望能帮到有需要的朋友，也希望有大神能帮我解答一下前边的几个封装方法的作用

推荐阅读

window
JavaScript核心知识点与实用技巧汇总

本文总结了JavaScript的核心知识点和实用技巧，涵盖了变量声明、DOM操作、事件处理等重要方面。例如，通过`event.srcElement`获取触发事件的元素，并使用`alert`显示其HTML结构；利用`innerText`和`innerHTML`属性分别设置和获取文本内容及HTML内容。此外，还介绍了如何在表单中动态生成和操作``元素，以便更好地处理用户输入。这些技巧对于提升前端开发效率和代码质量具有重要意义。 ... [详细]

蜡笔小新 2024-11-06 20:14:58
js
微信小程序实现类似微博的无限回复功能，内置云开发数据库支持

本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能，并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段，还包含了完整的页面代码，方便开发者按需使用。此外，HTML页面中包含了一些示例图片，开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计，帮助读者更好地理解和实现这一功能。 ... [详细]

蜡笔小新 2024-11-07 09:43:24
window
利用REM实现移动端布局的高效适配技巧

在移动设备上实现高效布局适配时，使用rem单位已成为一种流行且有效的技术。本文将分享过去一年中使用rem进行布局适配的经验和心得。rem作为一种相对单位，能够根据根元素的字体大小动态调整，从而确保不同屏幕尺寸下的布局一致性。通过合理设置根元素的字体大小，开发者可以轻松实现响应式设计，提高用户体验。此外，文章还将探讨一些常见的问题和解决方案，帮助开发者更好地掌握这一技术。 ... [详细]

蜡笔小新 2024-11-11 19:11:53
bit
WordPress Duplicator 0.4.4 版本存在跨站脚本攻击漏洞分析

在对WordPress Duplicator插件0.4.4版本的安全评估中，发现其存在跨站脚本（XSS）攻击漏洞。此漏洞可能被利用进行恶意操作，建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的，使用时需自行承担风险。漏洞编号：HTB23162。 ... [详细]

蜡笔小新 2024-11-10 13:16:43
window
C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨

本文探讨了C++异步编程中获取线程执行结果的方法与技巧，并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型，本文详细介绍了如何高效地处理多线程任务，确保程序的稳定性和性能。同时，文章还结合实际案例，展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]

蜡笔小新 2024-11-09 15:14:28
window
关于使用JavaScript在多个页面间传递参数的技术探讨

本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言，从a.html页面跳转至b.html时，如何携带参数并使b.html替代当前页面显示，而非新开窗口。文中详细介绍了实现这一功能的代码及注释，帮助开发者更好地理解和应用该技术。 ... [详细]

蜡笔小新 2024-11-09 09:28:55
js
资源管理器基础与实战演示

资源管理器的基础架构包括三个核心组件：1）资源池，用于将CPU和内存等资源分配给不同的容器；2）负载组，负责承载任务并将其分配到相应的资源池；3）分类函数，用于将不同的会话映射到合适的负载组。该系统提供了两种主要的资源管理策略。 ... [详细]

蜡笔小新 2024-11-07 20:38:24
js
SoundPool

如果应用程序经常播放密集、急促而又短暂的音效（如游戏音效）那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点：1)延时时间较长，且资源占用率高 ... [详细]

蜡笔小新 2024-11-13 16:47:19
nodejs
Webpack 初探：Import 和 Require 的使用

本文介绍了 Webpack 中 Import 和 Require 的基本概念和使用方法，帮助读者更好地理解和应用模块化开发。 ... [详细]

蜡笔小新 2024-11-13 16:34:13
js
[c++基础]STL

cppfig15_10.cppincludeincludeusingnamespacestd;templatevoidprintVector(constvector&integer ... [详细]

蜡笔小新 2024-11-13 13:22:43
bit
在范围[0..n-1]中产生m个不同的随机数 - Generating m distinct random numbers in the range [0..n-1]

Ihavetwomethodsofgeneratingmdistinctrandomnumbersintherange[0..n-1]我有两种方法在范围[0.n-1]中生 ... [详细]

蜡笔小新 2024-11-13 09:49:14
js
JavaScript 计算两个日期之间的时间差

本文介绍了一种使用 JavaScript 计算两个日期之间时间差的方法。该方法支持多种时间格式，并能返回秒、分钟、小时和天数等不同精度的时间差。 ... [详细]

蜡笔小新 2024-11-13 09:29:58
js
Python 数据可视化实战指南

本文详细介绍如何使用 Python 进行数据可视化，涵盖从环境搭建到具体实例的全过程。 ... [详细]

蜡笔小新 2024-11-13 06:03:30
main
Java 并发编程：深入解析 AtomicInteger 和 CAS 无锁算法

在多线程并发环境中，普通变量的操作往往是线程不安全的。本文通过一个简单的例子，展示了如何使用 AtomicInteger 类及其核心的 CAS 无锁算法来保证线程安全。 ... [详细]

蜡笔小新 2024-11-12 16:40:04
char
InfluxDB、collectd与Grafana的详细安装与配置指南

本文详细介绍了 InfluxDB、collectd 和 Grafana 的安装与配置流程。首先，按照启动顺序依次安装并配置 InfluxDB、collectd 和 Grafana。InfluxDB 作为时序数据库，用于存储时间序列数据；collectd 负责数据的采集与传输；Grafana 则用于数据的可视化展示。文中提供了 collectd 的官方文档链接，便于用户参考和进一步了解其配置选项。通过本指南，读者可以轻松搭建一个高效的数据监控系统。 ... [详细]

蜡笔小新 2024-11-11 19:54:24

小啊丌-619

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章