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>

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

推荐阅读

text
用Vue实现的Demo商品管理效果图及实现代码

本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]

蜡笔小新 2023-12-10 15:14:25
text
【爬虫】关于企业信用信息公示系统加速乐最新反爬虫机制

(￣▽￣)~又得半夜修仙了，作为一个爬虫小白，花了3天时间写好的程序，才跑了一个月目标网站就更新了，是有点悲催，还是要只有一天的时间重构。升级后网站的层次结构并没有太多变化，表面上 ... [详细]

蜡笔小新 2023-10-17 19:24:48
text
FineReport平台数据分析图表显示部分系列接口的应用场景和实现思路

本文介绍了FineReport平台数据分析图表显示部分系列接口的应用场景和实现思路。当图表系列较多时，用户希望可以自己设置哪些系列显示，哪些系列不显示。通过调用FR.Chart.WebUtils.getChart("chartID").getChartWithIndex(chartIndex).setSeriesVisible()接口，可以获取需要显示的系列图表对象，并在表单中显示这些系列。本文以决策报表为例，详细介绍了实现方法，并给出了示例。 ... [详细]

蜡笔小新 2023-12-12 15:32:43
default
使用n3-charts绘制以日期为x轴的数据

本文介绍了如何使用n3-charts绘制以日期为x轴的数据，并提供了相应的代码示例。通过设置x轴的类型为日期，可以实现对日期数据的正确显示和处理。同时，还介绍了如何设置y轴的类型和其他相关参数。通过本文的学习，读者可以掌握使用n3-charts绘制日期数据的方法。 ... [详细]

蜡笔小新 2023-12-10 00:19:21
const
Async/await学习：写在前面渣渣新人的首篇外文文章翻译

本文是一篇翻译文章，介绍了async/await的用法和特点。async关键字被放置在函数前面，意味着该函数总是返回一个promise。文章还提到了可以显式返回一个promise的方法。该特性使得async/await更易于理解和使用。本文还提到了一些可能的错误，并希望读者能够指正。 ... [详细]

蜡笔小新 2023-12-09 17:22:06
text
[echarts] 同指标对比柱状图相关的知识介绍及应用示例

本文由编程笔记小编为大家整理，主要介绍了echarts同指标对比柱状图相关的知识，包括对比课程通过率最高的8个课程和最低的8个课程以及全校的平均通过率。文章提供了一个应用示例，展示了如何使用echarts制作同指标对比柱状图，并对代码进行了详细解释和说明。该示例可以帮助读者更好地理解和应用echarts。 ... [详细]

蜡笔小新 2023-12-09 10:02:11
text
webpack二刷之二、loader资源模块加载器

loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件，也就是说它会把打包过程中所有遇到的 ... [详细]

蜡笔小新 2023-10-17 21:26:42
string
javascrip中的函数参数个数未知时的用法

巧用arguments在Javascript的函数中有个名为arguments的类数组对象。它看起来是那么的诡异而且名不经传，但众多的Javascript库都使用着它强大的功能。所 ... [详细]

蜡笔小新 2023-10-17 19:06:27
const
vue使用

关键词： ... [详细]

蜡笔小新 2023-12-14 19:14:56
const
JS进修笔记——闭包的运转机制和作用域

本文介绍了闭包的定义和运转机制，重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则，闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]

蜡笔小新 2023-12-14 18:45:00
const
基于layUI的图片上传前预览功能的2种实现方式

本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]

蜡笔小新 2023-12-14 17:06:58
const
如何使用Java获取服务器硬件信息和磁盘负载率

本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]

蜡笔小新 2023-12-14 13:56:20
text
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
case
Oracle存储过程写法小例子及已命名的异常

本文介绍了Oracle存储过程的基本语法和写法示例，同时还介绍了已命名的系统异常的产生原因。 ... [详细]

蜡笔小新 2023-12-11 15:10:15
text
如何优化Webpack打包后的代码分割

本文介绍了如何通过优化Webpack的代码分割来减小打包后的文件大小。主要包括拆分业务逻辑代码和引入第三方包的代码、配置Webpack插件、异步代码的处理、代码分割重命名、配置vendors和cacheGroups等方面的内容。通过合理配置和优化，可以有效减小打包后的文件大小，提高应用的加载速度。 ... [详细]

蜡笔小新 2023-12-09 08:10:47

小啊丌-619

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

Tags | 热门标签

RankList | 热门文章