Vue3项目构建

1、项目创建

npx vue create project-v3

2、依赖安装

cnpm i element-plus axios@1.6.0 less@3.13.1 less_loader@7.3.0 vue-router@4 font-awesome echarts@4.9.0 -S

3、vue.config.js 配置

module.exports  = {
  devServer: {
    open: true 
  }
}

4、router配置

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'

const routes = [
    {
        path: '/',
        hidden: true,

        component: () => import('@/components/Home')
    },
    {
        path: '/login',
        name: '登录',
        hidden: true,
        component: () => import('@/components/Login')
    },
    {
        path: '*',
        name: 'NotFound',
        hidden: true,
        component: () => import('@/components/NotFound')
    },
    {
        path: '/home',
        name: '学生管理',
        iconClass: 'fa fa-users',
        redirect: '/home/student',
        component: () => import('@/components/Home'),
        children: [
            {
                path: '/home/student',
                name: '学生列表',
                iconClass: 'fa fa-list',
                component: () => import('@/components/students/StudentList')
            },
            {
                path: '/home/info',
                name: '信息列表',
                iconClass: 'fa fa-list-alt',
                component: () => import('@/components/students/InfoList')
            },
            {
                path: '/home/infos',
                name: '信息管理',
                iconClass: 'fa fa-list-alt',
                component: () => import('@/components/students/InfoLists')
            },
            {
                path: '/home/work',
                name: '作业列表',
                iconClass: 'fa fa-list-ul',
                component: () => import('@/components/students/WorkList')
            },
            {
                path: '/home/works',
                name: '作业管理',
                iconClass: 'fa fa-th-list',
                component: () => import('@/components/students/WorkMent')
            }
        ]
    },
    {
        path: '/home',
        name: '数据分析',
        iconClass: 'fa fa-bar-chart',
        component: () => import('@/components/Home'),
        children: [
            {
                path: '/home/dataview',
                name: '数据概览',
                iconClass: 'fa fa-line-chart',
                component: () => import('@/components/dataAnalysis/DataView')
            },
            {
                path: '/home/mapview',
                name: '地图概览',
                iconClass: 'fa fa-line-chart',
                component: () => import('@/components/dataAnalysis/MapView')
            },
            {
                path: '/home/travel',
                name: '旅游地图',
                iconClass: 'fa fa-line-chart',
                component: () => import('@/components/dataAnalysis/TravelMap')
            },
            {
                path: '/home/score',
                name: '分数地图',
                iconClass: 'fa fa-line-chart',
                component: () => import('@/components/dataAnalysis/ScoreMap')
            }
        ]
    },
    {
        path: '/users',
        name: '用户中心',
        iconClass: 'fa fa-user',
        component: () => import('@/components/Home'),
        children: [
            {
                path: '/users/user',
                name: '权限管理',
                iconClass: 'fa fa-user',
                component: () => import('@/components/users/User')
            }
        ]
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

5、main.js挂载  axios, element-ui

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import locale from 'element-plus/es/locale/lang/zh-cn'
import axios from 'axios'
import router from './router'
import service from './service'
import echarts from 'echarts'


const app = createApp(App)
app.config.globalProperties.$https= axios
app.config.globalProperties.$service= service
app.config.globalProperties.$echarts= echarts

app.use(ElementPlus,{locale}).use(router).mount('#app')

6、app.vue

<template>
<router-view></router-view>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
@import url('./assets/css/reset.css');
html,body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

7、Menu.vue组件

<script setup>
import {useRouter} from 'vue-router'
const router = useRouter()
const menu =router.options.routes
const activePath = router.currentRoute.value.path
</script>

8、Map.vue组件

<script>
import geoJson from '@/assets/data.json'
import map  from '@/utils/map.js'
import echarts from 'echarts'
import { onMounted } from 'vue'
export default {
  setup(){
    onMounted (()=> {
      let myChart = echarts.init(document.getElementById('main'))
      echarts.registerMap('china',geoJson)
      let option = map
      myChart.setOption(option)
    })

  }
}
</script>

9、DataView.vue组件

<script setup>
import echarts from 'echarts'
import {dataview} from '@/api/api'
let draw= (legend,xAxis,series) => {
      let myChart1 = this.$echarts.init(document.getElementById("main2"))
      let option = {
        titile: {
          text: '会话量'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legend
        },
        xAxis: {
          type: 'category',
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: series
      }
      myChart1.setOption(option)
    }
    dataview().then(res =>{
      if (res.data.status === 200) {
        let {legend,xAxis,series} = res.data.data
        draw(legend,xAxis,series)
      }

    }).catch(err => {
      throw err
    })


</script>

TravelMap.vue

<script>
import geoJson from '@/assets/data.json'
import { travel } from "@/api/api"
import map from '@/utils/map.js'
import echarts from '@/echarts'
import { onMounted } from 'vue'
export default {
  setup() {
    const drawMap = () => {
      let myChart = echarts.init(document.getElementById('main'))
      echarts.registerMap('china', geoJson)
      //散点配置
      let pointsObj = {
        type: 'effectScatter', //散点图
        coordinateSystem: 'geo',
        showEffectOn: 'render',
        SymbolSize: 10,//散点大小
        zlevel: 1,
        data: [
          { value: [118.8062, 31.9208], itemStyle: { color: '#4ab2e5' } },
          { value: [110.8062, 31.9208], itemStyle: { color: '#1af456' } },
          { value: [120.8062, 30.9208], itemStyle: { color: '#1af456' } },
          { value: [115.8062, 31.9208], itemStyle: { color: '#1af456' } },
          { value: [125.8062, 46.9208], itemStyle: { color: '#1af456' } },
          { value: [125.8062, 43.9208], itemStyle: { color: '#1af456' } },
          { value: [120.8062, 39.9208], itemStyle: { color: '#1af456' } }
        ],
        rippleEffect: {
          //涟漪特效配置
          period: 15,
          scale: 4,
          brushType: 'fill'
        }
      }
      let linesObj = {
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4,
          symbolSize: 7,
          symbol: 'arrow',
          trailLength: 0.4
        },
        lineStype: {
          normal: {
            color: '#1DE9B6',
            width: 1,
            apacity: 0.1,
            curveness: 0.9
          }
        },
        data: [
          { coords: [[118.8062, 31.9208], [115.8062, 31.9208]], lineStype: { color: '#4ab2e5' } },
          { coords: [[110.8062, 31.9208], [115.8062, 31.9208]], lineStype: { color: '#4ab2e5' } },
          { coords: [[120.8062, 30.9208], [115.8062, 31.9208]], lineStype: { color: '#4ab2e5' } },
          { coords: [[125.8062, 46.9208], [115.8062, 31.9208]], lineStype: { color: '#4ab2e5' } },
          { coords: [[125.8062, 43.9208], [115.8062, 31.9208]], lineStype: { color: '#4ab2e5' } },
          { coords: [[120.8062, 39.9208], [115.8062, 31.9208]], lineStype: { color: '#4ab2e5' } }
        ]
      }
      map.series[1] = pointsObj
      map.series[2] = linesObj
      let opstion = map
      myChart.setOption(option)
    }
    onMounted(travel().then((res) => {
      if (res.data.status === 200) {
        let { points, linesData } = res.data.data
        drawMap(points, linesData)
      }
    }))
  }
}
</script>