Chart Component Utils

A comprehensive Vue chart component library with ECharts integration for sales data visualization. This package provides a complete charting solution with multiple chart types, data tables, and responsive design.

Installation

npm install chart-component-utils

Prerequisites

This library requires:

• Vue 3.0+
• ECharts 5.0+

Usage

Basic Usage

import { ChartComponent, getChartButtons, getSalesFields } from 'chart-component-utils';
import * as echarts from 'echarts';

// In your Vue component
export default {
  components: {
    ChartComponent
  },
  setup() {
    const chartData = ref([
      { '日期': '2024-01', '含税销售金额': '1000000', '销售利润': '200000' },
      { '日期': '2024-02', '含税销售金额': '1200000', '销售利润': '250000' },
      { '日期': '2024-03', '含税销售金额': '1500000', '销售利润': '300000' }
    ]);
    
    const buttons = getChartButtons();
    const activeType = ref('bar');
    
    return {
      chartData,
      buttons,
      activeType
    };
  }
};

Template Usage

<template>
  <ChartComponent
    :chartData="chartData"
    :buttons="buttons"
    :activeType="activeType"
    @switch-chart="handleChartSwitch"
  />
</template>

API Reference

Components

ChartComponent

A complete chart component with toolbar, multiple chart types, and data table support.

Props:

• chartData (Array): Chart data array
• buttons (Array): Chart type buttons configuration
• activeType (String): Currently active chart type
• type (String): Toolbar type ('small' or 'full')

Events:

• switch-chart: Emitted when chart type is switched
• fullScreenClick: Emitted when full screen button is clicked

Utility Functions

Chart Configuration

• getSalesFields() - Returns sales field configuration
• getChartButtons() - Returns chart type buttons configuration
• getGridColumns(chartData) - Returns grid columns for data table
• getChartConfig(type, chartData, fields) - Returns ECharts configuration

Chart Generation

• generateChartSeries(chartData, fields) - Generates chart series data
• generateChartOption(type, chartData, series, lineseries, pieSeries) - Generates ECharts options
• addChartSeries(chartData, series, lineseries, pieSeries, fieldName, seriesName, color) - Adds series to chart

Formatting Utilities

• formatNumberWithUnit(value) - Formats numbers with Chinese units
• formatAxisLabel(value) - Formats axis labels with proper line breaks
• countExistingFields(data) - Counts existing data fields

Chart Types Supported

• Bar Chart - Vertical bar chart
• Horizontal Bar Chart - Horizontal bar chart
• Line Chart - Line chart with data points
• Pie Chart - Pie chart with percentages
• Data Table - Tabular data display

Data Structure

Expected data format:

[
  {
    '日期': '2024-01',
    '店铺/客户名称': '客户A',
    '含税销售金额': '1000000',
    '不含税销售金额': '900000',
    '销售利润': '200000',
    '销售成本': '700000',
    '销售毛利率': '20%'
  },
  // ... more data
]

Supported Fields

• 含税销售金额 (Tax-included sales amount)
• 不含税销售金额 (Tax-excluded sales amount)
• 销售利润 (Sales profit)
• 销售成本 (Sales cost)
• 销售毛利率 (Gross profit margin)

Features

• Responsive Design: Automatically adjusts to container size
• Multiple Chart Types: Support for 5 different visualization types
• Data Table: Built-in data table for raw data display
• Chinese Formatting: Proper formatting for Chinese numbers and units
• Toolbar Integration: Built-in chart type switching toolbar
• ECharts Integration: Full ECharts functionality with custom configurations
• Type Safety: Comprehensive TypeScript support
• Accessibility: Proper ARIA labels and keyboard navigation

Customization

Custom Chart Types

You can extend the chart types by adding custom configurations:

import { generateChartOption } from 'chart-component-utils';

// Custom chart configuration
const customOption = generateChartOption('bar', chartData, fields);

Custom Styling

The component includes built-in CSS styles, but you can override them:

/* Override chart container styles */
.chart-container {
  max-width: 800px;
  background: #f8f9fa;
}

/* Custom toolbar styles */
.toolbar-small {
  background-color: #e3f2fd;
}

Examples

Basic Example

import { ChartComponent, getChartButtons } from 'chart-component-utils';

const chartData = [
  { '日期': '2024-01', '含税销售金额': '1500000', '销售利润': '300000' },
  { '日期': '2024-02', '含税销售金额': '1800000', '销售利润': '350000' },
  { '日期': '2024-03', '含税销售金额': '2000000', '销售利润': '400000' }
];

const buttons = getChartButtons();
const activeChartType = 'line';

Advanced Example

import { 
  ChartComponent, 
  getSalesFields, 
  generateChartSeries,
  generateChartOption 
} from 'chart-component-utils';

// Custom chart generation
const fields = getSalesFields();
const { series, pieSeries, lineseries } = generateChartSeries(chartData, fields);
const chartOption = generateChartOption('bar', chartData, series, lineseries, pieSeries);

// Use with existing ECharts instance
const chart = echarts.init(document.getElementById('chart'));
chart.setOption(chartOption);

Browser Support

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

License

MIT License - see LICENSE file for details.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Support

For support and questions, please open an issue on GitHub or contact the maintainers.

Changelog

v1.0.0

• Initial release
• Complete chart component with 5 chart types
• Comprehensive utility functions
• Chinese number formatting support
• Responsive design
• ECharts integration