前端学习7续

最新推荐文章于 2024-10-02 23:04:10 发布
最新推荐文章于 2024-10-02 23:04:10 发布
阅读量378 收藏 1
点赞数 8
文章标签： 学习 前端 Echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63125992/article/details/140689119
版权

通过上一节Echarts图的学习，为此做了一个简单的案例来巩固一下前端学习的知识。

最终要完成成果展示

具体代码以及注释详解我已经打包

由于文章限制，无法上传压缩包，放一部分具体代码，当然如果有需要压缩包可以DM，同时有问题可以评论或者DM都可以，无偿~ 仅仅作为交流学习

.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>
    <script src="js/index.js" defer></script>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>

    <h1>软件工程岗位招聘信息</h1>
    <div class="main">
        <div class="left">
            <div class="l1"></div>
            <div class="l2"></div>
        </div>
        <div class="middle">
            <ul class="top">
                <li>
                    <h2>4234</h2>
                    <h3>岗位数量</h3>
                </li>
                <li>
                    <h2>上海</h2>
                    <h3>岗位最多的城市</h3>
                </li>
                <li>
                    <h2>广州</h2>
                    <h3>薪资最高的城市</h3>
                </li>
                <li>
                    <h2>字节跳动</h2>
                    <h3>岗位最多的公司</h3>
                </li>
            </ul>
            <div class="bottom"></div>
        </div>
        <div class="right">
            <div class="r1"></div>
            <div class="r2"></div>
        </div>
    </div>
</body>

</html>

