mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-08-26 04:32:25 +08:00
build: migrate demo from webpack to Vite (#832)
This commit is contained in:
Yue JIN
77
demo/examples/BarChart.vue
Normal file
77
demo/examples/BarChart.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<script setup>
|
||||
import { use, registerTheme } from "echarts/core";
|
||||
import { BarChart } from "echarts/charts";
|
||||
import { GridComponent, DatasetComponent } from "echarts/components";
|
||||
import { shallowRef, onBeforeUnmount } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/bar";
|
||||
import theme from "../theme.json";
|
||||
|
||||
use([BarChart, DatasetComponent, GridComponent]);
|
||||
registerTheme("ovilia-green", theme);
|
||||
|
||||
const seconds = shallowRef(0);
|
||||
const loading = shallowRef(false);
|
||||
const loadingOptions = {
|
||||
text: "Loading…",
|
||||
color: "#4ea397",
|
||||
maskColor: "rgba(255, 255, 255, 0.4)"
|
||||
};
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
// simulating async data from server
|
||||
seconds.value = 3;
|
||||
loading.value = true;
|
||||
|
||||
timer = setInterval(tick, 1000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example
|
||||
id="bar"
|
||||
title="Bar chart"
|
||||
desc="(with async data & custom theme)"
|
||||
>
|
||||
<v-chart
|
||||
:option="option"
|
||||
theme="ovilia-green"
|
||||
autoresize
|
||||
:loading="loading"
|
||||
:loadingOptions="loadingOptions"
|
||||
/>
|
||||
<template #extra>
|
||||
<p v-if="seconds <= 0">
|
||||
<small>Loaded.</small>
|
||||
</p>
|
||||
<p v-else>
|
||||
<small>
|
||||
Data coming in
|
||||
<b>{{ seconds }}</b>
|
||||
second{{ seconds > 1 ? "s" : "" }}...
|
||||
</small>
|
||||
</p>
|
||||
<p class="actions">
|
||||
<button @click="refresh" :disabled="seconds > 0">Refresh</button>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</template>
|
||||
54
demo/examples/ConnectChart.vue
Normal file
54
demo/examples/ConnectChart.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import { use, connect, disconnect } from "echarts/core";
|
||||
import { ScatterChart } from "echarts/charts";
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
VisualMapComponent,
|
||||
TooltipComponent
|
||||
} from "echarts/components";
|
||||
import { shallowRef, watch } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/connect";
|
||||
|
||||
use([
|
||||
ScatterChart,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
VisualMapComponent,
|
||||
TooltipComponent
|
||||
]);
|
||||
|
||||
const [c1, c2] = getData().map(shallowRef);
|
||||
const connected = shallowRef(true);
|
||||
|
||||
watch(
|
||||
connected,
|
||||
value => {
|
||||
if (value) {
|
||||
connect("radiance");
|
||||
} else {
|
||||
disconnect("radiance");
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="connect" title="Connectable charts" split>
|
||||
<template #start>
|
||||
<v-chart :option="c1" group="radiance" autoresize />
|
||||
</template>
|
||||
<template #end>
|
||||
<v-chart :option="c2" group="radiance" autoresize />
|
||||
</template>
|
||||
<template #extra>
|
||||
<p class="actions">
|
||||
<input id="connected-check" type="checkbox" v-model="connected" />
|
||||
<label for="connected-check">Connected</label>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</template>
|
||||
95
demo/examples/Example.vue
Normal file
95
demo/examples/Example.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<h3 :id="id">
|
||||
<a :href="`#${id}`">
|
||||
{{ title }}
|
||||
<small v-if="desc">{{ desc }}</small>
|
||||
</a>
|
||||
</h3>
|
||||
<section>
|
||||
<figure class="fig hero" v-if="!split">
|
||||
<slot />
|
||||
</figure>
|
||||
<div class="split" v-else>
|
||||
<figure class="fig half">
|
||||
<slot name="start" />
|
||||
</figure>
|
||||
<figure class="fig half">
|
||||
<slot name="end" />
|
||||
</figure>
|
||||
</div>
|
||||
<slot name="extra" />
|
||||
</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;
|
||||
|
||||
.echarts {
|
||||
width: calc(60vw + 4em);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.split {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.fig {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.fig {
|
||||
width: 100vw;
|
||||
margin: 1em auto;
|
||||
|
||||
.echarts {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 60vw;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 980px) {
|
||||
.fig.half {
|
||||
.echarts {
|
||||
width: 28vw;
|
||||
min-width: 240px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
62
demo/examples/GeoChart.vue
Normal file
62
demo/examples/GeoChart.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<script setup>
|
||||
import { use, registerMap } from "echarts/core";
|
||||
import { ScatterChart, EffectScatterChart } from "echarts/charts";
|
||||
import {
|
||||
GeoComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent
|
||||
} from "echarts/components";
|
||||
import { shallowRef } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/map";
|
||||
import chinaMap from "../china.json";
|
||||
|
||||
use([
|
||||
ScatterChart,
|
||||
EffectScatterChart,
|
||||
GeoComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent
|
||||
]);
|
||||
|
||||
registerMap("china", chinaMap);
|
||||
|
||||
const option = shallowRef(getData());
|
||||
const map = shallowRef(null);
|
||||
const open = shallowRef(false);
|
||||
|
||||
let img = null;
|
||||
|
||||
function convert() {
|
||||
img = {
|
||||
src: map.value.getDataURL({
|
||||
pixelRatio: window.devicePixelRatio || 1
|
||||
}),
|
||||
width: map.value.getWidth(),
|
||||
height: map.value.getHeight()
|
||||
};
|
||||
open.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="map" title="Map" desc="(with GeoJSON & image converter)">
|
||||
<v-chart
|
||||
ref="map"
|
||||
:option="option"
|
||||
autoresize
|
||||
style="background-color: #404a59"
|
||||
/>
|
||||
<template #extra>
|
||||
<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>
|
||||
</template>
|
||||
</v-example>
|
||||
</template>
|
||||
111
demo/examples/GlChart.vue
Normal file
111
demo/examples/GlChart.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<script setup>
|
||||
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 VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import world from "../assets/world.jpg";
|
||||
import starfield from "../assets/starfield.jpg";
|
||||
|
||||
use([Bar3DChart, VisualMapComponent, GlobeComponent]);
|
||||
|
||||
const option = shallowRef();
|
||||
const loading = shallowRef(true);
|
||||
|
||||
const initOptions = {
|
||||
renderer: "canvas"
|
||||
};
|
||||
|
||||
const loadingOptions = {
|
||||
text: "Loading...",
|
||||
color: "#000",
|
||||
textColor: "#fff",
|
||||
maskColor: "transparent"
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
import("../data/population.json").then(({ default: data }) => {
|
||||
loading.value = false;
|
||||
|
||||
data = data
|
||||
.filter(dataItem => dataItem[2] > 0)
|
||||
.map(dataItem => [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])]);
|
||||
|
||||
option.value = {
|
||||
backgroundColor: "#000",
|
||||
globe: {
|
||||
baseTexture: world,
|
||||
heightTexture: world,
|
||||
shading: "lambert",
|
||||
environment: starfield,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 2
|
||||
}
|
||||
},
|
||||
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: {
|
||||
color: "orange"
|
||||
}
|
||||
},
|
||||
outOfRange: {
|
||||
colorAlpha: 0
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar3D",
|
||||
coordinateSystem: "globe",
|
||||
data: data,
|
||||
barSize: 0.6,
|
||||
minHeight: 0.2,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
color: "orange"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="gl" title="GL charts" desc="(Globe & Bar3D)">
|
||||
<v-chart
|
||||
:option="option"
|
||||
:init-options="initOptions"
|
||||
autoresize
|
||||
:loading="loading"
|
||||
:loading-options="loadingOptions"
|
||||
style="background-color: #000"
|
||||
/>
|
||||
<template #extra>
|
||||
<p>
|
||||
You can use extension packs like
|
||||
<a href="https://github.com/ecomfe/echarts-gl">ECharts-GL</a>.
|
||||
</p>
|
||||
<p>
|
||||
<small>(You can only use the canvas renderer for GL charts.)</small>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</template>
|
||||
14
demo/examples/LogoChart.vue
Normal file
14
demo/examples/LogoChart.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<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>
|
||||
116
demo/examples/ManualChart.vue
Normal file
116
demo/examples/ManualChart.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<script setup>
|
||||
import { use, registerMap } from "echarts/core";
|
||||
import { LinesChart } from "echarts/charts";
|
||||
import {
|
||||
GeoComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent
|
||||
} from "echarts/components";
|
||||
import { shallowRef } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import worldMap from "../world.json";
|
||||
|
||||
use([LinesChart, GeoComponent, TitleComponent, TooltipComponent]);
|
||||
registerMap("world", worldMap);
|
||||
|
||||
const chart = shallowRef(null);
|
||||
const loading = shallowRef(false);
|
||||
const loaded = shallowRef(false);
|
||||
|
||||
const loadingOptions = {
|
||||
text: "",
|
||||
color: "#c23531",
|
||||
textColor: "rgba(255, 255, 255, 0.5)",
|
||||
maskColor: "#003",
|
||||
zlevel: 0
|
||||
};
|
||||
|
||||
function load() {
|
||||
loaded.value = true;
|
||||
loading.value = true;
|
||||
|
||||
import("../data/flight.json").then(({ default: data }) => {
|
||||
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])];
|
||||
});
|
||||
|
||||
chart.value.setOption({
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
|
||||
},
|
||||
title: {
|
||||
text: "World Flights",
|
||||
top: "5%",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "#eee"
|
||||
}
|
||||
},
|
||||
backgroundColor: "#003",
|
||||
tooltip: {
|
||||
formatter(param) {
|
||||
const route = data.routes[param.dataIndex];
|
||||
return (
|
||||
data.airports[route[1]][1] + " > " + data.airports[route[2]][1]
|
||||
);
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: "world",
|
||||
top: "15%",
|
||||
right: "5%",
|
||||
bottom: "5%",
|
||||
left: "5%",
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
borderColor: "#003",
|
||||
color: "#005"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "lines",
|
||||
coordinateSystem: "geo",
|
||||
data: routes,
|
||||
large: true,
|
||||
largeThreshold: 100,
|
||||
lineStyle: {
|
||||
opacity: 0.05,
|
||||
width: 0.5,
|
||||
curveness: 0.3
|
||||
},
|
||||
blendMode: "lighter"
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="manual" title="Manual updates">
|
||||
<v-chart
|
||||
ref="chart"
|
||||
autoresize
|
||||
:loading="loading"
|
||||
:loading-options="loadingOptions"
|
||||
style="background-color: #003"
|
||||
manual-update
|
||||
/>
|
||||
<template #extra>
|
||||
<p>
|
||||
You may use the <code>manual-update</code> prop for performance critical
|
||||
use cases.
|
||||
</p>
|
||||
<p class="actions">
|
||||
<button :disabled="loaded" @click="load">Load</button>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</template>
|
||||
82
demo/examples/PieChart.vue
Normal file
82
demo/examples/PieChart.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<script setup>
|
||||
import { use } from "echarts/core";
|
||||
import { PieChart } from "echarts/charts";
|
||||
import {
|
||||
PolarComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent
|
||||
} from "echarts/components";
|
||||
import { shallowRef, onMounted, onUnmounted } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/pie";
|
||||
|
||||
use([
|
||||
PieChart,
|
||||
PolarComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent
|
||||
]);
|
||||
|
||||
const option = shallowRef(getData());
|
||||
const pie = shallowRef(null);
|
||||
|
||||
let timer = null;
|
||||
|
||||
onMounted(() => {
|
||||
startActions();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopActions();
|
||||
});
|
||||
|
||||
function startActions() {
|
||||
let dataIndex = -1;
|
||||
|
||||
const dataLen = option.value?.series?.[0]?.data?.length || 0;
|
||||
|
||||
if (!pie.value || dataLen === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearInterval(timer);
|
||||
|
||||
timer = setInterval(() => {
|
||||
if (!pie.value) {
|
||||
clearInterval(timer);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
pie.value.dispatchAction({
|
||||
type: "downplay",
|
||||
seriesIndex: 0,
|
||||
dataIndex
|
||||
});
|
||||
dataIndex = (dataIndex + 1) % dataLen;
|
||||
pie.value.dispatchAction({
|
||||
type: "highlight",
|
||||
seriesIndex: 0,
|
||||
dataIndex
|
||||
});
|
||||
pie.value.dispatchAction({
|
||||
type: "showTip",
|
||||
seriesIndex: 0,
|
||||
dataIndex
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function stopActions() {
|
||||
clearInterval(timer);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="pie" title="Pie chart" desc="(with action dispatch)">
|
||||
<v-chart ref="pie" :option="option" autoresize />
|
||||
</v-example>
|
||||
</template>
|
||||
66
demo/examples/PolarChart.vue
Normal file
66
demo/examples/PolarChart.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
import { use } from "echarts/core";
|
||||
import { LineChart } from "echarts/charts";
|
||||
import {
|
||||
PolarComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent
|
||||
} from "echarts/components";
|
||||
import { computed, shallowRef } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/polar";
|
||||
|
||||
use([
|
||||
LineChart,
|
||||
PolarComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent
|
||||
]);
|
||||
|
||||
const option = shallowRef(getData());
|
||||
const theme = shallowRef("dark");
|
||||
const loading = shallowRef(false);
|
||||
const loadingOptions = computed(() =>
|
||||
theme.value === "dark"
|
||||
? {
|
||||
color: "#fff",
|
||||
textColor: "#fff",
|
||||
maskColor: "rgba(0, 0, 0, 0.7)"
|
||||
}
|
||||
: null
|
||||
);
|
||||
const style = computed(() => {
|
||||
return theme.value === "dark"
|
||||
? loading.value
|
||||
? "background-color: #05040d"
|
||||
: "background-color: #100c2a"
|
||||
: "";
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="polar" title="Polar plot" desc="(with built-in theme)">
|
||||
<v-chart
|
||||
:option="option"
|
||||
autoresize
|
||||
:loading="loading"
|
||||
:loading-options="loadingOptions"
|
||||
:theme="theme"
|
||||
:style="style"
|
||||
/>
|
||||
<template #extra>
|
||||
<p class="actions">
|
||||
Theme
|
||||
<select v-model="theme">
|
||||
<option :value="null">Default</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
<input id="loading-check" type="checkbox" v-model="loading" />
|
||||
<label for="loading-check">Loading</label>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</template>
|
||||
50
demo/examples/RadarChart.vue
Normal file
50
demo/examples/RadarChart.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<script setup>
|
||||
import { use } from "echarts/core";
|
||||
import { RadarChart } from "echarts/charts";
|
||||
import {
|
||||
PolarComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent
|
||||
} from "echarts/components";
|
||||
import { shallowRef } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import { useScoreStore } from "../data/radar";
|
||||
|
||||
use([RadarChart, PolarComponent, TitleComponent, TooltipComponent]);
|
||||
|
||||
const { metrics, getRadarData, increase, isMax, isMin } = useScoreStore();
|
||||
|
||||
const metricIndex = shallowRef(0);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="radar" title="Radar chart" desc="(with Pinia integration)">
|
||||
<v-chart :option="getRadarData(metricIndex)" autoresize />
|
||||
<template #extra>
|
||||
<p class="actions">
|
||||
<select v-model="metricIndex">
|
||||
<option
|
||||
v-for="(metric, index) in metrics"
|
||||
:value="index"
|
||||
:key="index"
|
||||
>
|
||||
{{ metric }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
@click="increase(metricIndex, 1)"
|
||||
:disabled="isMax(metricIndex)"
|
||||
>
|
||||
Increase
|
||||
</button>
|
||||
<button
|
||||
@click="increase(metricIndex, -1)"
|
||||
:disabled="isMin(metricIndex)"
|
||||
>
|
||||
Decrease
|
||||
</button>
|
||||
</p>
|
||||
</template>
|
||||
</v-example>
|
||||
</template>
|
||||
23
demo/examples/ScatterChart.vue
Normal file
23
demo/examples/ScatterChart.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
import { use } from "echarts/core";
|
||||
import { ScatterChart } from "echarts/charts";
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
LegendComponent
|
||||
} from "echarts/components";
|
||||
import { shallowRef } from "vue";
|
||||
import VChart from "../../src/ECharts";
|
||||
import VExample from "./Example.vue";
|
||||
import getData from "../data/scatter";
|
||||
|
||||
use([ScatterChart, GridComponent, TitleComponent, LegendComponent]);
|
||||
|
||||
const option = shallowRef(getData());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-example id="scatter" title="Scatter plot" desc="(with gradient)">
|
||||
<v-chart :option="option" autoresize />
|
||||
</v-example>
|
||||
</template>
|
||||
Reference in New Issue
Block a user