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

最终要完成成果展示

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

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

.html

                                               
软件工程岗位招聘信息
     
         
             
             
         
         
             
                 
                     
4234
                     
岗位数量
                 
                 
                     
上海
                     
岗位最多的城市
                 
                 
                     
广州
                     
薪资最高的城市
                 
                 
                     
字节跳动
                     
岗位最多的公司
                 
             
             
         
         
             
             
         
     
   

.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()      })   })()