# quick-echarts

**Repository Path**: acie/quick-echarts

## Basic Information

- **Project Name**: quick-echarts
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-20
- **Last Updated**: 2022-07-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# quick-echarts 使用手册

## bg.vue

第1列

![](image/image_FUw5dF__Mo.png)

第2列

```html
<template>
  <div class="biggest-container">
    <div class="left">
      <img src="@/assets/图表_bg.png" alt="">
      <slot name="first"></slot>
      <slot name="second"></slot>
      <slot name="third"></slot>
      <slot name="forth"></slot>
    </div>
    <div class="left right">
      <img src="@/assets/图表_bg.png" alt="">
      <slot name="first2"></slot>
      <slot name="second2"></slot>
      <slot name="third2"></slot>
      <slot name="forth2"></slot>
    </div>
  </div>
</template>
```

## chartBg.vue

在`bg.vue`里的每一份插槽（橙色块），都是一个组件`chartBg.vue`。

第1列

![](image/image_t1jjMny3B_.png)

第2列

```html
<template #first>
  <chart-bg name="今日在园人数">
    <!-- 给chart-bg组件传具体的图表 -->
    <template #main>
      <first-left pos="overview-first-left"></first-left>
    </template>
  </chart-bg>
</template>
```

## firstLeft.vue

第1列

在`chartBg.vue`里插槽处（红色块），也都是一个组件`firstLeft.vue`，名称会随位置有所不同。

在这个组件里，放了一个共用组件`commonEchart.vue`。

```html
<template>
  <common-echart :pos="pos" @getMychart="getMychart" width="320" height="125"></common-echart>
</template>
```

在`firstLeft.vue`中，设置`getMychart, width, height`（其中`getMychart`用于获取在`commonEchart.vue`产生的echart实例，便于进一步交互处理），传给`commonEchart.vue`。

该组件主要用于获取data，并把data传给`option`，在子组件返回的echart实例里，把option设置给实例。

第2列

![](image/image_aZ3Sqnp-TT.png)

## commonEchart.vue

在这里主要保留了重复的逻辑代码。用于生成一个echart实例，并挂载到相应位置。该组件会返回生成的echart实例。

## 总结

第1列

![](image/image_cnfkQq52kI.png)

### 如何快速开发？

主要是修改每个页面，修改每个图表的名字，把位置和图表对应好。

第2列

```html
<bg>
  <template #second>
    <chart-bg name="停车场情况">
      <!-- 给chart-bg组件传具体的图表 -->
      <template #main>
        <second-left pos="overview-second-left"></second-left>
      </template>
    </chart-bg>
  </template>
</bg>
```

bg.vue，chartBg.vue，commonEchart.vue这几个基本不用变。（在确定好总体样式的前提下）

变得是路由页面`overview.vue`和每一个位置上的图表`firstLeft.vue`。