可视化项目

于 2022-11-24 20:35:42 发布
阅读量701 收藏
点赞数
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaswestmere/article/details/128025762
版权
本文介绍了如何使用ECharts库创建各种类型的图表，包括折线图、饼状图和柱状图，还提及了中国地图的绘制以及在注册、登录和首页等页面中的JavaScript应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.echarts图表制作

1.导入一个解压好的echarts.js

2.echarts官网有基本格式可以直接复制

例如以下代码

 <script src="./echarts/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="box" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector('.box'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>

若是其他表格可直接修改option里的所有内容即可,title{text}是标题 x,yAxis是x轴和y轴

2.折线图

 <script src="./echarts/echarts.min.js"></script>
</head>
<body>
     <div class="box" style="width: 800px; height: 600px;"></div>
      <script>
         const myChart = echarts.init(document.querySelector('.box'));

            // 指定图表的配置项和数据
                
           const option = {
           tooltip: {
             trigger: 'axis',
             position: function (pt) {
               return [pt[0], '10%'];
             }
           },
           // 标题
           title: {
             left: 'left',
             text: '2021年全学科薪资走势'
           },
           //工具栏
           toolbox: {
             feature: {
               dataZoom: {
                 yAxisIndex: 'none'
               },
               restore: {},
               saveAsImage: {}
             }
           },
           // x轴
           xAxis: {
             type: 'category',
             boundaryGap: false,
             data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
           },
           yAxis: {
             type: 'value',
             boundaryGap: [0, '100%']
           },
           // 缩放
           // dataZoom: [
           //   {
           //     type: 'inside',
           //     start: 0,
           //     end: 10
           //   },
           //   {
           //     start: 0,
           //     end: 10
           //   }
           // ],
           series: [
             {
               name: '学科薪资',
               type: 'line',
               symbol: 'emptyCircle',
               symbolSize: 10,
               sampling: 'lttb',
              smooth: true,
               itemStyle: {
                 color: '#16c1fc'
               },
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
                     color: '#a3dffd'
                   },
                   {
                     offset: 1,
                     color: '#eef9ff'
                   }
                 ])
               },
               data: [8000,8888,10000,12000,13000,11000,14000,15000,10000,9000,12000,15000]
             }
           ]
         };
         myChart.setOption(option);
    </script>

3.饼状图

<!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="box" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.querySelector('.box'));

      // 指定图表的配置项和数
      const option = {
  tooltip: {
  
    trigger: 'item'
  },
  title:{
    text:'2021年薪资分布',
    left:10,
    top: 10
  },
  legend: {
     bottom: '5%',
    left: 'center',
    
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '一万以下' },
        { value: 735, name: '1-1.5万' },
        { value: 580, name: '1.5-2万' },
        { value: 484, name: '2以上万' },
    
      ]
    }
  ]
};
  
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>

4.柱状图

 <script src="./echarts/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="box" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.querySelector('.box'));

      // 指定图表的配置项和数据
      const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['张三', '李四', '王五', '赵六', 'ikun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '期望薪资',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [10000, 12332, 11301, 13134, 12390, 1430,12320],
        itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 1, color: '#188df0' },
        ])
        },
    },
    {
      name: '就业薪资',
      type: 'bar',
      // 鼠标点谁谁高亮,其他变淡
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [11000, 13292, 12101, 13414, 12390, 12130, 13210],
       itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 1, color: '#4248' },
        ])
        },
    }
]
}
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>

5.中国地图

 <!-- 1.引入 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
    <!-- 中国地图 -->
    <script src="./echarts/china.js"></script>
</head>

