新增布局首页和echarts
This commit is contained in:
zouzhibing
parent
fe07b79e67
commit
c4220d14cb
|
|
@ -13,5 +13,6 @@
|
|||
<style lang="scss" scoped>
|
||||
.app-main{
|
||||
padding: 20px;
|
||||
padding-top: 70px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="m-layout-header">
|
||||
<div class="m-layout-header" :style="{left:`${isCollapse?'56':'210'}px`}">
|
||||
<div>
|
||||
<el-icon class="icon" v-if="isCollapse" @click="handleCollapse(false)"><expand /></el-icon>
|
||||
<el-icon class="icon" v-else @click="handleCollapse(true)"><fold/></el-icon>
|
||||
|
|
@ -92,7 +92,14 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
.m-layout-header{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background: white;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
z-index: 9999;
|
||||
right: 0;
|
||||
transition: left 0.28s;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -41,9 +41,10 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
.main-container{
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,13 +18,13 @@ export const constantRoutes: Array<RouteRecordRaw> = [
|
|||
path: '/',
|
||||
name: 'layout',
|
||||
component: Layout,
|
||||
redirect: '/dashboard',
|
||||
redirect: '/home',
|
||||
children: [
|
||||
{
|
||||
path: '/dashboard',
|
||||
component: () => import('@/views/dashboard/index.vue'),
|
||||
name: 'Dashboard',
|
||||
meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
|
||||
path: '/home',
|
||||
component: () => import('@/views/home/index.vue'),
|
||||
name: 'home',
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
},
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -19,10 +19,16 @@ const chartsRouter = {
|
|||
meta: { title: '折现图', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'other',
|
||||
component: () => import('@/views/charts/index.vue'),
|
||||
name: 'charts-other',
|
||||
meta: { title: '各种图标', noCache: true }
|
||||
path: 'simple',
|
||||
component: () => import('@/views/charts/simple.vue'),
|
||||
name: 'charts-simple',
|
||||
meta: { title: '简单图表', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'complex',
|
||||
component: () => import('@/views/charts/complex.vue'),
|
||||
name: 'charts-complex',
|
||||
meta: { title: '复杂图表', noCache: true }
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="width: 100%;overflow: auto;height: 100%">
|
||||
<div style="width: 100%;">
|
||||
<el-row class="row-bg" :gutter="10">
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
|
|
@ -15,29 +15,49 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>折线图</span>
|
||||
<span>柱状图</span>
|
||||
</div>
|
||||
</template>
|
||||
<line-charts height="200px" width="100%"/>
|
||||
<bar-charts height="200px" width="100%" id="bar"/>
|
||||
</el-card></el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>折线图</span>
|
||||
<span>饼图</span>
|
||||
</div>
|
||||
</template>
|
||||
<line-charts height="200px" width="100%"/>
|
||||
<pie-charts height="200px" width="100%" id="pie"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>折线图</span>
|
||||
<span>散点图</span>
|
||||
</div>
|
||||
</template>
|
||||
<line-charts height="200px" width="100%"/>
|
||||
<scatter-charts height="200px" width="100%" id="scatter"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>仪表盘</span>
|
||||
</div>
|
||||
</template>
|
||||
<gauge-charts height="200px" width="100%" id="gauge"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>漏斗图</span>
|
||||
</div>
|
||||
</template>
|
||||
<funnel-charts height="200px" width="100%" id="funnel"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -48,6 +68,11 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import LineCharts from './components/line.vue'
|
||||
import BarCharts from './components/bar.vue'
|
||||
import PieCharts from './components/pie.vue'
|
||||
import ScatterCharts from './components/scatter.vue'
|
||||
import GaugeCharts from './components/gauge.vue'
|
||||
import FunnelCharts from './components/funnel.vue'
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
type: 'candlestick',
|
||||
data: [
|
||||
[20, 34, 10, 38],
|
||||
[40, 35, 30, 50],
|
||||
[31, 38, 33, 44],
|
||||
[38, 15, 5, 42]
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
top: 0,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show:false,
|
||||
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
top: 30,
|
||||
bottom: 10,
|
||||
width: '80%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending',
|
||||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: 'Visit' },
|
||||
{ value: 40, name: 'Inquiry' },
|
||||
{ value: 20, name: 'Order' },
|
||||
{ value: 80, name: 'Click' },
|
||||
{ value: 100, name: 'Show' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
const options = {
|
||||
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Pressure',
|
||||
type: 'gauge',
|
||||
detail: {
|
||||
formatter: '{value}'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 50,
|
||||
name: 'SCORE'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
const axisData = ['Mon', 'Tue', 'Wed', 'Very Loooong Thu', 'Fri', 'Sat', 'Sun'];
|
||||
const data = axisData.map(function (item, i) {
|
||||
return Math.round(Math.random() * 1000 * (i + 1));
|
||||
});
|
||||
const links = data.map(function (item, i) {
|
||||
return {
|
||||
source: i,
|
||||
target: i + 1
|
||||
};
|
||||
});
|
||||
links.pop();
|
||||
const options = {
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: axisData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
coordinateSystem: 'cartesian2d',
|
||||
symbolSize: 40,
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [4, 10],
|
||||
data: data,
|
||||
links: links,
|
||||
lineStyle: {
|
||||
color: '#2f4554'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
let category = [];
|
||||
let dottedBase = +new Date();
|
||||
let lineData = [];
|
||||
let barData = [];
|
||||
|
||||
for (let i = 0; i < 20; i++) {
|
||||
let date = new Date((dottedBase += 3600 * 24 * 1000));
|
||||
category.push(
|
||||
[date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
|
||||
);
|
||||
let b = Math.random() * 200;
|
||||
let d = Math.random() * 200;
|
||||
barData.push(b);
|
||||
lineData.push(d + b);
|
||||
}
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
backgroundColor: '#0f375f',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['line', 'bar'],
|
||||
textStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
data: category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showAllSymbol: true,
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 15,
|
||||
data: lineData
|
||||
},
|
||||
{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#14c8d4' },
|
||||
{ offset: 1, color: '#43eec6' }
|
||||
])
|
||||
},
|
||||
data: barData
|
||||
},
|
||||
{
|
||||
name: 'line',
|
||||
type: 'bar',
|
||||
barGap: '-100%',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(20,200,212,0.5)' },
|
||||
{ offset: 0.2, color: 'rgba(20,200,212,0.2)' },
|
||||
{ offset: 1, color: 'rgba(20,200,212,0)' }
|
||||
])
|
||||
},
|
||||
z: -12,
|
||||
data: lineData
|
||||
},
|
||||
{
|
||||
name: 'dotted',
|
||||
type: 'pictorialBar',
|
||||
symbol: 'rect',
|
||||
itemStyle: {
|
||||
color: '#0f375f'
|
||||
},
|
||||
symbolRepeat: true,
|
||||
symbolSize: [12, 4],
|
||||
symbolMargin: 1,
|
||||
z: -10,
|
||||
data: lineData
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '0%',
|
||||
left: 'center'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
// title: {
|
||||
// text: 'Basic Radar Chart'
|
||||
// },
|
||||
legend: {
|
||||
show:false,
|
||||
data: ['Allocated Budget', 'Actual Spending']
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
indicator: [
|
||||
{ name: 'Sales', max: 6500 },
|
||||
{ name: 'Administration', max: 16000 },
|
||||
{ name: 'Information Technology', max: 30000 },
|
||||
{ name: 'Customer Support', max: 38000 },
|
||||
{ name: 'Development', max: 52000 },
|
||||
{ name: 'Marketing', max: 25000 }
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Budget vs spending',
|
||||
type: 'radar',
|
||||
data: [
|
||||
{
|
||||
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
{
|
||||
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||
name: 'Actual Spending'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
symbolSize: 20,
|
||||
data: [
|
||||
[10.0, 8.04],
|
||||
[8.07, 6.95],
|
||||
[13.0, 7.58],
|
||||
[9.05, 8.81],
|
||||
[11.0, 8.33],
|
||||
[14.0, 7.66],
|
||||
[13.4, 6.81],
|
||||
[10.0, 6.33],
|
||||
[14.0, 8.96],
|
||||
[12.5, 6.82],
|
||||
[9.15, 7.2],
|
||||
[11.5, 7.2],
|
||||
[3.03, 4.23],
|
||||
[12.2, 7.83],
|
||||
[2.02, 4.47],
|
||||
[1.05, 3.33],
|
||||
[4.05, 4.96],
|
||||
[6.03, 7.24],
|
||||
[12.0, 6.26],
|
||||
[12.0, 8.84],
|
||||
[7.08, 5.82],
|
||||
[5.02, 5.68]
|
||||
],
|
||||
type: 'scatter'
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div style="width: 100%;">
|
||||
<el-row class="row-bg" :gutter="10">
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>折线图</span>
|
||||
</div>
|
||||
</template>
|
||||
<line-charts height="200px" width="100%"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>柱状图</span>
|
||||
</div>
|
||||
</template>
|
||||
<bar-charts height="200px" width="100%" id="bar"/>
|
||||
</el-card></el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>饼图</span>
|
||||
</div>
|
||||
</template>
|
||||
<pie-charts height="200px" width="100%" id="pie"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>散点图</span>
|
||||
</div>
|
||||
</template>
|
||||
<scatter-charts height="200px" width="100%" id="scatter"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>仪表盘</span>
|
||||
</div>
|
||||
</template>
|
||||
<gauge-charts height="200px" width="100%" id="gauge"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>漏斗图</span>
|
||||
</div>
|
||||
</template>
|
||||
<funnel-charts height="200px" width="100%" id="funnel"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>K 线图</span>
|
||||
</div>
|
||||
</template>
|
||||
<candlestick-charts height="200px" width="100%" id="candlestick"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>雷达图</span>
|
||||
</div>
|
||||
</template>
|
||||
<radar-charts height="200px" width="100%" id="radar"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>雷达图</span>
|
||||
</div>
|
||||
</template>
|
||||
<graph-charts height="200px" width="100%" id="graph"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>虚线柱状图效果</span>
|
||||
</div>
|
||||
</template>
|
||||
<pictorial-bar height="200px" width="100%" id="pictorial"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import LineCharts from './components/line.vue'
|
||||
import BarCharts from './components/bar.vue'
|
||||
import PieCharts from './components/pie.vue'
|
||||
import ScatterCharts from './components/scatter.vue'
|
||||
import GaugeCharts from './components/gauge.vue'
|
||||
import FunnelCharts from './components/funnel.vue'
|
||||
import CandlestickCharts from './components/candlestick.vue'
|
||||
import RadarCharts from './components/radar.vue'
|
||||
import GraphCharts from './components/graph.vue'
|
||||
import PictorialBarCharts from './components/pictorialBar.vue'
|
||||
import PictorialBar from "@/views/charts/components/pictorialBar.vue";
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<el-row class="row-bg" :gutter="10">
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<div class="personal">
|
||||
<div>
|
||||
<el-avatar size="50" :src="circleUrl" />
|
||||
</div>
|
||||
<div class="name"></div>
|
||||
<div class="description"></div>
|
||||
<div class="list">
|
||||
<div>昵称：有你</div>
|
||||
<div>职业：前端开发</div>
|
||||
<div>公司：小公司</div>
|
||||
<div>年龄：1993/09</div>
|
||||
<div>性别：男</div>
|
||||
<div>现住址：中国-浙江-杭州</div>
|
||||
<div>邮箱：1135957121@qq.com</div>
|
||||
<div>技术栈：JavaScript、HTML、CSS、Vue、Node、React</div>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="margin-bottom: 15px"><h5>个性标签</h5></div>
|
||||
<div>
|
||||
<el-tag style="margin-right: 10px">怕麻烦</el-tag>
|
||||
<el-tag style="margin-right: 10px">健身运动</el-tag>
|
||||
<el-tag style="margin-right: 10px">睡觉</el-tag>
|
||||
<el-tag style="margin-right: 10px">漫威</el-tag>
|
||||
<el-tag>向往</el-tag>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="margin-bottom: 15px"><h5>最喜欢的一句话</h5></div>
|
||||
<div>---------- 开心最重要</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="16">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>系列开源产品</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="display: flex">
|
||||
<el-card style="flex: 1;margin-right: 20px" class="card-item">
|
||||
<div style="color: white;margin-bottom: 10px"><h3>zb-table</h3></div>
|
||||
<div style="font-size: 12px;color: white">uniapp 表格组件 支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多端</div>
|
||||
</el-card>
|
||||
<el-card style="flex: 1;" class="card-item">
|
||||
<div style="color: white;margin-bottom: 10px"><h3>vue-admin-plus</h3></div>
|
||||
<div style="font-size: 12px;color: white">系统基于vue3+vuex+ element-plus+ts后台管理系统</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {ref} from "vue";
|
||||
|
||||
const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.personal{
|
||||
.name{
|
||||
margin-top: 15px;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: rgb(38, 38, 38);
|
||||
}
|
||||
.description{
|
||||
margin-top: 8px;
|
||||
}
|
||||
.list{
|
||||
margin-top: 18px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
//height: 100%;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.card-item{
|
||||
|
||||
background: linear-gradient(50deg, #1890ff, #77e19d);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue