hogwarts-ui 官方网站

Appearance

Vega ​

基础用法-柱状图 ​

点击查看示例代码
vue
<template>
	<h-vega-v1 :h_data="h_data"></h-vega-v1>
</template>

<script setup>
const h_data = {
	component: 'h-vega-v1',
	meta: {
		mark: 'bar',
		title: "A Simple Bar Chart",
		encoding: {
			x: { field: 'a', type: 'ordinal' },
			y: { field: 'b', type: 'quantitative' }
		}
	},
	content: [
		{ a: 'A', b: 28 },
		{ a: 'B', b: 55 },
		{ a: 'C', b: 43 },
		{ a: 'D', b: 91 },
		{ a: 'E', b: 81 },
		{ a: 'F', b: 53 },
		{ a: 'G', b: 19 },
		{ a: 'H', b: 87 },
		{ a: 'I', b: 52 }
	]
}
</script>
<template>
	<h-vega-v1 :h_data="h_data"></h-vega-v1>
</template>

<script setup>
const h_data = {
	component: 'h-vega-v1',
	meta: {
		mark: 'bar',
		title: "A Simple Bar Chart",
		encoding: {
			x: { field: 'a', type: 'ordinal' },
			y: { field: 'b', type: 'quantitative' }
		}
	},
	content: [
		{ a: 'A', b: 28 },
		{ a: 'B', b: 55 },
		{ a: 'C', b: 43 },
		{ a: 'D', b: 91 },
		{ a: 'E', b: 81 },
		{ a: 'F', b: 53 },
		{ a: 'G', b: 19 },
		{ a: 'H', b: 87 },
		{ a: 'I', b: 52 }
	]
}
</script>

基础用法-折线图 ​

点击查看示例代码
vue
<template>
	<h-vega-v1 :h_data="h_data1"></h-vega-v1>
</template>

<script setup>
const h_data = {
	component: 'h-vega-v1',
	meta: {
		mark: 'line',
		title: "A Simple Bar Chart",
		encoding:{
			x: { field: 'a', type: 'ordinal' },
			y: { field: 'b', type: 'quantitative' }
		},
		strokeDash: {field: "predicted", type: "nominal"}
	},
	content: [
		{"a": "A", "b": 28, "predicted": false},
		{"a": "B", "b": 55, "predicted": false},
		{"a": "D", "b": 91, "predicted": false},
		{"a": "E", "b": 81, "predicted": false},
		{"a": "E", "b": 81, "predicted": true},
		{"a": "G", "b": 19, "predicted": true},
		{"a": "H", "b": 87, "predicted": true}
	]
}
</script>
<template>
	<h-vega-v1 :h_data="h_data1"></h-vega-v1>
</template>

<script setup>
const h_data = {
	component: 'h-vega-v1',
	meta: {
		mark: 'line',
		title: "A Simple Bar Chart",
		encoding:{
			x: { field: 'a', type: 'ordinal' },
			y: { field: 'b', type: 'quantitative' }
		},
		strokeDash: {field: "predicted", type: "nominal"}
	},
	content: [
		{"a": "A", "b": 28, "predicted": false},
		{"a": "B", "b": 55, "predicted": false},
		{"a": "D", "b": 91, "predicted": false},
		{"a": "E", "b": 81, "predicted": false},
		{"a": "E", "b": 81, "predicted": true},
		{"a": "G", "b": 19, "predicted": true},
		{"a": "H", "b": 87, "predicted": true}
	]
}
</script>

基础用法-饼图 ​

点击查看示例代码
vue
<template>
	<h-vega-v1 :h_data="h_data2"></h-vega-v1>
</template>

<script setup>
const h_data = {
	component: 'h-vega-v1',
	meta: {
		mark: 'arc',
		title: 'A Simple Bar Chart',
		encoding: {
			theta: { field: 'value', type: 'quantitative' },
			color: { field: 'category', type: 'nominal' }
		}
	},
	content: [
		{ category: 1, value: 4 },
		{ category: 2, value: 6 },
		{ category: 3, value: 10 },
		{ category: 4, value: 3 },
		{ category: 5, value: 7 },
		{ category: 6, value: 8 }
	]
}
</script>
<template>
	<h-vega-v1 :h_data="h_data2"></h-vega-v1>
</template>

<script setup>
const h_data = {
	component: 'h-vega-v1',
	meta: {
		mark: 'arc',
		title: 'A Simple Bar Chart',
		encoding: {
			theta: { field: 'value', type: 'quantitative' },
			color: { field: 'category', type: 'nominal' }
		}
	},
	content: [
		{ category: 1, value: 4 },
		{ category: 2, value: 6 },
		{ category: 3, value: 10 },
		{ category: 4, value: 3 },
		{ category: 5, value: 7 },
		{ category: 6, value: 8 }
	]
}
</script>