BCharts

提供通用的图表组件，支持时间范围选择和数据刷新。

组件注册

import { BCharts } from '@fesjs/traction-widget';
app.use(BCharts);

代码演示

基础用法

传入图表配置和数据获取方法，自动处理图表的渲染和更新。

Play

<template>
    <div class="chart-demo">
        <BCharts
            chart-id="demo-chart"
            :config="chartConfig"
            :initial-days="7"
        />
    </div>
</template>

<script setup lang="ts">
import { BCharts } from '@fesjs/traction-widget';

const chartConfig = {
    title: '告警统计分析',
    series: [
        {
            field: 'critical',
            name: '严重告警',
            itemStyle: {
                color: '#FEEEEE',
                borderColor: '#FF4D4F'
            },
        },
        {
            field: 'major',
            name: '主要告警',
            itemStyle: {
                color: '#EDF2FF', 
                borderColor: '#5384FF'
            }
        },
        {
            field: 'minor',
            name: '次要告警',
            itemStyle: {
                color: '#FFF4EB',
                borderColor: '#FF9900'
            }
        },
        {
            field: 'warning',
            name: '警告',
            itemStyle: {
                color: '#FFF3DC',
                borderColor: '#FAC017'
            }
        },
        {
            field: 'info',
            name: '信息',
            itemStyle: {
                color: '#D1F4E9',
                borderColor: '#00CB91'
            }
        }
    ],
    xAxisField: 'date',
    fetchData: async (startTime: number, endTime: number) => {
        // 模拟异步数据获取
        return new Promise((resolve) => {
            setTimeout(() => {
                // 生成模拟数据
                const days = Math.floor((endTime - startTime) / (24 * 60 * 60 * 1000));
                const data = [];
                
                for (let i = 0; i <= days; i++) {
                    const date = new Date(startTime + i * 24 * 60 * 60 * 1000);
                    data.push({
                        date: date.toISOString().split('T')[0],
                        critical: Math.floor(Math.random() * 10),
                        major: Math.floor(Math.random() * 15),
                        minor: Math.floor(Math.random() * 20),
                        warning: Math.floor(Math.random() * 25),
                        info: Math.floor(Math.random() * 30)
                    });
                }
                
                resolve(data);
            }, 1000);
        });
    }
};
</script>

<style scoped>
.chart-demo {
    padding: 24px;
    background: #fff;
    border-radius: 4px;
    min-height: 500px;
}
</style>

查看代码

参数说明

BCharts Props

属性	说明	类型	默认值	是否必须
chartId	图表DOM的id	string	-	是
config	图表配置项	ChartConfig	-	是
initialDays	初始时间范围天数	number	7	否

ChartConfig 类型定义

interface BarStyle {
  color: string;
  borderColor: string;
}

interface ChartConfig {
  // 图表标题
  title: string;
  // 数据项配置
  series: {
    field: string;
    name: string;
    itemStyle: BarStyle;
  }[];
  // 获取数据的方法，接收时间范围参数
  fetchData: (startTime: number, endTime: number) => Promise<any[]>;
  // x轴字段名
  xAxisField: string;
  // 自定义 tooltip 格式化函数
  tooltipFormatter?: (params: any[]) => string;
}

注意事项

组件会自动处理图表的初始化和销毁
时间范围变化时会自动重新获取数据并更新图表
支持自定义每个数据系列的样式
确保提供唯一的 chartId 以避免 DOM 冲突
可以通过 tooltipFormatter 自定义提示框的显示格式

BCharts #

组件注册 #

代码演示 #

基础用法 #

参数说明 #

BCharts Props #

ChartConfig 类型定义 #

注意事项 #

BCharts

组件注册

代码演示

基础用法

参数说明

BCharts Props

ChartConfig 类型定义

注意事项