2024年前端最全vue+echarts——实现3D地图+3D柱状图 效果—，2024年最新面试题分享一个有趣的经历

最新推荐文章于 2024-06-07 11:59:52 发布
最新推荐文章于 2024-06-07 11:59:52 发布
阅读量1k 收藏 17
点赞数 20
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84616230/article/details/138760811
版权

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

js基础.PNG

前16.PNG

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

    绵阳: [104.73, 31.48],
    乌鲁木齐: [87.68, 43.77],
    枣庄: [117.57, 34.86],
    杭州: [120.19, 30.26],
    淄博: [118.05, 36.78],
    鞍山: [122.85, 41.12],
    溧阳: [119.48, 31.43],
    库尔勒: [86.06, 41.68],
    安阳: [114.35, 36.1],
    开封: [114.35, 34.79],
    济南: [117, 36.65],
    德阳: [104.37, 31.13],
    温州: [120.65, 28.01],
    九江: [115.97, 29.71],
    邯郸: [114.47, 36.6],
    临安: [119.72, 30.23],
    兰州: [103.73, 36.03],
    沧州: [116.83, 38.33],
    临沂: [118.35, 35.05],
    南充: [106.110698, 30.837793],
    天津: [117.2, 39.13],
    富阳: [119.95, 30.07],
    泰安: [117.13, 36.18],
    诸暨: [120.23, 29.71],
    郑州: [113.65, 34.76],
    哈尔滨: [126.63, 45.75],
    聊城: [115.97, 36.45],
    芜湖: [118.38, 31.33],
    唐山: [118.02, 39.63],
    平顶山: [113.29, 33.75],
    邢台: [114.48, 37.05],
    德州: [116.29, 37.45],
    济宁: [116.59, 35.38],
    荆州: [112.239741, 30.335165],
    宜昌: [111.3, 30.7],
    义乌: [120.06, 29.32],
    丽水: [119.92, 28.45],
    洛阳: [112.44, 34.7],
    秦皇岛: [119.57, 39.95],
    株洲: [113.16, 27.83],
    石家庄: [114.48, 38.03],
    莱芜: [117.67, 36.19],
    常德: [111.69, 29.05],
    保定: [115.48, 38.85],
    湘潭: [112.91, 27.87],
    金华: [119.64, 29.12],
    岳阳: [113.09, 29.37],
    长沙: [113, 28.21],
    衢州: [118.88, 28.97],
    廊坊: [116.7, 39.53],
    菏泽: [115.480656, 35.23375],
    合肥: [117.27, 31.86],
    武汉: [114.31, 30.52],
    大庆: [125.03, 46.58],
  };
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
      });
    }
  }
  console.log(res);
  return res;
},
initMap(name) {
  echarts.registerMap(name, data); // 注册矢量地图数据
  let map = echarts.init(this.$refs.chinaMap);

  let option = {
    title: {
      text: '测试bar3D、scatter3D、geo3D',
      x: 'left',
      top: '10',
      textStyle: {
        color: '#000',
        fontSize: 14,
      },
    },
    grid: {
      y: 200,
      x: 100,
    },
    tooltip: {
      show: true,
    },
    visualMap: [
        {
          type: 'continuous',
          seriesIndex: 0,
          text: ['bar3D'],
          calculable: true,
          max: 300,
          inRange: {
            color: ['#87aa66', '#eba438', '#d94d4c'],
          },
        },
        {
          type: 'continuous',
          seriesIndex: 1,
          text: ['scatter3D'],
          left: 'right',
          max: 100,
          calculable: true,
          inRange: {
            color: ['#000', 'blue', 'purple'],
          },
        },
    ],
    geo3D: {
      map: 'china',
      roam: true,
      itemStyle: {
        color: '#eee',
        opacity: 1,
        borderWidth: 0.4,
        borderColor: '#000',
      },
      viewControl: {
        beta: 0, //x轴旋转
        alpha: 70, //Y轴旋转
        panMouseButton: 'center', //平移操作使用的鼠标按键
        rotateMouseButton: 'left', //旋转操作使用的鼠标按键
      },
      label: {
        show: true,
        textStyle: {
          color: '#f90', //地图初始化区域字体颜色
          fontSize: 12,
          opacity: 1,
          backgroundColor: '#f90',
        },
      },
      emphasis: {
        //当鼠标放上去 地区区域是否显示名称
        label: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 3,
            backgroundColor: 'red',
          },
        },
      },
      light: {
        //光照阴影
        main: {
          color: '#fff', //光照颜色
          intensity: 1.2, //光照强度
          shadowQuality: 'high', //阴影亮度
          shadow: false, //是否显示阴影
          alpha: 55,
          beta: 10,
        },
        ambient: {
          intensity: 0.3,
        },
      },
    },
    series: [
      {
        name: 'bar3D',
        type: 'bar3D',
        coordinateSystem: 'geo3D',
        barSize: 0.5, //柱子粗细
        shading: 'lambert',
        opacity: 1,
        color: 'red',
        bevelSize: 0,
        label: {
          show: true,
          formatter: '{b}',
        },
        data: this.convertData([
          {
            name: '海门',
            value: 100,
          },
          {
            name: '鄂尔多斯',
            value: 200,
          },
          {
            name: '招远',
            value: 300,
          },
          {
            name: '舟山',
            value: 200,
          },
          {
            name: '济南',
            value: 200,
          },
          {
            name: '乌鲁木齐',
            value: 200,
          },
          {
            name: '宜宾',
            value: 200,
          },
          {
            name: '西宁',
            value: 200,
          },
        ]),
      },
        {
          name: 'scatter3D',
          type: 'scatter3D',
          coordinateSystem: 'geo3D',
          symbol: 'pin',
          color: 'red',
          symbolSize: 30,
          opacity: 0,
          label: {
            show: true,
            formatter: '{b}',
          },
          itemStyle: {
            borderWidth: 1,
            borderColor: '#fff',
          },
          data: this.convertData([
            {
              name: '阳泉',
              value: 200,
            },
            {
              name: '莱州',
              value: 200,
            },
            {
              name: '湖州',
              value: 200,
            },
            {
              name: '汕头',
              value: 200,
            },
            {
              name: '昆山',
              value: 200,
            },
            {
              name: '张家口',
              value: 200,
            },
          ]),
        },
    ],
  };
  map.setOption(option, true);
},

},
};


![在这里插入图片描述](https://img-blog.csdnimg.cn/cdb819b096b849b5b48e5dd053c48434.png)  
 背景颜色是`echarts`外层的`div`的`background`来控制的，改成白色，更显眼一点。


基本布局完成！！！


## 6.`geo3D地图禁止缩放+旋转`

options = {
geo3D: {
map: ‘china’,
roam: true,
silent: true, //禁止鼠标移入某个区域后高亮显示
itemStyle: {
color: ‘#333’,
opacity: 1,
borderWidth: 0.4,
borderColor: ‘#fff’,
},
viewControl: {
beta: 0, //x轴旋转
alpha: 60, //Y轴旋转
panMouseButton: ‘center’, //平移操作使用的鼠标按键
rotateMouseButton: ‘left’, //旋转操作使用的鼠标按键
rotateSensitivity: 0, //禁止旋转地图
//下面的四个参数 可以实现禁止缩放地图
projection: ‘orthographic’,
orthographicSize: 110,
maxOrthographicSize: 110,
minOrthographicSize: 110,
},
},

}


修改的参数是`options`中的`geo3D`中的`viewControl`参数。


### 6.1 禁止旋转地图

rotateSensitivity: 0, //禁止旋转地图


### 6.2 禁止缩放地图

//下面的四个参数 可以实现禁止缩放地图
projection: ‘orthographic’,
orthographicSize: 110,
maxOrthographicSize: 110,
minOrthographicSize: 110,


### 6.3 设置透明背景的地图

options = {
geo3D: {
map: ‘china’,
roam: true,
silent: true, //禁止鼠标移入某个区域后高亮显示
itemStyle: {
color: ‘transparent’,
opacity: 1,
borderWidth: 0.4,
borderColor: ‘#fff’,
},
}
}
  1. 可以设置itemStyle中的color：为transparent，来设置背景透明
  2. opacity：设置为0，也可以实现背景透明化
  3. borderWidth：设置边框宽度
  4. borderColor：设置边框颜色

### 6.4 鼠标移入时，禁止高亮展示当前区域——`silent: true`

options = {
geo3D: {
map: ‘china’,
roam: true,
silent: true, //禁止鼠标移入某个区域后高亮显示
}
}


### 6.5 设置`bar3D`柱子的颜色


### `设置柱子颜色，需要把visualMap中的内容注释掉，然后在series中的bar3D中设置color才生效！！！`


多多积累，多多收货！！！


附录参考链接：  
 [echarts实现3D地图：http://www.javashuo.com/article/p-fcfpjabz-gh.html](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)




**ES6**

*   列举常用的ES6特性：

*   箭头函数需要注意哪些地方？

*   let、const、var

*   拓展：var方式定义的变量有什么样的bug？

*   Set数据结构

*   拓展：数组去重的方法

*   箭头函数this的指向。

*   手写ES6 class继承。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/aac1740e50faadb9a6a7a5b97f9ccba8.png)



**微信小程序**

*   简单描述一下微信小程序的相关文件类型?

*   你是怎么封装微信小程序的数据请求？

*   有哪些参数传值的方法？

*   你使用过哪些方法，来提高微信小程序的应用速度？

*   小程序和原生App哪个好？

*   简述微信小程序原理？

*   分析微信小程序的优劣势

*   怎么解决小程序的异步请求问题？



![](https://img-blog.csdnimg.cn/img_convert/60b1dbe5c76e264468aa993416a9a031.png)



**其他知识点面试**

*   webpack的原理

*   webpack的loader和plugin的区别？

*   怎么使用webpack对项目进行优化?

*   防抖、节流

*   浏览器的缓存机制

*   描述一下二叉树, 并说明二叉树的几种遍历方式?

*   项目类问题

*   笔试编程题：



![](https://img-blog.csdnimg.cn/img_convert/aec12fc95e5722b9f2f1f22eeb5e67bd.png)



#### 最后



技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。

   怎么解决小程序的异步请求问题？



![](https://img-blog.csdnimg.cn/img_convert/60b1dbe5c76e264468aa993416a9a031.png)



**其他知识点面试**

*   webpack的原理

*   webpack的loader和plugin的区别？

*   怎么使用webpack对项目进行优化?

*   防抖、节流

*   浏览器的缓存机制

*   描述一下二叉树, 并说明二叉树的几种遍历方式?

*   项目类问题

*   笔试编程题：



![](https://img-blog.csdnimg.cn/img_convert/aec12fc95e5722b9f2f1f22eeb5e67bd.png)



#### 最后



技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
2401_84616230
关注
  • 20
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播
04-25
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题,解压直接使用 【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题,解压直接使用 【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题,解压直接使用 【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题,解压直接使用 【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题,解压直接使用 【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题,解压直接使用 【vue+echarts】绘
vue2.x-echarts公共组件封装--简易篇（3d柱状图，炫酷仪表盘，折线，曲线图）
vscode_js的博客
07-21 2754
vue2.x-echarts公共组件封装--简易篇（3d柱状图，炫酷仪表盘，折线，曲线图）
echarts地图实现3d效果
最新发布
weixin_38999134的博客
06-07 282
【代码】echarts地图实现3d效果。
echart实现地图3d自动旋转效果，领导都喜欢
weixin_43929450的博客
07-05 3993
这块总体来讲不是很难，就是会用到一些平时没用到过的语法，故可能会多花点时间如需完整代码，请联系邮箱 : 1015095073 @qq . com。
vue 使用echarts-gl实现3d旋转地图
YL
01-29 1612
之前也有使用过echarts开发项目中涉及到的地图功能，当时使用geo来实现地图轮廓，看上去有种3d的感觉。首先安装下echarts和echarts-gl依赖，在这里注意的点是，echarts-gl版本可以安装低版本，默认安装的依赖版本运行后一直报错。，这也是实现3d地图的主要属性，针对geo3d中每个属性的功能大家可以在echarts文档进行查阅，这里我就不一一细说了。这里我截图展示的，需要看地图动效的，大家可以在本地运行看下地图自动旋转效果。接下来我们看下完整的代码。安装好依赖，在页面引入。
echarts 自定义3D城市地图
weixin_43934967的博客
12-08 1961
这个需求第一方案想到的是使用高德地图JS API中”区域掩模“加上”立面体“实现，最后没有采用高德地图实现的原因是，高德地图无法实现透明天空，角度变换时，天空颜色无法去掉，不纠结天空的可以采用，省时省力并且自定义空间很大，最终采用echarts来实现。1、geo3D配合scatter3D，geo3D的regionHeight过高，会盖住scatter3D，解决方案是降低regionHeight值，5以内貌似没有问题，另一个是降低itemStyle的透明度，opacity设置低透明度。
Vue实现大文件分片上传，包括断点续传以及上传进度条
热门推荐
yjxkq99的博客
02-08 1万+
分片上传就是把一个大的文件分成若干块，一块一块的传输。这样做的好处可以减少重新上传的开销。比如：如果我们上传的文件是一个很大的文件，那么上传的时间应该会比较久，再加上网络不稳定各种因素的影响，很容易导致传输中断，用户除了重新上传文件外没有其他的办法，但是我们可以使用分片上传来解决这个问题。通过分片上传技术，如果网络传输中断，我们重新选择文件只需要传剩余的分片。而不需要重传整个文件，大大减少了重传的开销。但是我们要如何选择一个合适的分片呢？
ThreeJS-VUE-3DMax 实现Web3D（简单测试）
m0_53707852的博客
11-30 2376
使用threejs在页面实现一个简单的3D交互效果。
SpringBoot Vue 实现文件分片上传
weixin_44033066的博客
04-16 2083
springboot vue 文件分片上传
一文掌握 Vue3 + Express 大文件分片上传、断点续传、秒传技巧！
CRMEB小程序商城的博客
12-25 2153
在日常开发中，文件上传是常见的操作之一。文件上传技术使得用户可以方便地将本地文件上传到Web服务器上，这在许多场景下都是必需的，比如网盘上传、头像上传等。上传时间比较久；中间一旦出错就需要重新上传；一般服务端会对文件的大小进行限制。这几个问题会导致上传时候的用户体验是很不好的，针对存在的这些问题，我们可以通过分片上传来解决。
vueeasytable基于vue2x实用型table组件
08-10
vue2.x 实用型 table 组件，支持多表头固定、多列固定、列拖动、排序、自定义列.
Vue + Echarts 实现中国地图多级钻取功能.zip
08-01
本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能（基本版 未做过多功能拓展和样式优化 便于二次开发）。（更多说明移步：https://blog.csdn.net/ZYS10000/article/details/119298354）
2024年最新前端面试题总结(HTML5+CSS3+JS+TS4+Vue+React18)
03-05
2024年最新前端面试题总结(HTML5+CSS3+JS+TS4+Vue+React18)
vue+echarts实现动态折线图的方法与注意
10-14
在Vue.js框架中结合ECharts库创建动态折线图，主要涉及到以下几个关键步骤和技术要点： 1. **引入ECharts库**： 在项目中安装ECharts依赖，可以通过npm或yarn进行安装： ``` npm install echarts ``` 2. **在...
基于vue+echarts 数据可视化大屏展示的方法示例
10-15
在Vue组件中使用ECharts，首先要在模板中创建一个用于绘制图表的DOM元素，然后在`mounted`生命周期钩子中初始化ECharts实例并设置图表配置。以下是一个简单的例子： ```html , height: '300px'}"> export ...
【3d地图】vue中使用echarts geo3D
m0_68324632的博客
06-24 1万+
想必对于一个前端来说，大家对echarts并不陌生，本次文章主要记录了我在使用echarts 渲染3d地图过程中的一点心得，本文代码包含详细的配置项注释~
vue+echarts——实现3D地图+3D柱状图 效果—
fksdskjfzxklzk的博客
04-27 425
我这边是存储到当前文件夹中了。
echarts 5.0——3d中国地图和飞线
为技术而生
03-24 3479
echarts 5.0的版本样式语法与4.0及以下的语法有个别差异，使用旧语法浏览器会警告提示。3d地图常用的实现方法有两种。一种是使用GL来实现，一种是使用叠层和阴影来实现，本文将使用叠层和阴影来实现。
如何利用vue + echarts 写一个3D柱状图
03-29
可以按照以下步骤来利用Vue和Echarts写一个3D柱状图： 1. 安装Echarts 可以通过npm安装Echarts： ``` npm install echarts --save ``` 2. 在Vue组件中引入Echarts 在Vue组件中，通过import引入Echarts： ``` import echarts from 'echarts' ``` 3. 创建一个div元素 在Vue的template中创建一个div元素，用于放置Echarts图表： ``` <template> <div ref="mychart" style="width: 500px;height:500px;"></div> </template> ``` 4. 在Vue的mounted钩子函数中初始化Echarts 在Vue的mounted钩子函数中，使用Echarts的init方法初始化图表，并将其挂载到之前创建的div元素中： ``` mounted() { let myChart = echarts.init(this.$refs.mychart) // 在这里添加Echarts的配置项和数据 myChart.setOption(option) } ``` 5. 添加Echarts的配置项和数据 在初始化Echarts之后，需要添加Echarts的配置项和数据。下面是一个简单的3D柱状图的例子： ``` let option = { tooltip: {}, visualMap: { max: 100, inRange: { color: ['#e0ffff', '#006edd'] } }, xAxis3D: { type: 'category', data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'] }, yAxis3D: { type: 'value' }, zAxis3D: { type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, grid3D: { boxWidth: 200, boxDepth: 80, viewControl: { // 使用鼠标控制视角 autoRotate: true, // 默认视角 distance: 150 } }, series: [{ type: 'bar3D', data: [ ['A', 0, 'Jan', 66], ['B', 1, 'Feb', 79], ['C', 2, 'Mar', 70], ['D', 3, 'Apr', 61], ['E', 4, 'May', 85], ['F', 5, 'Jun', 51], ['G', 6, 'Jul', 77], ['H', 7, 'Aug', 93], ['A', 8, 'Sep', 82], ['B', 9, 'Oct', 55], ['C', 10, 'Nov', 45], ['D', 11, 'Dec', 68] ], shading: 'lambert', label: { show: true, textStyle: { fontSize: 16, borderWidth: 1 } }, emphasis: { label: { textStyle: { fontSize: 20, color: '#900' } }, itemStyle: { color: '#900' } } }] } ``` 这里的配置项和数据可以根据需要自行调整，具体的配置项和数据格式可以参考Echarts官方文档。 6. 运行程序 完成以上步骤后，可以运行程序，在浏览器中查看生成的3D柱状图。如果需要对图表进行交互或者动态更新，可以利用Echarts提供的API实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值