2024年前端最新Vue Echarts 显示地图且根据坐标设置标注点(1),零基础如何转行前端开发工程师
如果你已经下定决心要转行做编程行业,在最开始的时候就要对自己的学习有一个基本的规划,还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标,然后为之努力,坚持到底。如果你有幸看到这篇文章,希望对你有所帮助,祝你转行成功。开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最后
中年危机是真实存在的,即便有技术傍身,还是难免对自己的生存能力产生质疑和焦虑,这些年职业发展,一直在寻求消除焦虑的依靠。
-
技术要深入到什么程度?
-
做久了技术总要转型管理?
-
我能做什么,我想做什么?
-
一技之长,就是深耕你的专业技能,你的专业技术。(重点)
-
独立做事,当你的一技之长达到一定深度的时候,需要开始思考如何独立做事。(创业)
-
拥有事业,选择一份使命,带领团队实现它。(创业)
一技之长分五个层次
-
栈内技术 - 是指你的前端专业领域技术
-
栈外技术 - 是指栈内技术的上下游,领域外的相关专业知识
-
工程经验 - 是建设专业技术体系的“解决方案”
-
带人做事 - 是对团队协作能力的要求
-
业界发声 - 工作经验总结对外分享,与他人交流
永远不要放弃一技之长,它值得你长期
信仰持有。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue 等等。

这里打算写地图
ts代码
首先得装 echarts 插件。
npm install echarts --save

在使用 echarts 组件中引入 echarts 插件。
import echarts from ‘echarts’
还需要 axios 插件,用来读取 geojson 文件。
npm install axios --save
引入axios插件。
import axios from ‘axios’
首先在组件里面引入中国的json文件。
const chinaJson = require(“…/…/public/mapJson/china.json”);
在data里面创建一个Echarts对象和配置对象。
data(){
return{
myChart:‘’,
distributionOptions:‘’
}
},
创建一个方法,用来配置 Echarts 的 Options 参数。
changeOptions (name) {
// 经纬度数据
const seriesList = [
{
data: [
{ value: [106.9, 27.7] },
{ value: [105.29, 27.32] },
{ value: [106.04, 27.03] },
{ value: [104.82, 26.58] },
{ value: [107.82, 20.58] }
]
},
{
data: [
{
value: [107.43, 28.56]
}
]
},
{
data: [
{
value: [107.5, 27.76]
}
]
}
];
// 图标
const series = seriesList.map(v => {
return {
type: “scatter”, //配置显示方式为用户自定义
coordinateSystem: “geo”,
data: v.data
};
});
// options
this.distributionOptions = {
tooltip: { // 提示框组件
show: true, // 显示提示框组件
trigger: “item”, // 触发类型
triggerOn: “mousemove”, // 出发条件
formatter: “名称:{b}
坐标:{c}”
},
series, // 数据
geo: {
map: name || ‘china’, // 引入地图 省份或者 国家
layoutCenter: [“50%”, “50%”], //设置后left/right/top/bottom等属性无效
layoutSize: “45%”,
roam: true, //开启鼠标缩放和漫
zoom: 2,
label: {
normal: {
//静态的时候展示样式
show: true, //是否显示地图省份得名称
textStyle: {
color: “#fff”,
fontSize: 10,
fontFamily: “Arial”
}
},
emphasis: { // 高亮状态下的样式
//动态展示的样式
color: “#fff”
}
},
itemStyle: { // 地图区域的多边形 图形样式。
normal: {
borderColor: “#07919e”, // 边框颜色
areaColor: “#1c2f59”, // 区域颜色
textStyle: { // 文字颜色
color: “#fff”
},
shadowBlur: 10, // 图形阴影的模糊大小
shadowOffsetX: 10 // 阴影水平方向上的偏移距离。
},
emphasis: {
areaColor: “#1c2f59”,
color: “#fff”
}
}
}
最后
如果你已经下定决心要转行做编程行业,在最开始的时候就要对自己的学习有一个基本的规划,还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标,然后为之努力,坚持到底。如果你有幸看到这篇文章,希望对你有所帮助,祝你转行成功。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)