榕城候佳人的博客

第二步，在绘制地图的vue组件中导入该json文件。解释第三个import，world可以随便改名字，在下面第三步注册地图的时候对应第二个world。第三步，定义图表并配置图表。注意在注册地图的时候，第一个是地图的名称，第二个是在import的时候给json文件取的名字。核心步骤：下载对应的地图文件；在script中导入json文件；下面给出完整代码（script），template部分只需要设置对应的图表id即可。之前所查找的资料都没有讲清楚如何引入地图文件并绘制地图，下面做一个记录。

今日绘图需要用到echarts的地图json文件，但是github上已经找不到了，后发现伟大的网友提供了地址如下：Index of /examples/data/asset/geo

时，可以展示多行数据。之前查找资料的时候，很多用字符串模板的，即{a}{b}{c}之类的，但是经过实践之后发现这种方法对于散点图并不合适（当然也可能是因为我没找到正确的办法）。核心就是tooltip中的formatter代码，这里可以在其中用console.log来查看，再决定返回什么数据。这样就可以实现文章开头的效果了。不过最后还是找到了解决方法，下面给出代码，大家可以根据自己的情况修改。

base64图片转换工具，是一款可以在线任意图片格式转Base64 DataUrl编码工具,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。要实现不同的点对应不同的图片，只需要在series中每个symbol设置不同dataURI即可。总结一下，就是先把图片转换成dataURI，然后在series中的symbol写上即可。base64图片在线转换工具 - 站长工具。

重点是 .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {d}%"),

在做数据可视化网站时，有时需要用到多个图表，这时就需要对图表的样式做一个统一的设计使网站外观更整齐。

场景需求：后端采用flask通过pymysql从数据库获取数据，并返回给前端。前端vue3利用axios获取数据并运用到echarts绘制图表。

有需求是在vue项目中实现点击按钮完成页面跳转。这里不适用a标签，而是用vue自带的vue-router。首先看一下项目结构src│ App.vue│ main.js│├─router│└─viewindex.vue可以看到，我在初始的vue项目中添加了一个文件夹router，并在里面添加了一个index.js文件。

有个项目需求，如题目所示。这种展示方式让首页的内容可以完美展示而不受到导航栏的干扰，等下滑查看内容时导航栏的背景颜色再显示出来。非常简单，有需要的伙伴可以根据自己实际情况自行修改。导航条随滚动条下滑显示-示例。导航栏随滑动条下滑显示。

目前有一个需求就是在网页上放置一个音乐控制按钮，并且是在vue3项目里面。于是小白的我遇到了2个问题，第一个问题是如何实现没有进度条的播放按钮，这个网上有现成的代码，可以通过js代码切换不同的图片或者是别的样式，并不算难；第二个问题是如何在vue3项目中引入js文件，这个给刚刚接触vue3的我带来了一点麻烦。首先声明这个功能只涉及了我的3个页面，一个是vue组件，另一个就是自建的本地js文件，还有一个就是vue项目自带的index.html文件。最后一步是在index.html文件引入js文件。

查阅资料后发现要在vue项目自带的index.html文件内添加下面的样式代码才行。使用vue时发现总有去不掉的外边距，在index.vue里面怎样设置样式都不管用。

经过2个月的工作，我完成了80%的工作量，并成功将静态网站进行了部署。并对页面进行了更新。不过当前虽然完成了部署，但是还没有实现响应式布局，所以只有用谷歌浏览器打开会正常显示布局。同时可能是部署在github的原因，页面加载有点慢。这些问题我后面还会解决，先看看效果吧。源代码等结课以后再公布~简单的设计了一下，介绍了可视化的内容，灵感来源等等，也还有部分内容没有设计完。然后是3届世界杯的可视化，这里只设计好了2014年的一部分，中间是对单个国家的具体分析。然后是整体的分析（内容是随便写的）

这学期有个数据可视化的作业，遂决定做一个世界杯主题的可视化网站。基于Python、Flask和Echarts。因此网站也将分为3个大块，分别是单届世界杯的数据详细分析、3届世界杯数据对比分析和其他往届世界杯重要数据分析。好吧我是标题党，标题用的是完成时，但是事实上我这个还没完成。后面会针对每个模块给出详细介绍。

最近在做一个数据可视化大屏的作业，其中需要实现点击不同的按钮，大屏中间内容呈现不同的数据分析图表，页面其他部分不发生改变。之前考虑过复制多个页面然后改变中间的页面，但是这样会导致文件冗余，而且由于静态文件放在不同的文件夹，所以每个复制的页面都要调整文件路径！废话不多说先看代码。不过核心就是下面这句话：把所有要切换的内容放在一个大的div里面，然后用对应的div放对应的要切换的页面，每个div设置一个id。（当然也有一些用js实现的，但是我还么学，所以只能用这个了，而且这个也是非常方便相较于js）

我们之前学过的就是:hover，但是这个是瞬间变化的，看上去不够美观。我们可以通过transition属性来控制变化的具体效果如何时开始变化、变化哪些属性等。1.属性：想要变化的css属性，宽度高度、背景颜色、内外边距都可以。如果想要所有属性都变化过渡，可以添加all。transition：要过渡的属性 花费时间 运动曲线 何时开始；所谓属性过渡，就是从一个属性变到另一个属性。4.何时开始：单位是秒（必须写），可以设置延迟触发时间。2.花费时间：多久完成变化，单位是秒（必须写）怎么样，你学会了吗？

