vite搭建vue3(echarts)

一. 安装

// 初始化vite项目
npm init vite-app myvite
// 进入项目文件夹
cd myvite
// 安装依赖
npm install
//启动项目
npm run dev

yarn create vite

输入项目名称
选择vue
选择TypeScript

cd 项目名称
yarn
yarn dev

二. 配置文件

**main.js**
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import axios from "axios";
import ElementPlus from 'element-plus'
import * as echarts from 'echarts'
import 'element-plus/dist/index.css'
import router from './router/index'

const app = createApp(App);
app.use(ElementPlus)
app.use(router)
app.config.globalProperties.$axios = axios;
app.config.globalProperties.$echarts = echarts;
app.mount('#app');

**vite.config.js**
const path = require('path')
export default function () {
    return {
        // 代理，最重要，其他的都可以有默认配置
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
            }
        },
        // 项目启动的根路径
       // root:  'G:\\work\\myself\\studyNode\\nodeMysql\\client',
        // 入口
        entry: 'index.html',
        // 出口
        outDir: './../public',
        // 打包后的跟路径
        base:'/',
        // 输出的静态资源的文件夹名称
        assetsDir:'assets',
        // 是否开启ssr服务断渲染
        ssr: false,
        // 重命名路径  path.resolve(__dirname, './src')
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
        },
        // alias : {
        //     '/@/':  path.resolve(__dirname, './src')
        // },
        // 端口
        port: 3002,
        // 是否自动开启浏览器
        open: false,
        // 开启控制台输出日志
        silent: false,
        // 哪个第三方的包需要重新编译
        optimizeDeps:[],

    }
}

**路由**
import { createRouter, createWebHashHistory } from "vue-router";
const Login = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../view/login.vue')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../view/index.vue')
const Trajectory = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/trajectory.vue')
const RealtimePoint = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/RealtimePoint.vue')
const routes = [
  {
    path: '/',
    component: Login
  },
  {
    path: '/index',
    name:'Index',
    redirect:'/realtimepoint',
    component:Index,
    children:[
      {
        path: '/trajectory',
        component:Trajectory
      },
      {
        path:'/realtimepoint',
        component:RealtimePoint
      }
    ]
  }
]

const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

export default router;

三. 安装工具

1. 镜像：npm config set registry https://registry.npm.taobao.org
2. element-plus npm install element-plus --save
3. scss npm i -D sass
4. echarts npm install echarts --save
5. router npm install vue-router@4
6. axios npm install axios@0.21 --save （高版本报错）

四. 引入echarts地图
(1). json文件引入，geo 地图json

组件：
import dalian from "../../public/map/json/city/dalian.json";
import { echarts2 } from "../assets/js/api.js";
echarts2(_this, dalian,_this.geodata);
js：
export function echarts2(_this, dalian, geodata) {
	_this.$echarts.registerMap("dalian", { geoJSON: dalian });
    let myChart = _this.$echarts.init(document.getElementById('echart2'));
    var option = {
        title: {
            text: '',
            subtext: '',
            sublink: '',
            left: 'left',
            textStyle: {
                fontSize: '16px'
            },
        },
        tooltip: {
            trigger: 'item',
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: [''],
            textStyle: {
                color: '#fff',
            },
        },
        geo: {
            map: 'dalian',
            label: {
                emphasis: {
                    show: false,
                },
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#6495ED',
                    borderColor: '#00f',
                },
                emphasis: {
                    areaColor: '#4682B4',
                },
            },
        },
        series: [
            {.......},
        ]
    };
    myChart.setOption(option);
    myChart.on('click', 'series', function (params) {
        console.log(params.data.name)
    });
}

(2). 百度地图引入

index.html 引入百度地图 ：<script src="http://api.map.baidu.com/api?v=3.0&ak=自己AK"></script>
配置引入bmap(echarts依赖里)【不会引，只能重命名】：alias: { 'bmap': 'echarts/extension/bmap/bmap' }
组件引入bmap： import 'bmap'

组件：
import 'bmap'
import { echarts3 } from "../assets/js/api.js";
echarts3(_this, _this.ids,_this.date);
js：
export function echarts3(_this,ids,date) {
    let myChart = _this.$echarts.init(document.getElementById('echart2'));
    window.onresize=(()=>{
        myChart.resize();
    });
    let geodataa=[];
    _this.$axios
    .get("/ship/xxxxx", {
      params: {
        ids: ids,
        date: date,
      },
    })
    .then((res) => {
      res.data.forEach((ele) => {
        geodataa.push({
          name: ele.a,
          value: [ele.b, ele.c],
        });
      });
      myChart.setOption(option,true)
    });
    var option = {
        title: {
            text: '',
            subtext: '',
            sublink: '',
            left: 'left',
            textStyle: {
                color: '#fff',
                fontSize: '16px'
            },
        },
        tooltip: {
            trigger: 'item',
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: [''],
            textStyle: {
                color: '#fff',
            },
        },
        bmap: {
            center: [121.608307, 38.9328766],
            zoom: 14,
            roam: true,
            mapStyle: {
                styleJson: [
                    {
                        'featureType': 'land',     //调整土地颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#081734'
                        }
                    },
                    {
                        'featureType': 'building',   //调整建筑物颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#04406F'
                        }
                    },
                    {
                        'featureType': 'building',   //调整建筑物标签是否可视
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'highway',     //调整高速道路颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#015B99'
                        }
                    },
                    {
                        'featureType': 'highway',    //调整高速名字是否可视
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'arterial',   //调整一些干道颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#003051'
                        }
                    },
                    {
                        'featureType': 'arterial',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'green',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'water',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#044161'
                        }
                    },
                    {
                        'featureType': 'subway',    //调整地铁颜色
                        'elementType': 'geometry.stroke',
                        'stylers': {
                            'color': '#003051'
                        }
                    },
                    {
                        'featureType': 'subway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'all',     //调整所有的标签的边缘颜色
                        'elementType': 'labels.text.stroke',
                        'stylers': {
                            'color': '#313131'
                        }
                    },
                    {
                        'featureType': 'all',     //调整所有标签的填充颜色
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#FFFFFF'
                        }
                    },
                    {
                        'featureType': 'manmade',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'manmade',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'local',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'local',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'subway',
                        'elementType': 'geometry',
                        'stylers': {
                            'lightness': -65
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'all',
                        'stylers': {
                            'lightness': -40
                        }
                    },
                    {
                        'featureType': 'boundary',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#8b8787',
                            'weight': '1',
                            'lightness': -29
                        }
                    }]
            }
        },
        series: [
            {.....},
        ]
    }
    myChart.setOption(option);
    var bmap = myChart.getModel().getComponent('bmap').getBMap();
    bmap.addControl(new BMap.MapTypeControl());
}