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