相信很多小伙伴在写前端时都喜欢用图片做背景，尤其是下面这种背景图片搞模糊一些，让可视栏的内容更加突出。

CSS3是在原来的CSS基础上优化来的，添加了一些新的内容，在移动端的支持要好于PC端。下面是CSS3的主要内容。🔥CSS3的新增属性、结构伪类和伪元素选择器🌟属性选择器属性选择器就是选择具有特定属性的元素（标签），语法是 标签[属性名]需要注意的是，属性选择器的权重要高于标签选择器

html5的新特性起源html5新增特性主要是针对以前语义化不足的问题，添加了新的标签、表单和表单属性等。新增的语义化标签

大概原因就是浏览器有自动保存密码的功能。为了解决这个问题也很简单，我们只用在css最顶端加上这段代码。这样即使自动保存密码也不影响我们的样式（下面就显示了我之前设置的密码）问题描述：input设置密码属性后导致input设置的所有样式失效。在设计登录页面时，遇到一个之前没遇见的问题，这里记录一下。但是当我在密码输入框设置密码属性后（如下）首先我对登录部分的盒子设置了如下属性。这样按道理可以实现下面的效果。

🔥1.margin负值的运用应用情急1.实现两个块元素布局在一起且边框不会重叠的问题可以为右边的块设置margin-left为-1，这样就实现''1+1=1''的效果

CSS的vertical-algin属性的使用场景：设置图片或者表单（行内块元素）和文字的垂直对齐。它只针对行内元素或者行内块元素有效。

界面样式就是更改一些用户操作样式，更好提高用户体验。具体包括：更改用户的鼠标样式表单轮廓防止表单域拖拽

1.为什么需要精灵图一个网页中往往有许多图片，服务器频繁接收发送图片就会降低页面加载速度，为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术。

场景：类似网站广告，当我们点击关闭就不见了，但是重新刷新页面又会出来！本质就是让一个元素在页面中隐藏或者显示出来

定位模式是否脱标移动位置是否常用statci静态定位不脱标不能使用边偏移少relative相对定位不脱标（占有位置）相对于自身位置偏移常用absolute绝对定位是（不占有位置）带有定位的父级常用fixed固定定位是（不占用位置）浏览器可视区常用sticky黏性定位不脱标（占用位置）浏览器可视区当前阶段少。

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简介：本文介绍CSS的定位相关知识。知识学习内容来自b站的@黑马程序员的视频😃。

其实不管是什么语言，都需要经常写才会熟练，这次的案例基本把前面所学都用到了，自己在对着写的时候也有很多忘记了的需要翻我以前的文章复习。所以有时间还是要多敲代码多练习才会熟练。

清除浮动原因：父级没高度；子盒子浮动了；影响下面的布局了。就应该清除浮动清除浮动方法：清除浮动的方式优点缺点额外标签法通俗易懂，书写方便添加许多无意义的标签，结构化较差父级overflow:hidden书写简单溢出隐藏父级after元素结构语义化正确兼容性问题父级双伪元素结构语义化正确兼容性问题。

height:300px width:237px float:left margin-right:10px （最后一个为0）height:200px margin-top:10px width:100%（或者不写，默认是和浏览器一样宽）前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~height:50px width:100%（或者不写，默认是和浏览器一样宽）本篇文章实现上面常见的网页布局，其中一共分为4个部分，下面为数据。

.left {.right {左边右边

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简介：本文介绍CSS的阴影效果。知识学习内容来自b站的@黑马程序员的视频CSS的阴影效果包括盒子阴影和文字阴影两种🔥。

.box {

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简介：本文介绍CSS的一个品优购新闻快报实例。知识学习内容来自b站的@黑马程序员的视频🔥。

然后定义大盒子box，设置长和宽。方便其中的元素都可以居中显示。最后设置成行内块元素，方便后续一行放置多个展示框。前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~在html中进行布局，先是大盒子box，然后分别是图片，标题，信息和价格四个盒子。文章简介：本文介绍CSS的一个展示框实例。知识学习内容来自b站的。用一个div大盒子包裹四个小盒子。作者简介：rchjr——五带信管菜只因一枚。所属专栏：前端只因变凤凰之路。用类标签对四个小盒子设置样式。首先需要清除掉内外边距。

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简介：本文介绍CSS的盒子模型中的外边距。知识学习内容来自b站的@黑马程序员的视频💥。

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简介：本文介绍CSS的盒子模型中的边框与内边距。知识学习内容来自b站的@黑马程序员的视频😃。

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简介：本文介绍CSS的三大特性。知识学习内容来自b站的@黑马程序员的视频🚩。

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简介：本文介绍CSS背景相关知识。知识学习内容来自b站的@黑马程序员的视频🔥。

其实方法很简单，只需要将行高等于它所在的盒子高度即可。当然这里我们使用了元素显示的转换，即让a标签转换为块元素而不是行内元素。下面给出前后对比的代码。前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~如上图，健康 儿童二字在一行中的高度很明显是贴到顶部了，而我们想要的效果应该是这样。文章简介：本文介绍CSS如何让单行文字垂直居中。作者简介：rchjr——五带信管菜只因一枚。以上就是如何让单行文字垂直居中的小技巧啦~先看一个案例了解什么是单行文字垂直居中。

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页。所以元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，一行可以放多个等。HTML主要分为块元素和行内元素😃。