You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.5 KiB
69 lines
1.5 KiB
<template>
|
|
<v-chart class="chart" :option="option" autoresize />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import VChart from 'vue-echarts'
|
|
import { use } from 'echarts/core'
|
|
import { CanvasRenderer } from 'echarts/renderers'
|
|
import { BarChart } from 'echarts/charts'
|
|
import {
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
GridComponent,
|
|
LegendComponent,
|
|
} from 'echarts/components'
|
|
import type { EChartsOption } from 'echarts'
|
|
|
|
use([
|
|
CanvasRenderer,
|
|
BarChart,
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
GridComponent,
|
|
LegendComponent,
|
|
])
|
|
|
|
const props = withDefaults(defineProps<{
|
|
title?: string
|
|
data: { name: string; value: number }[]
|
|
color?: string
|
|
height?: string
|
|
}>(), {
|
|
title: '',
|
|
color: '#58a6ff',
|
|
height: '300px',
|
|
})
|
|
|
|
const option = computed<EChartsOption>(() => ({
|
|
title: props.title ? { text: props.title, textStyle: { color: '#e6edf3', fontSize: 12 } } : undefined,
|
|
tooltip: { trigger: 'axis' },
|
|
grid: { left: 40, right: 20, top: props.title ? 30 : 10, bottom: 30 },
|
|
xAxis: {
|
|
type: 'category',
|
|
data: props.data.map(d => d.name),
|
|
axisLine: { lineStyle: { color: '#30363d' } },
|
|
axisLabel: { color: '#8b949e', fontSize: 10 },
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: { lineStyle: { color: '#21262d' } },
|
|
axisLabel: { color: '#8b949e' },
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: props.data.map(d => d.value),
|
|
itemStyle: { color: props.color },
|
|
barWidth: '60%',
|
|
}],
|
|
}))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart {
|
|
width: 100%;
|
|
height: v-bind(height);
|
|
}
|
|
</style>
|