javascript/vueecharts
1
0
Fork 0
mirror of https://github.com/ecomfe/vue-echarts.git synced 2025-10-31 08:57:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: refine demo

Browse Source
This commit is contained in:
Justineo
2023-08-22 19:57:16 +08:00
parent 03a3a6a401
commit eb59b4b185
7 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/demo/Demo.vue
View File

@ -247,13 +247,15 @@ select {
} }
figure { figure {
display: inline-block; display: flex;
position: relative; justify-content: center;
width: fit-content;
margin: 2em auto; margin: 2em auto;
.echarts { .echarts {
width: calc(60vw + 4em);
height: 360px; height: 360px;
min-width: calc(40vw + 4em); max-width: 720px;
padding: 1.5em 2em; padding: 1.5em 2em;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px; border-radius: 8px;
@ -312,9 +314,6 @@ figure {
@media (max-width: 980px) { @media (max-width: 980px) {
p { p {
display: flex;
justify-content: center;
select { select {
text-indent: calc(50% - 1em); text-indent: calc(50% - 1em);
} }
@ -352,6 +351,11 @@ figure {
} }
} }
.actions {
display: flex;
justify-content: center;
}
figure { figure {
width: 100vw; width: 100vw;
margin: 1em auto; margin: 1em auto;
@ -359,7 +363,7 @@ figure {
.echarts { .echarts {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
height: 75vw; height: 60vw;
padding: 1em 0; padding: 1em 0;
border: none; border: none;
border-radius: 0; border-radius: 0;

2
src/demo/examples/BarChart.vue
View File

@ -69,7 +69,7 @@ function refresh() {
second{{ seconds > 1 ? "s" : "" }}... second{{ seconds > 1 ? "s" : "" }}...
</small> </small>
</p> </p>
<p> <p class="actions">
<button @click="refresh" :disabled="seconds > 0">Refresh</button> <button @click="refresh" :disabled="seconds > 0">Refresh</button>
</p> </p>
</template> </template>

2
src/demo/examples/ConnectChart.vue
View File

@ -45,7 +45,7 @@ watch(
<v-chart :option="c2" group="radiance" autoresize /> <v-chart :option="c2" group="radiance" autoresize />
</template> </template>
<template #extra> <template #extra>
<p> <p class="actions">
<label> <label>
<input type="checkbox" v-model="connected" /> <input type="checkbox" v-model="connected" />
Connected Connected

2
src/demo/examples/GeoChart.vue
View File

@ -51,7 +51,7 @@ function convert() {
style="background-color: #404a59" style="background-color: #404a59"
/> />
<template #extra> <template #extra>
<p> <p class="actions">
<button @click="convert">Convert to image</button> <button @click="convert">Convert to image</button>
</p> </p>
<aside class="modal" :class="{ open }" @click="open = false"> <aside class="modal" :class="{ open }" @click="open = false">

2
src/demo/examples/ManualChart.vue
View File

@ -105,7 +105,7 @@ function load() {
You may use the <code>manual-update</code> prop for performance critical You may use the <code>manual-update</code> prop for performance critical
use cases. use cases.
</p> </p>
<p> <p class="actions">
<button :disabled="loaded" @click="load">Load</button> <button :disabled="loaded" @click="load">Load</button>
</p> </p>
</template> </template>

2
src/demo/examples/PolarChart.vue
View File

@ -33,7 +33,7 @@ const theme = shallowRef("dark");
:style="theme === 'dark' ? 'background-color: #100c2a' : ''" :style="theme === 'dark' ? 'background-color: #100c2a' : ''"
/> />
<template #extra> <template #extra>
<p> <p class="actions">
Theme Theme
<select v-model="theme"> <select v-model="theme">
<option :value="null">Default</option> <option :value="null">Default</option>

2
src/demo/examples/RadarChart.vue
View File

@ -22,7 +22,7 @@ const metricIndex = shallowRef(0);
<v-example id="radar" title="Radar chart" desc="(with Pinia integration)"> <v-example id="radar" title="Radar chart" desc="(with Pinia integration)">
<v-chart :option="getRadarData(metricIndex)" autoresize /> <v-chart :option="getRadarData(metricIndex)" autoresize />
<template #extra> <template #extra>
<p> <p class="actions">
<select v-model="metricIndex"> <select v-model="metricIndex">
<option <option
v-for="(metric, index) in metrics" v-for="(metric, index) in metrics"