# echarts项目2

**Repository Path**: jetwu/echarts2

## Basic Information

- **Project Name**: echarts项目2
- **Description**: 数据可视化-前台项目，实现了更改主题，图表开发、多级数据联动，热点地图，自动轮播，全屏切换，屏幕适配，手机适配
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-06-05
- **Last Updated**: 2025-06-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 电商平台实时监控系统

### 预览地址: 1.[点击预览](https://xxxxxxd.gitee.io/) 2.[更多](http://xxxxxxd.gitee.io/show/)

### 前端地址: [点击前往](https://xxxxxxd.gitee.io)

### 后台地址: [点击前往](https://gitee.com/xxxxxxd/server)

### 一、如何运行该项目？

```
// 首先你应当克隆该项目
git clone https://gitee.com/xxxxxxd/demo.git

// 进入该项目
cd vuedemo

// 安装对应依赖
npm install 

// 访问线上后台系统
npm run dev
```

### 二、运行效果截图

#### 2.1 黑色主题

![输入图片说明](https://images.gitee.com/uploads/images/2021/0310/031341_2c3dabd9_8314627.png "dark.png")

#### 2.2 亮色主题

![输入图片说明](https://images.gitee.com/uploads/images/2021/0310/031402_bac87602_8314627.png "light.png")

#### 2.3 热销商品占比

![输入图片说明](https://images.gitee.com/uploads/images/2021/0310/031425_39618072_8314627.png "hot.png")

#### 2.4 商家分布

![输入图片说明](https://images.gitee.com/uploads/images/2021/0310/031438_09efc394_8314627.png "map.png")

#### 2.5 地区销售排行

![输入图片说明](https://images.gitee.com/uploads/images/2021/0310/031457_fe4277ba_8314627.png "rank.png")

#### 2.6 商家销售统计

![输入图片说明](https://images.gitee.com/uploads/images/2021/0310/031512_97b020ab_8314627.png "seller.png")

#### 2.7 库存和销量分析

![输入图片说明](https://images.gitee.com/uploads/images/2021/0310/031527_230866bb_8314627.png "stock.png")

#### 2.8 地区销量趋势

![输入图片说明](https://images.gitee.com/uploads/images/2021/0310/031541_c0d5ea81_8314627.png "trend.png")

### 三、项目打包上线，报错问题

#### 3.1 项目打包运行在本地服务器正常，在gitee打开空白页面

`解决方案：将mode: "history"改为mode: "hash"，或直接注释`

#### 3.2 项目打包运行在本地服务器正常，在gitee显示自定义主题js文件报错
![输入图片说明](https://images.gitee.com/uploads/images/2021/0311/144501_4f6f0c7b_8314627.png "echarts.png")
```
(注：在index.html引入失效，main.js引入失效)
解决方案：
在main.js里引入echarts主题的js，一般在node_modules---echarts---theme---dark.js，
theme里边有各种各样的主题，任意选一种，这里我选的是dark,
在main.js里引入：import  'echarts/theme/dark.js'
```

#### 3.3 项目打包运行在本地服务器正常，在gitee图片路径加载异常

`解决方案：修改视口文件获取主题路径方法，直接在自定义主题theme.js配置路径即可`

![输入图片说明](https://images.gitee.com/uploads/images/2021/0310/033027_3a02378c_8314627.png "img.png")

### 四、地图模块异常与优化

#### 4.1 项目打包运行在本地服务器正常，在gitee地图模块加载异常

```
解决方案：

直接引入china.json文件
import chinaJson from '@/assets/json/china.json'

在data中存入数据
chinaJson: chinaJson,

注册地图数据
this.$echarts.registerMap("china", this.chinaJson);
```
#### 4.2 地图模块文字位置

```
解决方案：

直接引入https://gitee.com/xxxxxxd/demo中china.json文件(已经更改省份坐标)
或参考https://segmentfault.com/a/1190000022459670?utm_source=tuicool&utm_medium=referral
```

##### 4.2.1优化前

![输入图片说明](https://images.gitee.com/uploads/images/2021/0310/033619_c1420d1b_8314627.png "img1.png")

##### 4.2.2优化后

![输入图片说明](https://images.gitee.com/uploads/images/2021/0310/033631_55054467_8314627.png "img2.png")

### 五、联系我

`个人微信`

 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0607/153403_9bce0756_8314627.jpeg "my.jpg")