ApiServer-Web-admin_dashboard_pc/components.md

组件文档

图表组件

BaseEChart

基础图表组件，作为其他图表组件的基础组件。

属性

参数	说明	类型	默认值
options	ECharts 配置项	Object	-
width	图表宽度	String	'100%'
height	图表高度	String	'350px'
theme	图表主题	String	''

方法

方法名	说明	参数
getChart	获取 ECharts 实例	-
resize	重置图表大小	-

LineChart

折线图组件

属性

参数	说明	类型	默认值
data	数据数组	Array	-
xAxis	X轴数据	Array	-
smooth	是否平滑曲线	Boolean	true
area	是否显示面积	Boolean	false
series	系列配置	Array	[]
title	图表标题	String	''

使用示例

<line-chart
  :data="[150, 230, 224, 218, 135, 147, 260]"
  :xAxis="['周一', '周二', '周三', '周四', '周五', '周六', '周日']"
  :smooth="true"
  :area="true"
  title="销售趋势"
/>

BarChart

柱状图组件

属性

参数	说明	类型	默认值
data	数据数组	Array	-
xAxis	X轴数据	Array	-
showBackground	是否显示背景	Boolean	true
series	系列配置	Array	[]
title	图表标题	String	''
barWidth	柱子宽度	Number	30

使用示例

<bar-chart
  :data="[320, 332, 301, 334]"
  :xAxis="['第一季度', '第二季度', '第三季度', '第四季度']"
  :showBackground="true"
  title="季度业绩"
/>

PieChart

饼图组件

属性

参数	说明	类型	默认值
data	数据数组，格式：[{name: '名称', value: 100}]	Array	-
ring	是否显示为环形图	Boolean	false
title	图表标题	String	''
radius	饼图半径	String/Array	'70%'
showLegend	是否显示图例	Boolean	true
legendPosition	图例位置，可选值：'right'/'bottom'	String	'right'

使用示例

<pie-chart
  :data="[
    { value: 1048, name: '线上销售' },
    { value: 735, name: '门店销售' },
    { value: 580, name: '代理商' },
    { value: 484, name: '其他' }
  ]"
  :ring="false"
  title="收入来源分布"
/>

使用注意事项

1. 依赖安装

npm install echarts @vueuse/core

2. 自适应容器 所有图表组件都会自动适应容器大小，确保容器具有明确的宽高。

3. 主题定制 可以通过 BaseEChart 的 theme 属性设置主题，支持 ECharts 内置主题。

4. 性能优化

• 当图表不可见时会自动销毁实例
• 使用 v-if 而不是 v-show 来控制图表显示隐藏
• 数据量较大时建议使用防抖处理

5. 示例访问 可以通过访问 /demo/charts 路由查看完整的图表示例。