create-base-teek-theme/dist/template/docs/articles/使用指南/05.Form表单组件/20.ECharts.md

### npm ``` npm create base-teek-theme@latest my-first-blog ```

---
date: 2025-04-03 18:55:11
title: ECharts
permalink: /pages/b25bff
tags:
  - vue组件
author:
  name: 华总
  link: https://xiaoying.org.cn
categories:
  - 使用指南
  - Form 表单组件

---







## 说明

ECharts封装，不需要再单独引入Echarts，只需给定配置即可，使用请参考[官方文档](https://echarts.apache.org/handbook/zh/how-to/chart-types/bar/basic-bar)

##  基本配置项

### tooltip

配置提示框组件，显示提示信息。

```js
tooltip: {
  trigger: 'item',  // 数据项图形触发
  formatter: '{a} <br/>{b}: {c} ({d}%)'  // 格式化显示内容
}
```

### legend

配置图例组件，展示系列名称，提供点击筛选的功能。

```js
legend: {
  orient: 'horizontal',  // 水平排列
  left: 'center',  // 居中显示
  data: ['系列1', '系列2', '系列3']  // 图例项
}
```

### `xAxis` / `yAxis` (Array | Object)

配置 x 轴或 y 轴的属性。

```js
xAxis: {
  type: 'category',  // 类目轴
  data: ['A', 'B', 'C', 'D']  // 类目数据
}
```

### `series` (Array)

配置图表的具体数据系列和类型。

```js
series: [
  {
    name: '系列1',
    type: 'bar',  // 设置为条形图
    data: [120, 200, 150, 80]  // 数据项
  }
]
```

### `grid` (Object)

配置图表的网格区域，控制图表的位置和大小。

```js
grid: {
  left: '10%',  // 距离左侧的距离
  right: '10%',  // 距离右侧的距离
  bottom: '10%'  // 距离底部的距离
}
```

### `color` (Array)

配置图表的配色方案，支持多种颜色。

```js
color: ['#5470C6', '#91CC75', '#EE6666']
```

### `title` (Object)

配置标题组件，控制图表的主标题和副标题。

```js
title: {
  text: 'ECharts 示例',  // 主标题
  subtext: '副标题',  // 副标题
  left: 'center'  // 标题居中
}
```

### `toolbox` (Object)

配置工具栏，可以包括保存、数据视图等功能。

```js
toolbox: {
  show: true,  // 显示工具栏
  feature: {
    saveAsImage: {  // 保存为图片
      show: true
    }
  }
}
```

### `animation` (Boolean)

控制是否开启动画效果。

```js
animation: true  // 开启动画
```

### `backgroundColor` (String)

设置图表背景色。

```js
backgroundColor: '#f4f4f4'  // 设置浅灰色背景
```

### `responsive` (Boolean)

控制图表是否响应窗口大小变化。

```js
responsive: true  // 自动响应窗口大小变化
```

### `polar` (Object)

配置极坐标系相关的设置。

```js
polar: {
  radius: '60%'  // 设置极坐标半径
}
```

这些参数是构建 ECharts 配置项时的常见元素。不同的图表类型（如柱状图、折线图、饼图等）可能会有更具体的配置选项，具体可以参考[配置项](https://echarts.apache.org/zh/option.html#title)。

## 使用示例

```vue

<template>
  <div>
    <ECharts :options= "option" height="400px" width="600px"></ECharts>
  </div>
</template>


<script setup lang="ts">
import ECharts from "liyao-vue-common"

  //自行修改...
const option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
}
</script>
```