阅读量:0
通过上一节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() }) })()