<body>
    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        // 3.1 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main'));

        // 3.2 指定图表的配置项和数据
        const dataList = [
            {
                "name": "上海",
                "value": 3
            },
            {
                "name": "陕西省",
                "value": 3
            },
            {
                "name": "江苏省",
                "value": 2
            },
            {
                "name": "内蒙古自治区",
                "value": 3
            },
            {
                "name": "北京",
                "value": 11
            },
            {
                "name": "贵州省",
                "value": 4
            },
            {
                "name": "西藏自治区",
                "value": 3
            },
            {
                "name": "广东省",
                "value": 4
            },
            {
                "name": "天津",
                "value": 3
            },
            {
                "name": "黑龙江省",
                "value": 1
            },
            {
                "name": "云南省",
                "value": 3
            },
            {
                "name": "福建省",
                "value": 3
            },
            {
                "name": "四川省",
                "value": 2
            },
            {
                "name": "新疆维吾尔自治区",
                "value": 3
            },
            {
                "name": "甘肃省",
                "value": 3
            },
            {
                "name": "辽宁省",
                "value": 5
            },
            {
                "name": "安徽省",
                "value": 3
            },
            {
                "name": "吉林省",
                "value": 2
            },
            {
                "name": "浙江省",
                "value": 1
            },
            {
                "name": "山西省",
                "value": 2
            },
            {
                "name": "青海省",
                "value": 1
            },
            {
                "name": "广西壮族自治区",
                "value": 3
            },
            {
                "name": "宁夏回族自治区",
                "value": 2
            },
            {
                "name": "湖北省",
                "value": 4
            },
            {
                "name": "河北省",
                "value": 1
            },
            {
                "name": "湖南省",
                "value": 3
            },
            {
                "name": "江西省",
                "value": 1
            },
            {
                "name": "河南省",
                "value": 1
            }
        ]

        // 数据设置
        dataList.forEach((item) => {
            // 数据里名字和上面的名字有点不太一样, 需要把多余的文字去掉(替换成空字符串)
            item.name = item.name.replace(/省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g, '') 
        })

        let option = {
            title: {
                text: '籍贯分布',
                top: 10,
                left: 10,
                textStyle: {
                    fontSize: 16,
                },
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} 位学员',
                borderColor: 'transparent',
                backgroundColor: 'rgba(0,0,0,0.5)',
                textStyle: {
                    color: '#fff',
                },
            },
            visualMap: {
                min: 0,
                max: 6,
                left: 'left',
                bottom: '20',
                text: ['6', '0'],
                inRange: {
                    color: ['#ffffff', '#0075F0'],
                },
                show: true,
                left: 40,
            },
            geo: { // 地理坐标系组件
                map: 'china',
                roam: false,
                zoom: 1.0,
                label: {
                    normal: {
                        show: true,
                        fontSize: '10',
                        color: 'rgba(0,0,0,0.7)',
                    },
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)',
                        color: '#e0ffff',
                    },
                    emphasis: {
                        areaColor: '#34D39A',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            },
            series: [
                {
                    name: '籍贯分布',
                    type: 'map',
                    geoIndex: 0,
                    data: dataList,
                },
            ],
        }

        // 3.3使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

6.注册页面js

