vue3搭配ts和echarts实现疫情地图自配接口,省级可以进二级市区右侧可查看高低。(3)

文末

如果30岁以前,可以还不知道自己想去做什么的话,那30岁之后,真的觉得时间非常的宝贵,不能再浪费时间在一些碎片化的事情上,比如说看综艺,电视剧。一个人的黄金时间也就二,三十年,不能过得浑浑噩噩。所以花了基本上休息的时间,去不断的完善自己的知识体系,希望可以成为一个领域内的TOP。

同样是干到30岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

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

前端面试题汇总

JavaScript

});

// 首次 请求地图的总数据数据 用来初始化数据

axios

.get(https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json)

.then((res: any) => {

// 存一次数据 用来找子级

mapData.value = res.data;

// registerMap 注册一个地图   mapData 地图的数据包 根据不同的数据渲染不同的地图

echarts.registerMap(“china”, res.data);

// 这个调用是进行地图的渲染

mapRender();

});

// 首次 请求疫情的数据 因为接口 设计到跨域 所以要进行 proxy 进行代理

axios

.get(“/api/news/wap/fymap2020_data.d.json?_=1580892522427”)

.then((res: any) => {

// 将数据备份一次 用来查找子级

mapEpidemic.value = res.data.data.list;

// 这个调用是疫情数据的渲染 mapRender 处理数据的函数

let data = mapRender(res.data.data.list);

// option 数据传入进去 设置数据

map.setOption(data);

});

});

// 处理数据的函数 以及 echarts 的option 数据配置 这个函数非常重要

const mapRender = (data: any = [], mapData: any = []) => {

let mapLocal: any = [];

mapData.forEach((value: any, index: number) => {

console.log(value.properties.name);

mapLocal.push(value.properties.name);

});

let city = [“北京”, “重庆”, “上海”, “天津”];

let area: any = {

内蒙古: “内蒙古自治区”,

新疆: “新疆维吾尔自治区”,

广西: “广西壮族自治区”,

宁夏: “宁夏回族自治区”,

西藏: “西藏自治区”,

澳门: “俺们特别行政区”,

香港: “香港特别行政区”,

};

// 便利处理字典

let result = data.map((i: any, index: number) => {

let name = “”;

// 有 conNum 说明有子级

if (i.conNum) {

return {

name: mapLocal[index],

value: Number(i.conNum),

};

} else {

if (city.find((x: any) => x === i.name)) {

name = i.name + “市”;

} else if (area[i.name]) {

name = area[i.name];

} else {

name = i.name + “省”;

}

return {

name,

value: Number(i.value),

};

}

});

// echarts 的数据配置选项 具体看官网

let option = {

title: {

text: “中国地图”,

left: “right”,

},

tooltip: {

trigger: “item”,

showDelay: 0,

transitionDuration: 0.2,

},

visualMap: {

left: “right”,

min: 0,

max: 19000,

inRange: {

color: [

“#313695”,

“#4575b4”,

“#74add1”,

“#abd9e9”,

“#e0f3f8”,

“#ffffbf”,

“#fee090”,

“#fdae61”,

“#f46d43”,

“#d73027”,

“#a50026”,

],

},

text: [“高”, “低”],

calculable: true,

},

series: [

{

name: “中国疫情地图”,

type: “map”,

roam: true,

map: “china”,

// 设置地图的文字

label: {

show: true,

fontSize: 8,

color: “#fff”,

},

emphasis: {

label: {

show: true,

},

},

data: result,

},

],

};

return option;

};

vue.config.js文件夹里面写入配置跨域

const {

defineConfig

} = require(‘@vue/cli-service’)

module.exports = defineConfig({

transpileDependencies: true,

devServer: {

open: true, // 自动打开浏览器

// proxy: “https://sug.so.360.cn”, 这个接口必须跨域

react和vue的比较

相同
1)vitual dom
2)组件化
3)props,单一数据流

不同点
1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)

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

om
2)组件化
3)props,单一数据流

不同点
1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)

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

[外链图片转存中…(img-S199Fdxk-1715832482446)]

[外链图片转存中…(img-Eqd4A2ml-1715832482447)]

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值