parent
2eb6a4444e
commit
90ac382237
@ -0,0 +1,68 @@
|
||||
<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>
|
||||
@ -0,0 +1,85 @@
|
||||
<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 { HeatmapChart } from 'echarts/charts'
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
VisualMapComponent,
|
||||
} from 'echarts/components'
|
||||
import type { EChartsOption } from 'echarts'
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
HeatmapChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
VisualMapComponent,
|
||||
])
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
title?: string
|
||||
xAxisData: string[]
|
||||
yAxisData: string[]
|
||||
data: { x: number; y: number; value: number }[]
|
||||
height?: string
|
||||
}>(), {
|
||||
title: '',
|
||||
height: '400px',
|
||||
})
|
||||
|
||||
const option = computed<EChartsOption>(() => ({
|
||||
title: props.title ? { text: props.title, textStyle: { color: '#e6edf3', fontSize: 12 } } : undefined,
|
||||
tooltip: {
|
||||
position: 'top',
|
||||
formatter: (params: any) => `${props.yAxisData[params.data[1]]} / ${props.xAxisData[params.data[0]]}: ${params.data[2]}`,
|
||||
},
|
||||
grid: { left: 80, right: 80, top: props.title ? 30 : 10, bottom: 40 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.xAxisData,
|
||||
splitArea: { show: true, areaStyle: { color: ['#1c2333', '#161b22'] } },
|
||||
axisLine: { lineStyle: { color: '#30363d' } },
|
||||
axisLabel: { color: '#8b949e', fontSize: 10, rotate: 30 },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: props.yAxisData,
|
||||
splitArea: { show: true },
|
||||
axisLine: { lineStyle: { color: '#30363d' } },
|
||||
axisLabel: { color: '#8b949e', fontSize: 10 },
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: Math.max(...props.data.map(d => d.value), 1),
|
||||
calculable: true,
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
bottom: 0,
|
||||
inRange: { color: ['#161b22', '#2d9cdb', '#36b37e', '#e3b341', '#ff6b6b', '#ff4444'] },
|
||||
textStyle: { color: '#8b949e' },
|
||||
},
|
||||
series: [{
|
||||
type: 'heatmap',
|
||||
data: props.data.map(d => [d.x, d.y, d.value]),
|
||||
label: { show: true, color: '#e6edf3', fontSize: 10 },
|
||||
itemStyle: { borderColor: '#30363d', borderWidth: 1 },
|
||||
emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.5)' } },
|
||||
}],
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: v-bind(height);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<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 { LineChart } from 'echarts/charts'
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
} from 'echarts/components'
|
||||
import type { EChartsOption } from 'echarts'
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
LineChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
])
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
title?: string
|
||||
xAxisData: string[]
|
||||
series: { name: string; data: number[]; color?: string; areaStyle?: boolean }[]
|
||||
height?: string
|
||||
inverseY?: boolean
|
||||
}>(), {
|
||||
title: '',
|
||||
height: '300px',
|
||||
inverseY: false,
|
||||
})
|
||||
|
||||
const option = computed<EChartsOption>(() => ({
|
||||
title: props.title ? { text: props.title, textStyle: { color: '#e6edf3', fontSize: 12 } } : undefined,
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: props.series.length > 1 ? { data: props.series.map(s => s.name), textStyle: { color: '#8b949e' } } : undefined,
|
||||
grid: { left: 40, right: 20, top: props.title ? 30 : 10, bottom: 30 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.xAxisData,
|
||||
axisLine: { lineStyle: { color: '#30363d' } },
|
||||
axisLabel: { color: '#8b949e', fontSize: 10 },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
inverse: props.inverseY,
|
||||
splitLine: { lineStyle: { color: '#21262d' } },
|
||||
axisLabel: { color: '#8b949e' },
|
||||
},
|
||||
series: props.series.map(s => ({
|
||||
name: s.name,
|
||||
type: 'line',
|
||||
data: s.data,
|
||||
smooth: true,
|
||||
itemStyle: { color: s.color || '#58a6ff' },
|
||||
areaStyle: s.areaStyle ? { color: s.color ? `${s.color}33` : 'rgba(88,166,255,0.2)' } : undefined,
|
||||
})),
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: v-bind(height);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,56 @@
|
||||
<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 { PieChart } from 'echarts/charts'
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from 'echarts/components'
|
||||
import type { EChartsOption } from 'echarts'
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
PieChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
])
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
title?: string
|
||||
data: { name: string; value: number }[]
|
||||
height?: string
|
||||
}>(), {
|
||||
title: '',
|
||||
height: '300px',
|
||||
})
|
||||
|
||||
const option = computed<EChartsOption>(() => ({
|
||||
title: props.title ? { text: props.title, textStyle: { color: '#e6edf3', fontSize: 12 } } : undefined,
|
||||
tooltip: { trigger: 'item' },
|
||||
legend: { orient: 'vertical', right: 10, top: 'center', textStyle: { color: '#8b949e' } },
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 4, borderColor: '#1c2333', borderWidth: 2 },
|
||||
label: { show: false },
|
||||
emphasis: { label: { show: true, fontSize: 12, fontWeight: 'bold', color: '#e6edf3' } },
|
||||
data: props.data,
|
||||
}],
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: v-bind(height);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue