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

build: migrate demo from webpack to Vite (#832)

Browse Source
This commit is contained in:
Yue JIN
2025-05-25 00:24:38 +08:00
committed by Justineo
parent 473fed37a2
commit 077bd3ec40
52 changed files with 745 additions and 7408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
demo/examples/Example.vue Normal file
View 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>