Jingshi Components

A Vue 3 component library based on jingshi.

Installation

npm install @zhangke-ui/jingshi-components

Usage

Global Registration (Recommended)

import { createApp } from 'vue'

// main.ts
import jingshiComponents from '@zhangke-ui/jingshi-components'
import '@zhangke-ui/jingshi-components/style.css'

const app = createApp(App)
app.use(jingshiComponents)

After global registration, you can use components in your templates in two ways:

1. Using PascalCase (recommended):

<template>
  <PieChart :data="chartData" :title="'My Chart'" />
  <BarChart :data="chartData" :title="'My Chart'" />
</template>

<script setup>
// No need to import components
const chartData = [
  {
    countResults: [
      {
        algorithmName: "Category 1",
        countNumber: 100
      },
      {
        algorithmName: "Category 2",
        countNumber: 200
      }
    ],
    dateType: "day"
  }
]
</script>

2. Using kebab-case:

<template>
  <pie-chart :data="chartData" :title="'My Chart'" />
  <bar-chart :data="chartData" :title="'My Chart'" />
</template>

Local Registration (Optional)【备注：暂不支持，请使用全局注册】

If you prefer to import components individually:

<template>
  <PieChart :data="chartData" :title="'My Chart'" />
  <BarChart :data="chartData" :title="'My Chart'" />
</template>

<script setup>
import { PieChart, BarChart } from '@zhangke-ui/jingshi-components'

const chartData = [
  {
    countResults: [
      {
        algorithmName: "Category 1",
        countNumber: 100
      },
      {
        algorithmName: "Category 2",
        countNumber: 200
      }
    ],
    dateType: "day"
  }
]
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | Array | [] | Chart data array | | title | String | '' | Chart title | | colorList | Array | default colors | Custom color list for chart |

License

MIT