.js

 (function() {
     //左一
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.querySelector('.l1'));
     // 指定图表的配置项和数据
     option = {
         // 标题
         title: {
             text: '工作经验要求',
             textStyle: {
                 color: "#fff",
             },
         },
         // 提示框组件。
         tooltip: {
             trigger: 'axis',
             axisPointer: {
                 type: 'shadow'
             }
         },
         //x轴相关设置
         xAxis: {
             type: 'category',
             data: ['经验不限', '1-3年', '3-5年', '5-10年', '10年以上'],
             axisLabel: {
                 color: "rgb(185,184,206)"
             }
         },
         //  y轴相关设置
         yAxis: {
             type: 'value',
             axisLabel: {
                 color: "rgb(185,184,206)"
             },
             //修改背景线条样式
             splitLine: {
                 show: true,
                 lineStyle: {
                     color: "rgb(72,71,83)"
                 }
             }
         },
         series: [{
             data: [358, 426, 876, 523, 70],
             type: 'bar',
             //柱子宽度
             barWidth: '50%'
         }],
         //颜色
         color: ['rgb(51,152,219)'],
         //网格配置
         grid: {
             //配合left right top bottom 设置图表的大小
             left: '3%',
             right: '8%',
             bottom: '5%',
             //网格区域是否包含坐标轴的刻度标签 true:包含 false:不包含
             containLabel: true
         },
     };
     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);
     //绑定事件  当浏览器窗口发生改变时运行
     window.addEventListener("resize", function() {
         myChart.resize()
     })

 })();


 (function() {
     //左二
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.querySelector('.l2'));
     // 指定图表的配置项和数据
     option = {
         // 标题
         title: {
             text: '学历要求',
             textStyle: {
                 color: "#fff",
             },
         },
         tooltip: {
             trigger: 'item'
         },
         legend: {
             top: '5%',
             left: 'center'
         },
         series: [{
             name: 'Access From',
             type: 'pie',
             radius: ['40%', '70%'],
             avoidLabelOverlap: false,
             label: {
                 show: false,
                 position: 'center'
             },
             emphasis: {
                 label: {
                     show: true,
                     fontSize: 40,
                     fontWeight: 'bold'
                 }
             },
             labelLine: {
                 show: false
             },
             data: [
                 { value: 1048, name: '本科' },
                 { value: 735, name: '硕士' },
                 { value: 580, name: '博士' },
                 { value: 484, name: '专科及以下' },
             ]
         }],
         //颜色
         color: ['rgb(73,146,255)', 'rgb(136,255,195)', 'rgb(253,221,96)', 'rgb(255,110,118)'],
         legend: {
             top: '5%',
             textStyle: {
                 color: 'rgb(172,171,194)'
             }
         }
     };
     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);

     window.addEventListener("resize", function() {
         myChart.resize()
     })

 })();


 (function() {
     //右一
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.querySelector('.r1'));
     // 指定图表的配置项和数据
     option = {
         // 标题
         title: {
             text: '平均薪资最多的前五名城市',
             textStyle: {
                 color: "#fff",
             },
         },
         xAxis: {
             type: 'category',
             data: ['上海', '北京', '深圳', '广州', '杭州'],
             axisLabel: {
                 color: "rgb(175,174,197)"
             }
         },
         yAxis: {
             type: 'value',
             //修改坐标轴
             axisLabel: {
                 color: "rgb(175,174,197)"
             },
             //修改背景线条样式
             splitLine: {
                 show: true,
                 lineStyle: {
                     color: "rgb(72,71,83)"
                 }
             }
         },
         //网格配置
         grid: {
             //配合left right top bottom 设置图表的大小
             left: '3%',
             right: '8%',
             bottom: '5%',
             //网格区域是否包含坐标轴的刻度标签 true:包含 false:不包含
             containLabel: true
         },
         // 提示框组件。
         tooltip: {
             trigger: 'axis',
             axisPointer: {
                 type: 'shadow'
             }
         },
         series: [{
             data: [33468, 27907, 31490, 48702, 31943],
             type: 'line',
             areaStyle: {
                 color: {
                     type: 'linear',
                     x: 0,
                     y: 0,
                     x2: 0,
                     y2: 1,
                     colorStops: [{
                         offset: 0,
                         color: 'blue' // 0% 处的颜色
                     }, {
                         offset: 1,
                         color: 'transparent' // 100% 处的颜色
                     }],
                     global: false // 缺省为 false
                 }
             }
         }]
     };
     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);

     window.addEventListener("resize", function() {
         myChart.resize()
     })

 })();


 (function() {
     //右二
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.querySelector('.r2'));
     // 指定图表的配置项和数据
     option = {
         // 标题
         title: {
             text: '2024最近半年岗位需求变化',
             textStyle: {
                 color: "#fff",
             },
         },
         xAxis: {
             type: 'category',
             data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
             axisLabel: {
                 color: "rgb(175,174,197)"
             }
         },
         yAxis: {
             type: 'value',
             //修改坐标轴
             axisLabel: {
                 color: "rgb(175,174,197)"
             },
             //修改背景线条样式
             splitLine: {
                 show: true,
                 lineStyle: {
                     color: "rgb(72,71,83)"
                 }
             },
             //是否显示坐标轴轴线
             axisLine: {
                 show: true
             }
         },
         series: [{
             data: [820, 232, 901, 934, 1290, 1330, 720],
             type: 'line',
             smooth: true
         }],
         //网格配置
         grid: {
             //配合left right top bottom 设置图表的大小
             left: '3%',
             right: '8%',
             bottom: '5%',
             //网格区域是否包含坐标轴的刻度标签 true:包含 false:不包含
             containLabel: true
         },
         // 提示框组件。
         tooltip: {
             trigger: 'axis',
             axisPointer: {
                 type: 'shadow'
             }
         },
     };
     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);

     window.addEventListener("resize", function() {
         myChart.resize()
     })

 })();   //立即执行函数(匿名函数)
 (function() {
     //地图
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.querySelector('.bottom'));
     // 指定图表的配置项和数据


     // 指定图表的配置项和数据
     option = {
         //标题样式
         title: {
             text: "全国岗位分布图",
             textStyle: {
                 color: 'rgb(255,215,0)',
             },
             left: 'center',
             top: '18%'

         },
         tooltip: {
             trigger: 'item'
         },

         visualMap: { // 左侧小导航图标
             show: true,
             x: 'left',
             y: 'bottom',
             textStyle: {
                 fontSize: 9,
                 color: 'rgb(185,184,206)'
             },
             splitList: [{
                     start: 1,
                     end: 9
                 },
                 {
                     start: 10,
                     end: 99
                 },
                 {
                     start: 100,
                     end: 999
                 },
                 {
                     start: 1000,
                     end: 9999
                 },
                 {
                     start: 10000,
                 },

             ],
             color: ['#334271', '#4d619d', '#6e8adf', '#94d7f1', '#cdeaf6']
         },
         series: [{
             name: '岗位人数',
             type: 'map',
             mapType: 'china',
             roam: true, // 禁用拖动和缩放
             itemStyle: { // 图形样式
                 normal: {
                     borderWidth: .5, //区域边框宽度
                     borderColor: '#009fe8', //区域边框颜色
                    //  areaColor: "#ffefd5", //区域颜色
                 },
                 emphasis: { // 鼠标滑过地图高亮的相关设置
                     borderWidth: .5,
                     borderColor: '#4b0082',
                    //  areaColor: "#fff",
                 }
             },
             label: { // 图形上的文本标签
                 normal: {
                     show: true, //省份名称
                     fontSize: 8,
                 },
                 emphasis: { // 鼠标滑过地图高亮的相关设置
                     show: true,
                     fontSize: 12,
                 }
             },
             data: [
                 { 'name': '湖北', 'value': 628 },
                 { 'name': '香港', 'value': 418 },
                 { 'name': '台湾', 'value': 596 },
                 { 'name': '上海', 'value': 13814 },
                 { 'name': '北京', 'value': 14218 },
                 { 'name': '广东', 'value': 3150 },
                 { 'name': '福建', 'value': 3180 },
                 { 'name': '内蒙古', 'value': 318 },
                 { 'name': '天津', 'value': 3311 },
                 { 'name': '澳门', 'value': 2117 },
                 { 'name': '浙江', 'value': 2418 },
                 { 'name': '江苏', 'value': 4818 },
                 { 'name': '四川', 'value': 916 },
                 { 'name': '山东', 'value': 1316 },
                 { 'name': '辽宁', 'value': 2481 },
                 { 'name': '云南', 'value': 318 },
                 { 'name': '河北', 'value': 1568 },
                 { 'name': '黑龙江', 'value': 204 },
                 { 'name': '陕西', 'value': 534 },
                 { 'name': '甘肃', 'value': 324 },
                 { 'name': '吉林', 'value': 418 },
                 { 'name': '山西', 'value': 455 },
                 { 'name': '重庆', 'value': 897 },
                 { 'name': '河南', 'value': 594 },
                 { 'name': '湖南', 'value': 1337 },
                 { 'name': '江西', 'value': 1318 },
                 { 'name': '贵州', 'value': 456 },
                 { 'name': '广西', 'value': 518 },
                 { 'name': '安徽', 'value': 1208 },
                 { 'name': '海南', 'value': 480 },
                 { 'name': '宁夏', 'value': 875 },
                 { 'name': '新疆', 'value': 50 },
                 { 'name': '西藏', 'value': 7 },
                 { 'name': '青海', 'value': 8 },
             ]
         }]
     };

     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);
     window.addEventListener("resize", function() {
         myChart.resize()
     })

 })()