//1.获取dom元素注册点击事件
document.querySelector('#btn-register').addEventListener('click',async (e) => {
    //2. 阻止表单默认行为
    e.preventDefault()
     //3.获取用户名输入值
    const username = document.querySelector('#input-email').value
    //4.获取密码输入值
    const password = document.querySelector('#input-password').value
    //debugger 检验
    //5.进行判断条件
   if(username.length < 2 || username.length >30) {
     return Toast.fail('注册用户必须2-30位')
   } else if(password.length <6 || password.length >30) {
    return Toast.fail('注册密码必须6-30位')
   } 
   // 6.发送ajax请求 获取数据  注意 用await 必须搭配 async一起使用
   // await 取代.then  await 的结果 获取then的结果
   // const{data} = res
     const {data:res} = await axios.post('/register',{username,password})
     // 7.跳转登录页面
     Toast.success('注册成功')
     location.href = './login.html'

7.登录页面

document.querySelector('#btn-login').addEventListener('click',async (e) => {
    //2. 阻止表单默认行为
    e.preventDefault()
     //3.获取用户名输入值
    const username = document.querySelector('#input-email').value
    //4.获取密码输入值
    const password = document.querySelector('#input-password').value
    //debugger 检验
    //5.进行判断条件
   if(username.length < 2 || username.length >30) {
     return Toast.fail('注册用户必须2-30位')
   } else if(password.length <6 || password.length >30) {
    return Toast.fail('注册密码必须6-30位')
   } 
   // 6.发送ajax请求 获取数据  注意 用await 必须搭配 async一起使用
   // await 取代.then  await 的结果 获取then的结果
   // const{data} = res
     const {data} = await axios.post('/login',{username,password})
        console.log(data);
        // 将token存入硬盘    //键值对  // 值
        localStorage.setItem('token',data.data.token)
       
     // 7.跳转登录页面
     Toast.success('登陆成功')
     location.href = './index.html'
})

8.首页

window.addEventListener('load',async() =>{
  const {data} = await axios({
    url:'/dashboard',
    method:'get',
    headers:{
     Authorization: localStorage.getItem('token')
    }
    
  })
    
  console.log(data);
 // 开始渲染
 setOverview(data.data.overview)//全学科薪资走势 折线图
 setSubject(data.data.year)//班级薪资分布
 setClass(data.data.salaryData)//男女薪资分布 饼图
 setGender(data.data.salaryData)//2,5 班级每组薪资分布
 setGroup(data.data.groupData)// 2.6 籍贯分布
 setProvince(data.data.provinceData) // 2.3 班级薪资分布 饼图
})
 // 数据概况;
  const setOverview = data => {
     console.log(data);
     // 方法一
     //document.querySelector('[name ="salary"]').innerHTML = data.salary
     // 方法二 利用 object.key 和value 的静态方面 静态方法返回的是一个数组
     console.log(Object.keys(data));// 获取对象属性名数组
     Object.keys(data).forEach(item => {
        //遍历属性名数组 item就是对象的属性名字符串
        document.querySelector(`[name ="${item}"]`).innerHTML = data[item] //括号内式变量用[]语法,不是变量用的是.语法
     })
  }
  // 2.2全学科薪资走势 折线图
  const setSubject = data => {

    console.log(data);
      //方法一 map
      // 方法2 for each  先创建两个空数组
    const xData = data.map(item => item.month)
    const yData = data.map(item => item.salary)
      console.log( xData, yData);
      const myChart = echarts.init(document.querySelector('#line'));

      // 指定图表的配置项和数据
          
     const option = {
     tooltip: {
       trigger: 'axis',
       position: function (pt) {
         return [pt[0], '10%'];
       }
     },
     // 标题
     title: {
       left: 'left',
       text: '2021年全学科薪资走势'
     },
     //工具栏
     toolbox: {
       feature: {
         dataZoom: {
           yAxisIndex: 'none'
         },
         restore: {},
         saveAsImage: {}
       }
     },
     // x轴
     xAxis: {
       type: 'category',
       boundaryGap: false,
       data: xData
     },
     yAxis: {
       type: 'value',
       boundaryGap: [0, '100%']
     },
     // 缩放
     // dataZoom: [
     //   {
     //     type: 'inside',
     //     start: 0,
     //     end: 10
     //   },
     //   {
     //     start: 0,
     //     end: 10
     //   }
     // ],
     series: [
       {
         name: '学科薪资',
         type: 'line',
         symbol: 'emptyCircle',
         symbolSize: 10,
         sampling: 'lttb',
        smooth: true,
         itemStyle: {
           color: '#16c1fc'
         },
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
               color: '#a3dffd'
             },
             {
               offset: 1,
               color: '#eef9ff'
             }
           ])
         },
         data: yData
       }
     ]
   };
   myChart.setOption(option);
 }
 // 2.3 班级薪资分布
 const setClass = data => {
    console.log(data);
   
     data = data.map(item =>{
        // 传入的是个对象  圆饼格式是 name value 
        return {
            name :item.label,
           value : item.g_count + item.b_count
        }
         })
    const myChart = echarts.init(document.querySelector('#salary'));

    // 指定图表的配置项和数
    const option = {
tooltip: {

  trigger: 'item'
},
title:{
  text:'2021年薪资分布',
  left:10,
  top: 10
},
legend: {
   bottom: '5%',
  left: 'center',
  
},
series: [
  {
    name: 'Access From',
    type: 'pie',
    radius: ['50%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      show: false,
      position: 'center'
    },
    emphasis: {
      label: {
        show: true,
        fontSize: '40',
        fontWeight: 'bold'
      }
    },
    labelLine: {
      show: false
    },
    data,
  }
]
};

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
 }
 // 2.4 男女薪资分布 饼图
 const setGender = data => {
    console.log(data);
   // 男生组
     const bData = data.map(item => ({name:item.label, value:item.b_count}))
     // 女数组
     const gData = data.map(item => ({name:item.label, value:item.g_count}))
    const myChart = echarts.init(document.querySelector('#gender'));

    // 指定图表的配置项和数
    const option = {

tooltip: {},
color: ['#02d8a4','#ff9700','#019aff','#01d4ff'],
    
title:[
 {
 text:'男女薪资分布',
 left:10,
 top:10
},
{
 text:'男生',
 left:'50%',
 bottom:'45%',
 textAlign:'center'
},
{
 text:'女生',
 left:'50%',
 bottom:'-1%',
 textAlign:'center'
},
],

series: [
 
 {
   type: 'pie',
   radius: ['20%','30%'],
   center: ['50%', '30%'],
   data: bData,
   // No encode specified, by default, it is '2012'.
 },

 {
   type: 'pie',
   radius: ['20%','30%'],
   center: ['50%', '75%'],
    data: gData,
   // No en
   encode: {
     itemName: 'product',
     value: '2014'
   }
 },

],

};

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

 }
 // 2,5 班级每组薪资分布

 const setGroup = data => {
    console.log(data);
  // 默认取第一组 
   const arr = data["1"]
   // 第一组数据生成x轴和y轴数据
   const nameData = arr.map(item => item.name)
   const hopeSalary = arr.map(item => item.hope_salary)
   const salary = arr.map(item => item.salary)

    const myChart = echarts.init(document.querySelector('#lines'));

      // 指定图表的配置项和数据
      const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: nameData
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '期望薪资',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: hopeSalary,
        itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 1, color: '#188df0' },
        ])
        },
    },
    {
      name: '就业薪资',
      type: 'bar',
      // 鼠标点谁谁高亮,其他变淡
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: salary,
       itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 1, color: '#4248' },
        ])
        },
    }
]
}
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      //点击小组切换按钮 利用事件委托 事件冒泡
      document.querySelector('#btns').addEventListener('click',(e) => {
        // 判断点击是否是按钮
        if(e.target.tagName ==='BUTTON') {
         // 进行排他 点谁谁高亮 不点取消高亮
         document.querySelector('.btn-blue').classList.remove('btn-blue') 
         //添加高亮效果
         e.target.classList.add('btn-blue')  
         // 获取当前点击小组数据
         const arr = data[e.target.innerHTML]
         //  根据小组 数据  生成x轴 和y轴
         const nameData = arr.map(item => item.name)
         const hopeSalary = arr.map(item => item.hope_salary)
         const salary = arr.map(item => item.salary)

         // 重置图标数据
         option.xAxis[0].data =nameData
         option.series[0].data =hopeSalary
         option.series[1].data =salary
         // 重新调用 option 数据 渲染结构   
         myChart.setOption(option);
        }
      })

 }
 // 2.6 籍贯分布
 const setProvince = data => {
    console.log(data);
// 3.1 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector('#map'));

// 3.2 指定图表的配置项和数据
const dataList = data

// 数据设置
dataList.forEach((item) => {
    // 数据里名字和上面的名字有点不太一样, 需要把多余的文字去掉(替换成空字符串)
    item.name = item.name.replace(/省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g, '') 
})

let option = {
    title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
            fontSize: 16,
        },
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
            color: '#fff',
        },
    },
    visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
            color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
    },
    geo: { // 地理坐标系组件
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
            normal: {
                show: true,
                fontSize: '10',
                color: 'rgba(0,0,0,0.7)',
            },
        },
        itemStyle: {
            normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)',
                color: '#e0ffff',
            },
            emphasis: {
                areaColor: '#34D39A',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
        },
    },
    series: [
        {
            name: '籍贯分布',
            type: 'map',
            geoIndex: 0,
            data: dataList,
        },
    ],
}

