Skip to content

Commit

Permalink
[Add] support echarts
Browse files Browse the repository at this point in the history
  • Loading branch information
JunyaoHu committed Jan 9, 2024
1 parent 63d6f10 commit 14d3d1e
Show file tree
Hide file tree
Showing 10 changed files with 192 additions and 13 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta name="keywords" content="Project Template, Project Page">
<meta name="description" content="academic-project-page-template-vue">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>academic project page template vue</title>
<title>Academic Project Page Template Vue</title>
</head>
<body>
<div id="app"></div>
Expand Down
80 changes: 79 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@
"preview": "vite preview"
},
"dependencies": {
"echarts": "^5.4.3",
"element-plus": "^2.3.8",
"swiper": "^10.1.0",
"vue": "^3.3.4"
"vue": "^3.3.4",
"vue-echarts": "^6.6.8"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
Expand Down
5 changes: 3 additions & 2 deletions src/components/Footer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@ export default {
<el-row>
<el-col :xs="20" :sm="20" :md="16" :lg="12" :xl="12">
<p class="footer">
The template is inspired by <a class="footer_link" href="https://github.com/nerfies/nerfies.github.io">Nerfies</a>, powered by <a class="footer_link" href="https://vuejs.org/">Vue.</a><br/>
You can fork🛠️ / star✨/ PR📃 this template from <a class="footer_link" href="https://github.com/JunyaoHu/Our-Project-Template-is-All-You-Need">Our Project Template is All You Need</a>
The template is inspired by <a class="footer_link" href="https://github.com/nerfies/nerfies.github.io">Nerfies</a>, powered by <a class="footer_link" href="https://vuejs.org/">Vue</a>.<br/>
You can fork🛠️ / star✨/ PR📃 this template<br/>
from <a class="footer_link" href="https://github.com/JunyaoHu/academic-project-page-template-vue">Academic Project Page Template Vue</a>.
</p>
</el-col>
</el-row>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ export default {
data() {
return {
home: {
name: "Home",
name: "My Blog",
link: "https://junyaohu.github.io/",
svg: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M543.8 287.6c17 0 32-14 32-32.1c1-9-3-17-11-24L512 185V64c0-17.7-14.3-32-32-32H448c-17.7 0-32 14.3-32 32v36.7L309.5 7c-6-5-14-7-21-7s-15 1-22 8L10 231.5c-7 7-10 15-10 24c0 18 14 32.1 32 32.1h32v69.7c-.1 .9-.1 1.8-.1 2.8V472c0 22.1 17.9 40 40 40h16c1.2 0 2.4-.1 3.6-.2c1.5 .1 3 .2 4.5 .2H160h24c22.1 0 40-17.9 40-40V448 384c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32v64 24c0 22.1 17.9 40 40 40h24 32.5c1.4 0 2.8 0 4.2-.1c1.1 .1 2.2 .1 3.3 .1h16c22.1 0 40-17.9 40-40V455.8c.3-2.6 .5-5.3 .5-8.1l-.7-160.2h32z"/></svg>'
},
logo: {
name: "OPT",
name: "Template",
link: "#",
svg: '<svg xmlns="http://www.w3.org/2000/svg" height="1.15em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>'
},
Expand Down
3 changes: 3 additions & 0 deletions src/components/Main.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import BibTeX from './sections/BibTeX.vue'
import Carousel from './sections/Carousel.vue'
import Video from './sections/Video.vue'
import ImageSlider from './sections/ImageSlider.vue'
import Echart from './sections/Echart.vue'
export default {
components: {
Expand All @@ -14,6 +15,7 @@ export default {
Carousel,
Video,
ImageSlider,
Echart,
}
}
</script>
Expand All @@ -23,6 +25,7 @@ export default {
<Video/>
<Carousel/>
<Abstract/>
<Echart/>
<ImageSlider/>
<BibTeX/>
</template>
4 changes: 2 additions & 2 deletions src/components/sections/BibTeX.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ export default {
return {
bibtex: [
"@article{junyaohu2023template,",
" title={Our Project Template is All You Need},",
" title={Academic Project Page Template Vue},",
" author={Hu, Junyao},",
" journal={Something},",
" journal={GitHub},",
" year={2023}",
"}",
],
Expand Down
92 changes: 92 additions & 0 deletions src/components/sections/Echart.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
]);
export default {
components: {
VChart,
},
setup() {
provide('THEME_KEY', 'light');
},
data() {
return {
option: {
title: {
text: 'Traffic Sources',
left: 'center',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'vertical',
left: 'right',
top: 'center',
data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
},
series: [
{
name: 'Traffic Sources',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: 'Direct' },
{ value: 310, name: 'Email' },
{ value: 234, name: 'Ad Networks' },
{ value: 135, name: 'Video Ads' },
{ value: 1548, name: 'Search Engines' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
}
}
}
}
</script>

<template>
<div>
<el-row>
<h1 class="title1">Quantitative Results</h1>
</el-row>
<el-row>
<el-col :xs="20" :sm="20" :md="16" :lg="12" :xl="12">
<v-chart class="chart" :option="option" autoresize />
</el-col>
</el-row>
</div>

</template>

<style scoped>
.chart {
height: 320px;
}
</style>
2 changes: 1 addition & 1 deletion src/components/sections/ImageSlider.vue
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default {
<template>
<div class="bg">
<el-row>
<h1 class="title1">Image Slider</h1>
<h1 class="title1">Qualitative Results</h1>
</el-row>
<el-row>
<el-col>
Expand Down
9 changes: 6 additions & 3 deletions src/components/sections/Title.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,10 @@ export default {
homepage: "https://cv.nankai.edu.cn/"
},
],
emphasis: "Something that needs to be emphasized 🥰",
emphases: [
"This template project is still under development.",
"Welcome any suggestion. 🥰",
],
buttons: [
{
disabled: false,
Expand Down Expand Up @@ -108,8 +111,8 @@ export default {
</span>
</el-row>

<el-row class="emphasis">
{{ emphasis }}
<el-row class="emphasis" v-for="emphasis in emphases">
{{ emphasis }}
</el-row>

<el-row justify="center">
Expand Down

0 comments on commit 14d3d1e

Please sign in to comment.