簡訫37
关注
fileUpLoad:前端实现文件分片上传、断点续传、秒传
05-10
flieload Project setup npm install Compiles and hot-reloads for ...1.使用vue3.0实现前端的文件上传，包括分片上传，断点续传，还有秒传的功能 2.vue3不是重点，只是为了方便开发，主要是体会学习文件上传功能
渡一前端html、css、js笔记及学习规划规划.zip
01-08
渡一前端html、css、js笔记及学习规划规划。了解前端概念，掌握编程规 范，学会HTML必用标签并且能 自定义标签，精通css底层原理 熟练使用达成精准化布局，为后 续课程打下坚实的基础；深入浅出ECMASCRIPT 部分，...
web前端学习1-45集
weixin_74304806的博客
10-20 4301
千峰web前端1-20集==第一集== 课程划分1.HTML+CSS系列教程1之拨云见日2.HTML+CSS系列教程2之溯本求源3.HTML+CSS系列教程3之风声水起4.HTML+CSS系列教程4之巧夺天工如何学好web前端==第二集== 拨云见日1. 什么是HTML、CSS：2. 代码跟网站的关系：3.写到哪里：4.怎样创建一个.html文件：作业==第三集== 宇宙第一编译器VS Code1.学习编辑器基本使用：（操作方面）练习==第四集== 续上集2.多光标操作：3.搜索图标：4.Chrome浏
前端实现文件的断点续传
weixin_52041354的博客
09-25 945
前端：vue2,vue3,vue-cli,html5,webuploader后端：asp.net,jsp,springboot,php,数据库：MySQL,Oracle,SQL Server,达梦,人大金仓,国产数据库功能：超大文件上传,文件和文件夹批量上传，断点续传，加密上传，视频上传技术：百度webuploader，分块，切片，断点续传，秒传，MD5验证，纯JS实现，支持第三方软件集成要求：免费,开源,永久技术支持。
前端CSS收藏学习
pscool的博客
05-19 109
对应的。
前端学习-HTML基础
2302_76949164的博客
03-25 1793
html速通基础
前端学习4——自学习梳理
qq_63125992的博客
07-24 431
介绍弹性盒子的一些属性(基本属性以及布局(重要：定位))
前端学习3——自学习梳理
qq_63125992的博客
07-24 341
1.学习一下盒子模型(盒子就是元素，标签) 盒子模型又分为4种：块级，内联级，内联块级，弹性盒子(弹性盒子续在下一节) 2.元素的结构
前端学习路径
PBitW的博客
01-15 1190
前端学习路径
前端性能优化学习 07 图片优化
皮蛋很白的博客
05-23 2319
图片优化 前端大部分的工作都围绕在 JavaScript 和 CSS 上，考虑如何更快地下载文件，如何提供给用户复杂而优雅的交互，如何高效合理地应用有限的处理和传输资源等，这些是用户感知的全部吗？ 当然，他们在前端开发和性能优化中的地位举足轻重，但 JavaScript 和 CSS 对用户感知而言，并不是最重要的部分，图像才是。我们在公众号发布文章或用 PPT 进行演讲时，都知道一条高效传递信息的原则：字不如表，表不如图。 网站作为一种信息传递的媒介，且如今各类 Web 项目中，图像资源的使用占比也越来越大
前端实现文件的断点续传 大文件上传
alisky119的博客
08-14 949
昨天晚上论坛里面有一个网友发私信给我，想和我探讨一下这方面的技术问题，他是刚开始接触这块，以前没怎么接触过，都是做的后端，主要是以数据库操作为主，他也是最近接的一个项目，遇到了大文件上传下载的问题，问我有没有好用的组件，其它的要求没有，主要就是好用，方便。
前端大文件上传、文件切片、断点续传
weixin_52041354的博客
08-15 783
昨天晚上论坛里面有一个网友发私信给我，想和我探讨一下这方面的技术问题，他是刚开始接触这块，以前没怎么接触过，都是做的后端，主要是以数据库操作为主，他也是最近接的一个项目，遇到了大文件上传下载的问题，问我有没有好用的组件，其它的要求没有，主要就是好用，方便。
fastDFS文件服务客户端, 支持断点续传, 分块上传, 文件秒传, 稳定的前后端组件(前端H5)
10-13
fastDFS文件服务客户端, 支持断点续传, 分块上传, 文件秒传, 稳定的前后端组件(前端H5), 支持多用户并发上传文件校验(文件锁), 可以快速集成fastDFS文件服务, 免去繁琐的配置, 拿来即用, 目前暂时仅支持springboot...
Go基础学习08-并发安全型类型-通道（chan）深入研究
FLJS_T的博客
09-28 918
在前面学习中了解到对于单值变量，如：int、string；多值变量，如：map存在多协程对资源竞争的并发问题，为了解决并发性通常需要引入sync.Mutex解决。>对于通道的基本声明方式有三种：声明并初始化带缓冲的通道（ch1）；声明并初始化一个不带缓冲的通道（ch2）；仅仅声明一个通道（ch3） >什么是通道：==一个通道相当于一个先进先出（FIFO）的队列。也就是说，通道中的各个元素值都是严格地按照发送的顺序排列的，先被发送通道的元素值一定会先被接收。Select和for循环实现对channel的多次选
10.2学习
2401_87363162的博客
10-02 1127
​ Spring AOP就是基于动态代理的，如果要代理的对象，实现了某个接⼝，那么Spring AOP会使⽤JDKProxy，去创建代理对象，⽽对于没有实现接⼝的对象，就⽆法使⽤ JDK Proxy 去进⾏代理了，这时候Spring AOP会使⽤基于asm框架字节流的Cglib动态代理 ，这时候Spring AOP会使⽤ Cglib ⽣成⼀个被代理对象的⼦类来作为代理。每个线程中都有一个自己的ThreadLocalMap类对象，可以将线程自己的对象保持到其中，各管各的，线程可以正确的访问到自己的对象。
从0学习React（3）
qq_54432917的博客
09-29 779
在第一篇文章中，我们对index.tsx文件的每一行代码都做了简单的分析。通过第一篇文章的总结，我也大致知道了index.tsx里的很多语法。而第二篇文章，我对index.tsx文件的框架做了一个大致的分析，通过第二篇文章，我对index.tsx有了进一步的认识。按理来讲，第三篇文章我还是解析index.tsx文件，但是我发现，对于前两篇文章，其实我对语法的细节有很多不明白的点。因此这篇文章，我就把React的一些最基础的知识给梳理一下，帮助我更好的理解index.tsx的代码。
Go基础学习10-原子并发包sync.atomic的使用：CSA、Swap、atomic.Value......
最新发布
FLJS_T的博客
10-02 918
原子操作sync.atomic以及原子变量atomic.Value详细介绍。go中原生的支持原子操作的函数支持的变量类型int32、int64、uint32、uint64、uintptr，以及unsafe包中的Pointer。对于上述原子操作类型中的每一个，可以支持的数据类型有：==int32、int64、uint32、uint64、uintptr，以及unsafe包中的Pointer。但是否sync.Mutex变量能够保证操作的原子性。atomic.Value类型是开箱即用的，我们声明一个该类型的变量
6.824 Lab 2C 学习记录
kingsill的博客
09-29 321
最后10s，开始的时候，恢复网络，插入一个数据，等待这个数据被提交，如果超过这10s就报错。2C的test中的unreliable figure8算是给博主的迎头一棒，需要根据raft论文的figure8进行解决，leader。根据前任及博主自己的经验，unreliable figure8的除了上述这一点以外，需要对。博主由于之前的不严谨，给自己留下了很大的改进困难，最后不得不重构代码。进行一定的设计，可以参考课程里老师提出的意见。一下为博主的github仓库，需要的可以参考。有一定的考验，那么就需要对。
JavaScript模板技术详解：从模板字符串到EasyTemplateJS
解析"的表达式 在JavaScript中，模板技术是一种强大的文本处理方式，特别是在前端开发中用于动态...在学习和使用这些技术时，理解它们的工作原理和最佳实践至关重要，这对于提升前端开发的技能和效率有着显著的帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值