// 3.3使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

 }





  // 退出登录
document.querySelector('#logout').addEventListener('click', ()=>{
    // 删除token
    localStorage.removeItem('token')
   // 跳转登录页面
    location.href ='./login.html'
})

9.

//window.onload( item,async() =>{
 //   const{data:res} = await axios.get('/students')
 //})
//
   
// 因为多次调用需要封装

 const getStudentList =  async() => {
    const {data} =  await axios.get('/students')
    console.log(data);
    document.querySelector('.list').innerHTML = data.data.map(item => {
     // 在三元里 0为false 1为true
 //     return ` <tr>
 //     <td>${item.name}</td>
 //     <td>${item.age}</td>
 //     <td>${item.gender === 0 ? '男' : '女'}</td> 
 //     <td>${item.group}</td>
 //     <td>${item.hope_salary}</td>
 //     <td>${item.salary}</td>
 //     <td>${item.province}${item.city}${item.area}</td>
 //     <td>
 //       <a href="javascript:;" class="text-success mr-3" data-id ="${item.id}"><i class="bi bi-pen"></i></a>
 //       <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
 //     </td>
 //   </tr> 
 //     `
      return ` <tr>
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.gender  ? '女' : '男'}</td> 
      <td>${item.group}</td>
      <td>${item.hope_salary}</td>
      <td>${item.salary}</td>
      <td>${item.province + item.city + item.area}</td>
      <td>
        <a href="javascript:;" class="text-success mr-3" ><i class="bi bi-pen" data-id ="${item.id}"></i></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id ="${item.id}" ></i></a>
      </td>
      </tr> 
      `
    }).join('')
 } 
 getStudentList()



  // 1发送 ajax 获取数据
  window.onload( async() =>{
    getStudentList()
  })


  let id = ''
 // 2.1给模态框注册点击事件
 document.querySelector('#openModal').addEventListener('click' ,()=>{
    // 1显示模态框    显示:show()   隐藏: hide()
       id= ''
   new bootstrap.Modal(document.querySelector('#modal')).show()
   // 加载数据
   getProvince()
 })
     


