A Vue 3 component library based on jingshi.
npm install @zhangke-ui/jingshi-componentsimport { 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:
- 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>- Using kebab-case:
<template>
<pie-chart :data="chartData" :title="'My Chart'" />
<bar-chart :data="chartData" :title="'My Chart'" />
</template>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>| Prop | Type | Default | Description |
|---|---|---|---|
| data | Array | [] | Chart data array |
| title | String | '' | Chart title |
| colorList | Array | default colors | Custom color list for chart |
MIT