# vite-vue3-charts

**Repository Path**: jacket_zhong/vite-vue3-charts

## Basic Information

- **Project Name**: vite-vue3-charts
- **Description**: vite5+vue3+ts+datav-vue3+echarts 大屏展示
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://weizwz.com/vite-vue3-charts/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-07-20
- **Last Updated**: 2024-07-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# weiz-vue3-charts

## 简介

vite5 + vue3 + ts + datav-vue3 + echarts + 百度地图 大屏展示

预览地址 https://weizwz.com/vite-vue3-charts/

![image](src/assets/20231228_194914.png)

**本项目数据重属虚构，请勿商用**

## 运行

安装依赖
```shell
npm i
```

运行
```shell
npm run dev
```

打包
```shell
npm run build
```

## 地图
由于对百度地图api加了白名单，请自行替换为你的api地址。修改根目录下的 `index.html`：
```html
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>
```
百度地图API设置白名单后，本地仍可调用方法：
1. 假设百度白名单为 `*haha.com*`
2. 本地修改hosts文件：
  - windows文件位置 `C:\Windows\System32\drivers\etc`；
  - mac 下使用 `sudo vi /etc/hosts` 编辑，输入 i 进入编辑模式，修改完，按 `ESC` 后输入:号，然后输入 wq 回车保存。
  ```txt
  127.0.0.1         haha.com
  ```
3. 本地访问地址，使用 `haha.com:8000`，即可正常访问百度地图API

## 文档
### 1. vite+vue3 配合 echarts 使用文档
[vue3+ts打开echarts的正确方式](https://weizwz.com/posts/a31b36c6.html)