179 lines
4.9 KiB
Markdown
179 lines
4.9 KiB
Markdown
# cxc-szcx-lineChart
|
||
# # `line-chart.vue` 组件说明书
|
||
|
||
## 一、组件概述
|
||
`line-chart.vue` 是一个基于 ECharts 实现的折线图组件，用于在 UniApp 项目中展示数据的折线图。该组件接收一系列数据和配置参数，支持动态更新数据，并展示参考线。
|
||
|
||
## 二、组件依赖
|
||
- **Vue 3**：使用 Vue 3 的组合式 API 进行开发。
|
||
- **ECharts**：用于绘制折线图。
|
||
- **`lime-echart`**：UniApp 插件，提供 ECharts 的渲染支持。
|
||
|
||
## 三、组件使用方法
|
||
|
||
### 1. 引入组件
|
||
在需要使用该组件的页面中引入 `line-chart.vue` 组件。
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<line-chart
|
||
:dataList="dataList"
|
||
:xField="xField"
|
||
:yField="yField"
|
||
:legendField="legendField"
|
||
:referenceValue="referenceValue"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import LineChart from '@/components/line-chart.vue';
|
||
|
||
const dataList = [
|
||
{ date: '2023-01-01', value: 10, category: 'A' },
|
||
// 更多数据...
|
||
];
|
||
const xField = 'date';
|
||
const yField = 'value';
|
||
const legendField = 'category';
|
||
const referenceValue = 15;
|
||
</script>
|
||
```
|
||
|
||
### 2. 组件属性
|
||
|
||
| 属性名 | 类型 | 默认值 | 描述 |
|
||
| ---- | ---- | ---- | ---- |
|
||
| `dataList` | `Object` | `[]` | 包含图表数据的数组，每个元素是一个对象，包含 `xField`、`yField` 和 `legendField` 对应的数据。 |
|
||
| `xField` | `String` | `''` | 数据中用于表示 x 轴的字段名。 |
|
||
| `yField` | `String` | `''` | 数据中用于表示 y 轴的字段名。 |
|
||
| `legendField` | `String` | `''` | 数据中用于表示图例的字段名。 |
|
||
| `referenceValue` | `Number` | `10` | 图表中参考线的数值。 |
|
||
|
||
## 四、组件内部实现
|
||
|
||
### 1. 模板部分
|
||
```vue
|
||
<template>
|
||
<view class="chart-container">
|
||
<l-echart ref="chart" @init="initChart"></l-echart>
|
||
</view>
|
||
</template>
|
||
```
|
||
- 使用 `l-echart` 组件渲染图表，通过 `ref` 绑定到 `chart`，并在初始化完成时调用 `initChart` 方法。
|
||
|
||
### 2. 脚本部分
|
||
|
||
#### 2.1 引入必要的模块
|
||
```javascript
|
||
import { ref, watch } from 'vue';
|
||
```
|
||
引入 Vue 3 的 `ref` 和 `watch` 函数。
|
||
|
||
#### 2.2 定义组件属性
|
||
```javascript
|
||
const props = defineProps({
|
||
dataList: {
|
||
type: Object,
|
||
default: () => []
|
||
},
|
||
// 其他属性...
|
||
});
|
||
```
|
||
定义组件接收的属性。
|
||
|
||
#### 2.3 初始化图表
|
||
```javascript
|
||
const chart = ref(null);
|
||
let echarts = null;
|
||
|
||
const initChart = async (canvas) => {
|
||
await initEcharts(canvas);
|
||
updateChart();
|
||
};
|
||
|
||
const initEcharts = async (canvas) => {
|
||
echarts = await import('echarts');
|
||
const { init } = await import('@/uni_modules/lime-echart/static/echarts.min');
|
||
echarts = init(canvas, echarts);
|
||
};
|
||
```
|
||
- `chart` 用于引用 `l-echart` 组件。
|
||
- `initChart` 方法在图表初始化时调用，先初始化 ECharts 实例，再更新图表。
|
||
- `initEcharts` 方法异步加载 ECharts 并初始化实例。
|
||
|
||
#### 2.4 处理数据
|
||
```javascript
|
||
const processData = () => {
|
||
const legendData = [...new Set(props.dataList.map((item) => item[props.legendField]))];
|
||
|
||
return legendData.map((legendItem) => {
|
||
const seriesData = props.dataList
|
||
.filter((item) => item[props.legendField] === legendItem)
|
||
.sort((a, b) => new Date(a[props.xField]) - new Date(b[props.xField]))
|
||
.map((item) => ({
|
||
name: item[props.xField],
|
||
value: [item[props.xField], item[props.yField]]
|
||
}));
|
||
|
||
return {
|
||
name: legendItem,
|
||
type: 'line',
|
||
showSymbol: true,
|
||
data: seriesData
|
||
};
|
||
});
|
||
};
|
||
```
|
||
处理传入的数据，根据 `legendField` 分组，对每组数据按 `xField` 排序，并转换为 ECharts 所需的格式。
|
||
|
||
#### 2.5 获取图表配置
|
||
```javascript
|
||
const getOption = () => ({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: (params) => {
|
||
return `${params[0].axisValue}<br/>` + params.map((item) => `${item.marker} ${item.seriesName}: ${item.value[1]}`).join('<br/>');
|
||
}
|
||
},
|
||
// 其他配置...
|
||
});
|
||
```
|
||
返回 ECharts 的配置对象，包括 tooltip、x 轴、y 轴、系列数据、图例和网格等配置。
|
||
|
||
#### 2.6 更新图表
|
||
```javascript
|
||
const updateChart = () => {
|
||
if (!chart.value) return;
|
||
|
||
const option = getOption();
|
||
chart.value.setOption(option);
|
||
};
|
||
```
|
||
如果 `chart` 实例存在，获取最新的图表配置并更新图表。
|
||
|
||
#### 2.7 监听数据变化
|
||
```javascript
|
||
watch(
|
||
() => props.dataList,
|
||
() => {
|
||
updateChart();
|
||
},
|
||
{ deep: true }
|
||
);
|
||
```
|
||
当 `props.dataList` 发生变化时，调用 `updateChart` 方法更新图表。
|
||
|
||
### 3. 样式部分
|
||
```css
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 30vh;
|
||
}
|
||
```
|
||
设置图表容器的宽度为 100%，高度为 30vh。
|
||
|
||
## 五、注意事项
|
||
- 确保项目中已经正确安装并配置了 `lime-echart` 插件。
|
||
- 传入的 `dataList` 数据格式要符合要求，包含 `xField`、`yField` 和 `legendField` 对应的数据。
|
||
- 由于使用了异步加载 ECharts，可能会有一定的延迟，需要确保在合适的时机初始化图表。 |