mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-10-28 03:25:02 +08:00
feat: revamp demo
This commit is contained in:
Justineo
@ -1,62 +1,70 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { use, registerTheme } from "echarts/core";
|
||||
import { BarChart } from "echarts/charts";
|
||||
import { GridComponent, DatasetComponent } from "echarts/components";
|
||||
import { shallowRef, onBeforeUnmount } from "vue";
|
||||
import { shallowRef, computed } from "vue";
|
||||
import { useIntervalFn } from "@vueuse/core";
|
||||
import type { LoadingOptions } from "../../src/types";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/bar";
|
||||
import theme from "../theme.json";
|
||||
import darkTheme from "../theme-dark.json";
|
||||
import { useDemoDark } from "../composables/useDemoDark";
|
||||
|
||||
use([BarChart, DatasetComponent, GridComponent]);
|
||||
registerTheme("ovilia-green", theme);
|
||||
registerTheme("ovilia-green-dark", darkTheme);
|
||||
|
||||
const seconds = shallowRef(0);
|
||||
const loading = shallowRef(false);
|
||||
const loadingOptions = {
|
||||
text: "Loading…",
|
||||
color: "#4ea397",
|
||||
maskColor: "rgba(255, 255, 255, 0.4)",
|
||||
};
|
||||
const isDark = useDemoDark();
|
||||
const loadingOptions = computed(
|
||||
() =>
|
||||
({
|
||||
text: "Loading…",
|
||||
textColor: isDark.value ? "#e5e7eb" : "#111827",
|
||||
color: "#42b883",
|
||||
maskColor: isDark.value
|
||||
? "rgba(0, 0, 0, 0.45)"
|
||||
: "rgba(255, 255, 255, 0.5)",
|
||||
}) satisfies LoadingOptions,
|
||||
);
|
||||
const option = shallowRef(getData());
|
||||
|
||||
let timer = null;
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timer);
|
||||
});
|
||||
|
||||
function tick() {
|
||||
seconds.value--;
|
||||
|
||||
if (seconds.value === 0) {
|
||||
clearInterval(timer);
|
||||
loading.value = false;
|
||||
option.value = getData();
|
||||
}
|
||||
}
|
||||
const { pause, resume } = useIntervalFn(
|
||||
() => {
|
||||
if (seconds.value <= 0) {
|
||||
pause();
|
||||
return;
|
||||
}
|
||||
seconds.value -= 1;
|
||||
if (seconds.value === 0) {
|
||||
loading.value = false;
|
||||
option.value = getData();
|
||||
pause();
|
||||
}
|
||||
},
|
||||
1000,
|
||||
{ immediate: false },
|
||||
);
|
||||
|
||||
function refresh() {
|
||||
// simulating async data from server
|
||||
seconds.value = 3;
|
||||
loading.value = true;
|
||||
|
||||
timer = setInterval(tick, 1000);
|
||||
pause();
|
||||
resume();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example
|
||||
id="bar"
|
||||
title="Bar chart"
|
||||
desc="(with async data & custom theme)"
|
||||
>
|
||||
<v-chart
|
||||
<VExample id="bar" title="Bar chart" desc="async data · custom theme">
|
||||
<VChart
|
||||
:option="option"
|
||||
theme="ovilia-green"
|
||||
autoresize
|
||||
:theme="isDark ? 'ovilia-green-dark' : 'ovilia-green'"
|
||||
:loading="loading"
|
||||
:loadingOptions="loadingOptions"
|
||||
:loading-options="loadingOptions"
|
||||
/>
|
||||
<template #extra>
|
||||
<p v-if="seconds <= 0">
|
||||
@ -70,8 +78,8 @@ function refresh() {
|
||||
</small>
|
||||
</p>
|
||||
<p class="actions">
|
||||
<button @click="refresh" :disabled="seconds > 0">Refresh</button>
|
||||
<button :disabled="seconds > 0" @click="refresh">Refresh</button>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</VExample>
|
||||
</template>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { use, connect, disconnect } from "echarts/core";
|
||||
import { ScatterChart } from "echarts/charts";
|
||||
import {
|
||||
@ -7,7 +7,8 @@ import {
|
||||
VisualMapComponent,
|
||||
TooltipComponent,
|
||||
} from "echarts/components";
|
||||
import { shallowRef, watch } from "vue";
|
||||
import { shallowRef, watchEffect } from "vue";
|
||||
import type { Option } from "../../src/types";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/connect";
|
||||
@ -20,35 +21,36 @@ use([
|
||||
TooltipComponent,
|
||||
]);
|
||||
|
||||
const [c1, c2] = getData().map(shallowRef);
|
||||
const [firstOption, secondOption] = getData();
|
||||
const c1 = shallowRef<Option>(firstOption);
|
||||
const c2 = shallowRef<Option>(secondOption);
|
||||
const connected = shallowRef(true);
|
||||
|
||||
watch(
|
||||
connected,
|
||||
(value) => {
|
||||
if (value) {
|
||||
connect("radiance");
|
||||
} else {
|
||||
watchEffect((onCleanup) => {
|
||||
if (connected.value) {
|
||||
connect("radiance");
|
||||
onCleanup(() => {
|
||||
disconnect("radiance");
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
});
|
||||
return;
|
||||
}
|
||||
disconnect("radiance");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="connect" title="Connectable charts" split>
|
||||
<VExample id="connect" title="Connectable charts" split>
|
||||
<template #start>
|
||||
<v-chart :option="c1" group="radiance" autoresize />
|
||||
<VChart :option="c1" group="radiance" autoresize />
|
||||
</template>
|
||||
<template #end>
|
||||
<v-chart :option="c2" group="radiance" autoresize />
|
||||
<VChart :option="c2" group="radiance" autoresize />
|
||||
</template>
|
||||
<template #extra>
|
||||
<p class="actions">
|
||||
<input id="connected-check" type="checkbox" v-model="connected" />
|
||||
<input id="connected-check" v-model="connected" type="checkbox" />
|
||||
<label for="connected-check">Connected</label>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</VExample>
|
||||
</template>
|
||||
|
||||
@ -1,15 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
|
||||
interface ExampleProps {
|
||||
id: string;
|
||||
title: string;
|
||||
desc?: string | string[];
|
||||
split?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<ExampleProps>();
|
||||
|
||||
const badges = computed<string[]>(() => {
|
||||
const { desc } = props;
|
||||
if (!desc) {
|
||||
return [];
|
||||
}
|
||||
if (Array.isArray(desc)) {
|
||||
return desc.map((value) => value.trim()).filter(Boolean);
|
||||
}
|
||||
|
||||
let text = desc.trim();
|
||||
const wrapped = text.match(/^\s*\((.*)\)\s*$/);
|
||||
if (wrapped) {
|
||||
text = wrapped[1];
|
||||
}
|
||||
|
||||
return text
|
||||
.split(/\s*·\s*|\s*,\s*|\s*&\s*|\s+and\s+/i)
|
||||
.map((part) => part.trim())
|
||||
.filter(Boolean);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h3 :id="id">
|
||||
<a :href="`#${id}`">
|
||||
{{ title }}
|
||||
<small v-if="desc">{{ desc }}</small>
|
||||
</a>
|
||||
<a :href="`#${id}`">{{ title }}</a>
|
||||
</h3>
|
||||
<div v-if="badges.length" class="badges">
|
||||
<span v-for="(b, i) in badges" :key="i" class="badge">{{ b }}</span>
|
||||
</div>
|
||||
<section>
|
||||
<figure class="fig hero" v-if="!split">
|
||||
<figure v-if="!split" class="fig hero">
|
||||
<slot />
|
||||
</figure>
|
||||
<div class="split" v-else>
|
||||
<div v-else class="split">
|
||||
<figure class="fig half">
|
||||
<slot name="start" />
|
||||
</figure>
|
||||
@ -21,38 +55,57 @@
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
desc: String,
|
||||
split: Boolean,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fig {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
margin: 2em auto;
|
||||
margin: 2rem auto;
|
||||
|
||||
> .echarts {
|
||||
width: calc(60vw + 4em);
|
||||
& > .echarts {
|
||||
width: min(calc(64vw + 4rem), 980px);
|
||||
height: 360px;
|
||||
max-width: 720px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
|
||||
max-width: 980px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-l);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0.26rem 0.72rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1;
|
||||
color: var(--text);
|
||||
background: color-mix(in srgb, var(--accent) 8%, var(--surface-2) 70%);
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border) 60%);
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge::before {
|
||||
content: "#";
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.split {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -63,15 +116,23 @@ defineProps({
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.fig {
|
||||
width: 100vw;
|
||||
margin: 1em auto;
|
||||
width: 100%;
|
||||
margin: 1rem auto;
|
||||
|
||||
.echarts {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 60vw;
|
||||
height: 64vw;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
@ -82,8 +143,8 @@ defineProps({
|
||||
@media (min-width: 980px) {
|
||||
.fig.half {
|
||||
.echarts {
|
||||
width: 28vw;
|
||||
min-width: 240px;
|
||||
width: 32vw;
|
||||
min-width: 280px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { use, registerMap } from "echarts/core";
|
||||
import { ScatterChart, EffectScatterChart } from "echarts/charts";
|
||||
import {
|
||||
@ -12,6 +12,7 @@ import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/map";
|
||||
import chinaMap from "../data/china.json";
|
||||
import { isGeoJSONSource } from "../utils/geo";
|
||||
|
||||
use([
|
||||
ScatterChart,
|
||||
@ -22,29 +23,42 @@ use([
|
||||
TooltipComponent,
|
||||
]);
|
||||
|
||||
registerMap("china", chinaMap);
|
||||
const chinaGeoJSON = isGeoJSONSource(chinaMap) ? chinaMap : null;
|
||||
|
||||
if (chinaGeoJSON) {
|
||||
registerMap("china", chinaGeoJSON);
|
||||
}
|
||||
|
||||
type ChartInstance = InstanceType<typeof VChart>;
|
||||
|
||||
interface Snapshot {
|
||||
src: string;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
const option = shallowRef(getData());
|
||||
const map = shallowRef(null);
|
||||
const open = shallowRef(false);
|
||||
const map = shallowRef<ChartInstance | null>(null);
|
||||
const isModalOpen = shallowRef(false);
|
||||
const snapshot = shallowRef<Snapshot | null>(null);
|
||||
|
||||
let img = null;
|
||||
|
||||
function convert() {
|
||||
img = {
|
||||
src: map.value.getDataURL({
|
||||
pixelRatio: window.devicePixelRatio || 1,
|
||||
}),
|
||||
width: map.value.getWidth(),
|
||||
height: map.value.getHeight(),
|
||||
function convert(): void {
|
||||
const chart = map.value;
|
||||
if (!chart) {
|
||||
return;
|
||||
}
|
||||
snapshot.value = {
|
||||
src: chart.getDataURL({ pixelRatio: window.devicePixelRatio || 1 }),
|
||||
width: chart.getWidth(),
|
||||
height: chart.getHeight(),
|
||||
};
|
||||
open.value = true;
|
||||
isModalOpen.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="map" title="Map" desc="(with GeoJSON & image converter)">
|
||||
<v-chart
|
||||
<VExample id="map" title="Map" desc="GeoJSON · image converter">
|
||||
<VChart
|
||||
ref="map"
|
||||
:option="option"
|
||||
autoresize
|
||||
@ -54,9 +68,18 @@ function convert() {
|
||||
<p class="actions">
|
||||
<button @click="convert">Convert to image</button>
|
||||
</p>
|
||||
<aside class="modal" :class="{ open }" @click="open = false">
|
||||
<img v-if="img" v-bind="img" />
|
||||
<aside
|
||||
class="modal"
|
||||
:class="{ open: isModalOpen }"
|
||||
@click="isModalOpen = false"
|
||||
>
|
||||
<img
|
||||
v-if="snapshot"
|
||||
:src="snapshot.src"
|
||||
:width="snapshot.width"
|
||||
:height="snapshot.height"
|
||||
/>
|
||||
</aside>
|
||||
</template>
|
||||
</v-example>
|
||||
</VExample>
|
||||
</template>
|
||||
|
||||
@ -1,96 +1,121 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { use } from "echarts/core";
|
||||
import { Bar3DChart } from "echarts-gl/charts";
|
||||
import { VisualMapComponent } from "echarts/components";
|
||||
import { GlobeComponent } from "echarts-gl/components";
|
||||
import { shallowRef, onMounted } from "vue";
|
||||
import type { InitOptions, LoadingOptions, Option } from "../../src/types";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import world from "../assets/world.jpg";
|
||||
import starfield from "../assets/starfield.jpg";
|
||||
import { DEMO_TEXT_STYLE } from "../constants";
|
||||
|
||||
use([Bar3DChart, VisualMapComponent, GlobeComponent]);
|
||||
|
||||
const option = shallowRef();
|
||||
type GlobeDatum = [number, number, number];
|
||||
|
||||
function isGlobeData(value: unknown): value is GlobeDatum[] {
|
||||
return (
|
||||
Array.isArray(value) &&
|
||||
value.every(
|
||||
(entry) =>
|
||||
Array.isArray(entry) &&
|
||||
entry.length === 3 &&
|
||||
typeof entry[0] === "number" &&
|
||||
typeof entry[1] === "number" &&
|
||||
typeof entry[2] === "number",
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const option = shallowRef<Option | undefined>(undefined);
|
||||
const loading = shallowRef(true);
|
||||
|
||||
const initOptions = {
|
||||
const initOptions: InitOptions = {
|
||||
renderer: "canvas",
|
||||
};
|
||||
|
||||
const loadingOptions = {
|
||||
const loadingOptions: LoadingOptions = {
|
||||
text: "Loading...",
|
||||
color: "#000",
|
||||
textColor: "#fff",
|
||||
maskColor: "transparent",
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
import("../data/population.json").then(({ default: data }) => {
|
||||
onMounted(async () => {
|
||||
const module = await import("../data/population.json");
|
||||
const population = module.default;
|
||||
|
||||
if (!isGlobeData(population)) {
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
data = data
|
||||
.filter((dataItem) => dataItem[2] > 0)
|
||||
.map((dataItem) => [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])]);
|
||||
const processed = population
|
||||
.filter(([, , amount]) => amount > 0)
|
||||
.map(([lon, lat, amount]): GlobeDatum => [lon, lat, Math.sqrt(amount)]);
|
||||
|
||||
option.value = {
|
||||
backgroundColor: "#000",
|
||||
globe: {
|
||||
baseTexture: world,
|
||||
heightTexture: world,
|
||||
shading: "lambert",
|
||||
environment: starfield,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 2,
|
||||
},
|
||||
},
|
||||
viewControl: {
|
||||
autoRotate: false,
|
||||
option.value = {
|
||||
textStyle: { ...DEMO_TEXT_STYLE },
|
||||
backgroundColor: "#000",
|
||||
globe: {
|
||||
baseTexture: world,
|
||||
heightTexture: world,
|
||||
shading: "lambert",
|
||||
environment: starfield,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 2,
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
bottom: "3%",
|
||||
left: "3%",
|
||||
max: 40,
|
||||
calculable: true,
|
||||
realtime: false,
|
||||
viewControl: {
|
||||
autoRotate: false,
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
bottom: "3%",
|
||||
left: "3%",
|
||||
max: 40,
|
||||
calculable: true,
|
||||
realtime: false,
|
||||
inRange: {
|
||||
colorLightness: [0.2, 0.9],
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
controller: {
|
||||
inRange: {
|
||||
colorLightness: [0.2, 0.9],
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
controller: {
|
||||
inRange: {
|
||||
color: "orange",
|
||||
},
|
||||
},
|
||||
outOfRange: {
|
||||
colorAlpha: 0,
|
||||
color: "orange",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar3D",
|
||||
coordinateSystem: "globe",
|
||||
data: data,
|
||||
barSize: 0.6,
|
||||
minHeight: 0.2,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
color: "orange",
|
||||
},
|
||||
outOfRange: {
|
||||
colorAlpha: 0,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar3D",
|
||||
coordinateSystem: "globe",
|
||||
data: processed,
|
||||
barSize: 0.6,
|
||||
minHeight: 0.2,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
color: "orange",
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
},
|
||||
],
|
||||
} satisfies Option;
|
||||
|
||||
loading.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="gl" title="GL charts" desc="(Globe & Bar3D)">
|
||||
<v-chart
|
||||
<VExample id="gl" title="GL charts" desc="Globe · Bar3D">
|
||||
<VChart
|
||||
:option="option"
|
||||
:init-options="initOptions"
|
||||
autoresize
|
||||
@ -107,5 +132,5 @@ onMounted(() => {
|
||||
<small>(You can only use the canvas renderer for GL charts.)</small>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</VExample>
|
||||
</template>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { use } from "echarts/core";
|
||||
import { LineChart, PieChart } from "echarts/charts";
|
||||
import {
|
||||
@ -8,10 +8,12 @@ import {
|
||||
TooltipComponent,
|
||||
ToolboxComponent,
|
||||
} from "echarts/components";
|
||||
import { shallowRef } from "vue";
|
||||
import { shallowRef, ref } from "vue";
|
||||
import type { Option } from "../../src/types";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/line";
|
||||
import { DEMO_FONT_FAMILY } from "../constants";
|
||||
|
||||
use([
|
||||
DatasetComponent,
|
||||
@ -23,81 +25,159 @@ use([
|
||||
PieChart,
|
||||
]);
|
||||
|
||||
const option = shallowRef(getData());
|
||||
const axis = shallowRef("xAxis");
|
||||
const option = shallowRef<Option>(getData());
|
||||
const axis = ref<"xAxis" | "yAxis">("xAxis");
|
||||
|
||||
function getPieOption(params) {
|
||||
const option = {
|
||||
dataset: { source: [params[0].dimensionNames, params[0].data] },
|
||||
function isStringOrNumber(value: unknown): value is string | number {
|
||||
return typeof value === "string" || typeof value === "number";
|
||||
}
|
||||
|
||||
function isDataRow(value: unknown): value is (string | number)[] {
|
||||
return Array.isArray(value) && value.every(isStringOrNumber);
|
||||
}
|
||||
|
||||
type TooltipParams = unknown;
|
||||
|
||||
interface TooltipDatumLike {
|
||||
dimensionNames?: unknown;
|
||||
data?: unknown;
|
||||
name?: unknown;
|
||||
}
|
||||
|
||||
function firstTooltipDatum(
|
||||
params: TooltipParams,
|
||||
): TooltipDatumLike | undefined {
|
||||
if (Array.isArray(params)) {
|
||||
const [first] = params;
|
||||
return first as TooltipDatumLike | undefined;
|
||||
}
|
||||
if (params && typeof params === "object" && "data" in params) {
|
||||
return params as TooltipDatumLike;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function getPieOption(params: TooltipParams): Option {
|
||||
const datum = firstTooltipDatum(params);
|
||||
if (
|
||||
!datum ||
|
||||
!Array.isArray(datum.dimensionNames) ||
|
||||
!isDataRow(datum.data)
|
||||
) {
|
||||
return { series: [] } satisfies Option;
|
||||
}
|
||||
|
||||
const dimensionNames = datum.dimensionNames.map((value) => String(value));
|
||||
const dataRow = datum.data;
|
||||
|
||||
return {
|
||||
textStyle: {
|
||||
fontFamily: DEMO_FONT_FAMILY,
|
||||
fontWeight: 400,
|
||||
},
|
||||
dataset: { source: [dimensionNames, dataRow] },
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["60%", "100%"],
|
||||
seriesLayoutBy: "row",
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
borderRadius: 4,
|
||||
},
|
||||
label: {
|
||||
position: "center",
|
||||
formatter: params[0].name,
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
fontWeight: 300,
|
||||
formatter: datum.name ?? "",
|
||||
fontFamily: DEMO_FONT_FAMILY,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
return option;
|
||||
} satisfies Option;
|
||||
}
|
||||
|
||||
function getAxisLabel(params: TooltipParams): string {
|
||||
if (Array.isArray(params)) {
|
||||
const [first] = params;
|
||||
if (first && typeof first === "object" && "name" in first) {
|
||||
return String((first as { name?: unknown }).name ?? "");
|
||||
}
|
||||
return "";
|
||||
}
|
||||
if (params && typeof params === "object" && "name" in params) {
|
||||
return String((params as { name?: unknown }).name ?? "");
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function getDatasetRows(option: Option): Array<string | number>[] {
|
||||
const rawDataset = option.dataset;
|
||||
if (!Array.isArray(rawDataset) || rawDataset.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const firstDataset = rawDataset[0] as { source?: unknown };
|
||||
const { source } = firstDataset;
|
||||
if (!Array.isArray(source) || source.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (!source.every(isDataRow)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return source as Array<string | number>[];
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example
|
||||
id="line"
|
||||
title="Line chart"
|
||||
desc="(with tooltip and dataView slots)"
|
||||
>
|
||||
<v-chart :option="option" autoresize>
|
||||
<VExample id="line" title="Line chart" desc="tooltip · dataView">
|
||||
<VChart :option="option" autoresize>
|
||||
<template #tooltip="params">
|
||||
<v-chart
|
||||
<VChart
|
||||
:style="{ width: '100px', height: '100px' }"
|
||||
:option="getPieOption(params)"
|
||||
autoresize
|
||||
:option="{ ...getPieOption(params), backgroundColor: 'transparent' }"
|
||||
/>
|
||||
</template>
|
||||
<template #[`tooltip-${axis}`]="params">
|
||||
{{ axis === "xAxis" ? "Year" : "Value" }}:
|
||||
<b>{{ params.name }}</b>
|
||||
<b>{{ getAxisLabel(params) }}</b>
|
||||
</template>
|
||||
<template #dataView="option">
|
||||
<table style="margin: 20px auto">
|
||||
<template #dataView="chartOption">
|
||||
<table
|
||||
v-if="getDatasetRows(chartOption).length"
|
||||
style="margin: 20px auto"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(t, i) in option.dataset[0].source[0]" :key="i">
|
||||
<th v-for="(t, i) in getDatasetRows(chartOption)[0]" :key="i">
|
||||
{{ t }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, i) in option.dataset[0].source.slice(1)" :key="i">
|
||||
<tr
|
||||
v-for="(row, rowIndex) in getDatasetRows(chartOption).slice(1)"
|
||||
:key="rowIndex"
|
||||
>
|
||||
<th>{{ row[0] }}</th>
|
||||
<td v-for="(v, i) in row.slice(1)" :key="i">{{ v }}</td>
|
||||
<td v-for="(value, cellIndex) in row.slice(1)" :key="cellIndex">
|
||||
{{ value }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</v-chart>
|
||||
</VChart>
|
||||
<template #extra>
|
||||
<p class="actions">
|
||||
Custom tooltip on
|
||||
Tooltip axis
|
||||
<select v-model="axis">
|
||||
<option value="xAxis">X Axis</option>
|
||||
<option value="yAxis">Y Axis</option>
|
||||
<option value="xAxis">X axis</option>
|
||||
<option value="yAxis">Y axis</option>
|
||||
</select>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</VExample>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
<script setup>
|
||||
import { registerTheme } from "echarts/core";
|
||||
|
||||
import "echarts-liquidfill";
|
||||
import VChart from "../../src/ECharts";
|
||||
import theme from "../theme.json";
|
||||
import logo from "../data/logo";
|
||||
|
||||
registerTheme("ovilia-green", theme);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-chart id="logo" :option="logo" />
|
||||
</template>
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { use, registerMap } from "echarts/core";
|
||||
import { LinesChart } from "echarts/charts";
|
||||
import {
|
||||
@ -7,18 +7,42 @@ import {
|
||||
TooltipComponent,
|
||||
} from "echarts/components";
|
||||
import { shallowRef } from "vue";
|
||||
import type { InitOptions, LoadingOptions, Option } from "../../src/types";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import worldMap from "../data/world.json";
|
||||
import { DEMO_TEXT_STYLE } from "../constants";
|
||||
import { isGeoJSONSource } from "../utils/geo";
|
||||
|
||||
use([LinesChart, GeoComponent, TitleComponent, TooltipComponent]);
|
||||
registerMap("world", worldMap);
|
||||
|
||||
const chart = shallowRef(null);
|
||||
const worldGeoJSON = isGeoJSONSource(worldMap) ? worldMap : null;
|
||||
|
||||
if (worldGeoJSON) {
|
||||
registerMap("world", worldGeoJSON);
|
||||
}
|
||||
|
||||
type ChartInstance = InstanceType<typeof VChart>;
|
||||
|
||||
interface FlightDataset {
|
||||
airports: Array<[string, string, string, number, number]>;
|
||||
routes: Array<[number, number, number, number]>;
|
||||
}
|
||||
|
||||
function isFlightDataset(value: unknown): value is FlightDataset {
|
||||
return (
|
||||
typeof value === "object" &&
|
||||
value !== null &&
|
||||
Array.isArray((value as Record<string, unknown>).airports) &&
|
||||
Array.isArray((value as Record<string, unknown>).routes)
|
||||
);
|
||||
}
|
||||
|
||||
const chart = shallowRef<ChartInstance | null>(null);
|
||||
const loading = shallowRef(false);
|
||||
const loaded = shallowRef(false);
|
||||
|
||||
const loadingOptions = {
|
||||
const loadingOptions: LoadingOptions = {
|
||||
text: "",
|
||||
color: "#c23531",
|
||||
textColor: "rgba(255, 255, 255, 0.5)",
|
||||
@ -26,24 +50,36 @@ const loadingOptions = {
|
||||
zlevel: 0,
|
||||
};
|
||||
|
||||
function load() {
|
||||
const initOptions: InitOptions = {
|
||||
renderer: "canvas",
|
||||
};
|
||||
|
||||
function load(): void {
|
||||
loaded.value = true;
|
||||
loading.value = true;
|
||||
|
||||
import("../data/flight.json").then(({ default: data }) => {
|
||||
import("../data/flight.json").then(({ default: rawData }) => {
|
||||
if (!isFlightDataset(rawData)) {
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
|
||||
function getAirportCoord(idx) {
|
||||
return [data.airports[idx][3], data.airports[idx][4]];
|
||||
}
|
||||
const routes = data.routes.map((airline) => {
|
||||
return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
|
||||
const getAirportCoord = (index: number): [number, number] => [
|
||||
rawData.airports[index][3],
|
||||
rawData.airports[index][4],
|
||||
];
|
||||
|
||||
type Route = [[number, number], [number, number]];
|
||||
const routes = rawData.routes.map<Route>(([, from, to]) => {
|
||||
const fromCoord = getAirportCoord(from);
|
||||
const toCoord = getAirportCoord(to);
|
||||
return [fromCoord, toCoord];
|
||||
});
|
||||
|
||||
chart.value.setOption({
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
},
|
||||
chart.value?.setOption({
|
||||
textStyle: { ...DEMO_TEXT_STYLE },
|
||||
title: {
|
||||
text: "World Flights",
|
||||
top: "5%",
|
||||
@ -54,11 +90,11 @@ function load() {
|
||||
},
|
||||
backgroundColor: "#003",
|
||||
tooltip: {
|
||||
formatter(param) {
|
||||
const route = data.routes[param.dataIndex];
|
||||
return (
|
||||
data.airports[route[1]][1] + " > " + data.airports[route[2]][1]
|
||||
);
|
||||
formatter({ dataIndex }: { dataIndex: number }) {
|
||||
const route = rawData.routes[dataIndex];
|
||||
const fromName = rawData.airports[route[1]][1];
|
||||
const toName = rawData.airports[route[2]][1];
|
||||
return `${fromName} > ${toName}`;
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
@ -86,18 +122,19 @@ function load() {
|
||||
blendMode: "lighter",
|
||||
},
|
||||
],
|
||||
});
|
||||
} satisfies Option);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="manual" title="Manual updates">
|
||||
<v-chart
|
||||
<VExample id="manual" title="Manual updates">
|
||||
<VChart
|
||||
ref="chart"
|
||||
autoresize
|
||||
:loading="loading"
|
||||
:loading-options="loadingOptions"
|
||||
:init-options="initOptions"
|
||||
style="background-color: #003"
|
||||
manual-update
|
||||
/>
|
||||
@ -110,5 +147,5 @@ function load() {
|
||||
<button :disabled="loaded" @click="load">Load</button>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</VExample>
|
||||
</template>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { use } from "echarts/core";
|
||||
import { PieChart } from "echarts/charts";
|
||||
import {
|
||||
@ -8,6 +8,8 @@ import {
|
||||
TooltipComponent,
|
||||
} from "echarts/components";
|
||||
import { shallowRef, onMounted, onUnmounted } from "vue";
|
||||
import type { Option } from "../../src/types";
|
||||
import type { PieSeriesOption } from "echarts/charts";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/pie";
|
||||
@ -20,10 +22,27 @@ use([
|
||||
TooltipComponent,
|
||||
]);
|
||||
|
||||
const option = shallowRef(getData());
|
||||
const pie = shallowRef(null);
|
||||
type ChartInstance = InstanceType<typeof VChart>;
|
||||
|
||||
let timer = null;
|
||||
const option = shallowRef<Option>(getData());
|
||||
const pie = shallowRef<ChartInstance | null>(null);
|
||||
|
||||
let timer: number | undefined;
|
||||
|
||||
function getPieSeries(option: Option | undefined): PieSeriesOption | null {
|
||||
if (!option) {
|
||||
return null;
|
||||
}
|
||||
const series = option.series;
|
||||
const firstSeries = Array.isArray(series) ? series[0] : series;
|
||||
if (!firstSeries || typeof firstSeries !== "object") {
|
||||
return null;
|
||||
}
|
||||
if ((firstSeries as PieSeriesOption).type === "pie") {
|
||||
return firstSeries as PieSeriesOption;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
startActions();
|
||||
@ -33,10 +52,12 @@ onUnmounted(() => {
|
||||
stopActions();
|
||||
});
|
||||
|
||||
function startActions() {
|
||||
function startActions(): void {
|
||||
let dataIndex = -1;
|
||||
|
||||
const dataLen = option.value?.series?.[0]?.data?.length || 0;
|
||||
const series = getPieSeries(option.value);
|
||||
const data = Array.isArray(series?.data) ? series.data : [];
|
||||
const dataLen = data.length;
|
||||
|
||||
if (!pie.value || dataLen === 0) {
|
||||
return;
|
||||
@ -44,25 +65,28 @@ function startActions() {
|
||||
|
||||
clearInterval(timer);
|
||||
|
||||
timer = setInterval(() => {
|
||||
if (!pie.value) {
|
||||
clearInterval(timer);
|
||||
|
||||
timer = window.setInterval(() => {
|
||||
const chart = pie.value;
|
||||
if (!chart) {
|
||||
if (timer !== undefined) {
|
||||
clearInterval(timer);
|
||||
timer = undefined;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
pie.value.dispatchAction({
|
||||
chart.dispatchAction({
|
||||
type: "downplay",
|
||||
seriesIndex: 0,
|
||||
dataIndex,
|
||||
});
|
||||
dataIndex = (dataIndex + 1) % dataLen;
|
||||
pie.value.dispatchAction({
|
||||
chart.dispatchAction({
|
||||
type: "highlight",
|
||||
seriesIndex: 0,
|
||||
dataIndex,
|
||||
});
|
||||
pie.value.dispatchAction({
|
||||
chart.dispatchAction({
|
||||
type: "showTip",
|
||||
seriesIndex: 0,
|
||||
dataIndex,
|
||||
@ -70,13 +94,16 @@ function startActions() {
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function stopActions() {
|
||||
clearInterval(timer);
|
||||
function stopActions(): void {
|
||||
if (timer !== undefined) {
|
||||
clearInterval(timer);
|
||||
timer = undefined;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="pie" title="Pie chart" desc="(with action dispatch)">
|
||||
<v-chart ref="pie" :option="option" autoresize />
|
||||
</v-example>
|
||||
<VExample id="pie" title="Pie chart" desc="action dispatch">
|
||||
<VChart ref="pie" :option="option" autoresize />
|
||||
</VExample>
|
||||
</template>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { use } from "echarts/core";
|
||||
import { LineChart } from "echarts/charts";
|
||||
import {
|
||||
@ -7,10 +7,12 @@ import {
|
||||
LegendComponent,
|
||||
TooltipComponent,
|
||||
} from "echarts/components";
|
||||
import { computed, shallowRef } from "vue";
|
||||
import { computed, shallowRef, watch } from "vue";
|
||||
import type { LoadingOptions, Option, Theme } from "../../src/types";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/polar";
|
||||
import { useDemoDark } from "../composables/useDemoDark";
|
||||
|
||||
use([
|
||||
LineChart,
|
||||
@ -20,47 +22,61 @@ use([
|
||||
TooltipComponent,
|
||||
]);
|
||||
|
||||
const option = shallowRef(getData());
|
||||
const theme = shallowRef("dark");
|
||||
const isDark = useDemoDark();
|
||||
const themeSelection = shallowRef<"dark" | "default">(
|
||||
isDark.value ? "dark" : "default",
|
||||
);
|
||||
const option = shallowRef<Option>(getData());
|
||||
const loading = shallowRef(false);
|
||||
const loadingOptions = computed(() =>
|
||||
theme.value === "dark"
|
||||
|
||||
const theme = computed<Theme | undefined>(() =>
|
||||
themeSelection.value === "dark" ? "dark" : undefined,
|
||||
);
|
||||
|
||||
const loadingOptions = computed<LoadingOptions | undefined>(() =>
|
||||
themeSelection.value === "dark"
|
||||
? {
|
||||
color: "#fff",
|
||||
textColor: "#fff",
|
||||
maskColor: "rgba(0, 0, 0, 0.7)",
|
||||
}
|
||||
: null,
|
||||
: undefined,
|
||||
);
|
||||
const style = computed(() => {
|
||||
return theme.value === "dark"
|
||||
? loading.value
|
||||
? "background-color: #05040d"
|
||||
: "background-color: #100c2a"
|
||||
: "";
|
||||
|
||||
const chartStyle = computed(() => {
|
||||
if (themeSelection.value !== "dark") {
|
||||
return "";
|
||||
}
|
||||
return loading.value
|
||||
? "background-color: #05040d"
|
||||
: "background-color: #100c2a";
|
||||
});
|
||||
|
||||
watch(isDark, (value) => {
|
||||
themeSelection.value = value ? "dark" : "default";
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="polar" title="Polar plot" desc="(with built-in theme)">
|
||||
<v-chart
|
||||
<VExample id="polar" title="Polar plot" desc="built-in theme">
|
||||
<VChart
|
||||
:option="option"
|
||||
autoresize
|
||||
:loading="loading"
|
||||
:loading-options="loadingOptions"
|
||||
:theme="theme"
|
||||
:style="style"
|
||||
:style="chartStyle"
|
||||
/>
|
||||
<template #extra>
|
||||
<p class="actions">
|
||||
Theme
|
||||
<select v-model="theme">
|
||||
<option :value="null">Default</option>
|
||||
<select v-model="themeSelection">
|
||||
<option value="default">Default</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
<input id="loading-check" type="checkbox" v-model="loading" />
|
||||
<input id="loading-check" v-model="loading" type="checkbox" />
|
||||
<label for="loading-check">Loading</label>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</VExample>
|
||||
</template>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { use } from "echarts/core";
|
||||
import { RadarChart } from "echarts/charts";
|
||||
import {
|
||||
@ -6,7 +6,7 @@ import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
} from "echarts/components";
|
||||
import { shallowRef } from "vue";
|
||||
import { computed, shallowRef } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import { useScoreStore } from "../data/radar";
|
||||
@ -14,37 +14,38 @@ import { useScoreStore } from "../data/radar";
|
||||
use([RadarChart, PolarComponent, TitleComponent, TooltipComponent]);
|
||||
|
||||
const { metrics, getRadarData, increase, isMax, isMin } = useScoreStore();
|
||||
|
||||
const metricIndex = shallowRef(0);
|
||||
|
||||
const option = computed(() => getRadarData(metricIndex.value));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="radar" title="Radar chart" desc="(with Pinia integration)">
|
||||
<v-chart :option="getRadarData(metricIndex)" autoresize />
|
||||
<VExample id="radar" title="Radar chart" desc="Pinia integration">
|
||||
<VChart :option="option" autoresize />
|
||||
<template #extra>
|
||||
<p class="actions">
|
||||
<select v-model="metricIndex">
|
||||
<select v-model.number="metricIndex">
|
||||
<option
|
||||
v-for="(metric, index) in metrics"
|
||||
:value="index"
|
||||
:key="index"
|
||||
:value="index"
|
||||
>
|
||||
{{ metric }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
@click="increase(metricIndex, 1)"
|
||||
:disabled="isMax(metricIndex)"
|
||||
@click="increase(metricIndex, 1)"
|
||||
>
|
||||
Increase
|
||||
</button>
|
||||
<button
|
||||
@click="increase(metricIndex, -1)"
|
||||
:disabled="isMin(metricIndex)"
|
||||
@click="increase(metricIndex, -1)"
|
||||
>
|
||||
Decrease
|
||||
</button>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</VExample>
|
||||
</template>
|
||||
|
||||
@ -1,23 +1,31 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { use } from "echarts/core";
|
||||
import { ScatterChart } from "echarts/charts";
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent,
|
||||
} from "echarts/components";
|
||||
import { shallowRef } from "vue";
|
||||
import type { Option } from "../../src/types";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/scatter";
|
||||
|
||||
use([ScatterChart, GridComponent, TitleComponent, LegendComponent]);
|
||||
use([
|
||||
ScatterChart,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent,
|
||||
]);
|
||||
|
||||
const option = shallowRef(getData());
|
||||
const option = shallowRef<Option>(getData());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="scatter" title="Scatter plot" desc="(with gradient)">
|
||||
<v-chart :option="option" autoresize />
|
||||
</v-example>
|
||||
<VExample id="scatter" title="Scatter plot" desc="gradient">
|
||||
<VChart :option="option" autoresize />
|
||||
</VExample>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user