// 省市县三级联动 :  省市县必须要依次选择
 // 利用变量接收属性名 
  const ps = document.querySelector('[name="province"]')
  const cs = document.querySelector('[name="city"]')
  const as = document.querySelector('[name="area"]')
  // 1加载省
 const getProvince =  async ()  => {
   const {data} = await axios.get('/api/province')
   console.log(data);
   // 元素名.innnerHTML = 数组.map(item => ``).join('') 
   // 因为省份需要在各地区前面 所以利用`<option>--省份--</option>` + 这个结构即可
    ps.innerHTML =`<option value = "">--省份--</option>` + data.data.map(item => `<option value = "${item}">${item}</option>`).join('')

   
   
  // 2加载市 :用户点击省下来菜单 触发
  // 这里需要用到change 事件当点击一样的省不用再次触发
  ps.addEventListener('change',async() =>{
     // 选择省 清空县
    as.innerHTML = `<option value = "">--县--</option>`
    // 获取城市数据
      const {data} = await axios.get('/api/city',{params:{pname:ps.value}})
      // 一个参数时用这个语法地址上面是模板字符串
     // const {data} = await axios.get(`/api/city?pname=${ps.vlue}`)
      console.log(data);
      cs.innerHTML =`<option value = "">--城市--</option>` + data.data.map(item => `<option value = "${item}">${item}</option>`).join('')
     cs.addEventListener('change',async() => {
         const {data} = await axios.get('/api/area',{params:{pname:ps.value,cname:cs.value}})
          console.log(data);
          as.innerHTML = `<option value = "">--县--</option>` + data.data.map(item => `<option value = "${item}">${item}</option>`).join('')
     })
  })
 } 

  
 // 2.1 给模态框里面的取消注册点击事件
 document.querySelector('.btn-secondary').addEventListener('click',()=>{
    // 清空表单 (模拟框点取消按钮,清空表单内容)
    document.querySelector('#modal form').reset()
 })

 // 2.3 点击模态框确认
     //1收集表单数据
     /*FormData对象有两种工作模式
      手动挡 : 创建空的fd对象 ,手动调用 append 添加
    (1) const fd = new FormData()
    (2)  fd.append('参数名',参数值)
    自动挡: 使用 form表单来创建formdata,自动收集表单中的  name 和value放入fd中
      副作用: fd 会自动修改 content-type 为multipart/form-data
      如果接口本身 content-type 是application/json 需要把 fd 转成 obj 对象
     */


  document.querySelector('#submit').addEventListener('click',async function(){
      // 2.3获取表单内收集所有数据 用formDate
      const fd =  new FormData(document.querySelector('#modal form'))
      console.log(fd);
      let obj = {}
      // 打印 :需要用fd 实例对象的forEach方法
      /*
       fd.forEach((value, key) => {
                console.log(value, key);
            })
        })
      */ 
      fd.forEach((item,index) => {
         obj[index] = item
      })
      // 接口文档中有几个数据要求是number 类型 , age gender hope_salary salary group
      // 2.4 发送ajax请求
      obj.age = +obj.age
      obj.gender = +obj.gender
      obj.hope_salary = +obj.hope_salary
      obj.salary = +obj.salary
      obj.group = +obj.group

      // 校验:非空
      /*
      arr.some() : 判断数组中是否有元素满足条件 ( 逻辑或:一真则真,全假为假,非空)
       arr.every() : 判断数组中是否有元素都满足条件 (逻辑与: 一假则假,全真为真,全选)
      
      */ 

       if(id) {
        const {data} = await axios.patch(`/students/${id}`,obj)
      console.log(data);
      Toast.success('新增成功')
       } else {
          const {data} = await axios.post('/students',obj)
          console.log(data);
          Toast.success('新增成功')
       }





      // 发送 ajax数据
     // const {data} = await axios.post('/students',obj)
     // console.log(data);
     // Toast.success('新增成功')
      // 上方以及写过点击取消注册点击事件 直接利用
      // 处理结果:  弹窗消失 +刷新列表
      document.querySelector('.btn-secondary').click()
      getStudentList()
              
  })

  // 3点击编辑 数据回显 ,利用事件委托,给父元素添加点击,判断子元素
   document.querySelector('tbody').addEventListener('click', async(e) => {
    if(e.target.classList.contains('bi-pen')){
          id = e.target.dataset.id
        const { data } = await axios.get(`/students/${id}`)
        new bootstrap.Modal(document.querySelector('#modal')).show()
       

        document.querySelector('[name="name"]').value = data.data.name
        document.querySelector('[name="age"]').value = data.data.age
        document.querySelector('[name="group"]').value = data.data.group
        document.querySelector('[name="hope_salary"]').value = data.data.hope_salary
        document.querySelector('[name="salary"]').value = data.data.salary
      
        document.querySelectorAll('[name="gender"]')[data.data.gender].checked = true

        // 获取用户当前的省市县
        const {data:pData} = await axios.get('/api/province')
        const {data:cData} = await axios.get('/api/city',{params:{pname:data.data.province}})
        const {data:aData} = await axios.get('/api/area',{params:{pname:data.data.province,cname:data.data.city}})

        // 渲染省市县数组
        ps.innerHTML =`<option value = "">--省份--</option>` + pData.data.map(item => `<option value = "${item}">${item}</option>`).join('')
        cs.innerHTML =`<option value = "">--城市--</option>` + cData.data.map(item => `<option value = "${item}">${item}</option>`).join('')
        as.innerHTML = `<option value = "">--县--</option>` + aData.data.map(item => `<option value = "${item}">${item}</option>`).join('')


        // 设置当前的省市县(如不过走这一步,省市县全部显示默认,不会显示用户添加的省市县)
       
       await getProvince()
        ps.value = data.data.province
        cs.value = data.data.city
        as.value = data.data.area
    }else if(e.target.classList.contains('bi-trash')) {
        await axios.delete(`/students/${e.target.dataset.id}`)
      
        Toast.success('删除成功')
    }
   })

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值