通过上一节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()})})()
