clear
Former-commit-id: e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly 5793d72d458b7eeaf28a097d026168cebc9fc256 [formerly 9c8de3644bd40a55711e618742e29cce390e4c5f]]]]] Former-commit-id: 05ca3c8da65f8583c142720628aa6ea71d2dbf45 Former-commit-id: 7a4d2fba696e901db86071ea2810e9c932c976ad Former-commit-id: c18d3689200ca0e528fbf9bf171f6e1b50131bc3 [formerly 455e9952ca890cd8ad882250cfb9eabd944d44ee] Former-commit-id: 021fa8191681fe4f22e9a9f40389831a847e9066 Former-commit-id: 1022b7792417ce366901b9d5284762a015dd6d26 Former-commit-id: bed799410be508713cac76b7c8cf02d4457fe996 Former-commit-id: f6787cfaac3404132ad1011e2707e08484708ca9 Former-commit-id: 7a8a3baca9ef30393744fd56def6d608b51dcddd
This commit is contained in:
liyang
@@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div class="page-404">
|
||||
<img :src="`${$assetsPublicPath}static/image/page/404/cover@2x.png`">
|
||||
<el-button class="d2-mt" @click="$router.replace({ path: '/' })">
|
||||
返回首页
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page-404 {
|
||||
background-color: #555555;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
img {
|
||||
width: 196px;
|
||||
@extend %unable-select;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<d2-demo-page-cover
|
||||
title="I AM D2ADMIN"
|
||||
sub-title="追求简约美感 & 上手即用的后台管理系统模板">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/d2admin.png`">
|
||||
</d2-demo-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
@@ -1,112 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export default {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 6,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#444"
|
||||
},
|
||||
"shape": {
|
||||
"type": "polygon",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 6
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 160,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": true,
|
||||
"speed": 10,
|
||||
"size_min": 40,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 200,
|
||||
"color": "#ffffff",
|
||||
"opacity": 1,
|
||||
"width": 2
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 8,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": false,
|
||||
"mode": "grab"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": false,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export default {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 80,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#DCDFE6"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 1,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 4,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": true,
|
||||
"distance": 150,
|
||||
"color": "#DCDFE6",
|
||||
"opacity": 0.4,
|
||||
"width": 2
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 6,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export default {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 160,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 1,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": true,
|
||||
"speed": 1,
|
||||
"opacity_min": 0,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 4,
|
||||
"size_min": 0.3,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 150,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 1
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 1,
|
||||
"direction": "none",
|
||||
"random": true,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 600
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "bubble"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 250,
|
||||
"size": 0,
|
||||
"duration": 2,
|
||||
"opacity": 0,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 400,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export default {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 400,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#fff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.5,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 10,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 500,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 2
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 6,
|
||||
"direction": "bottom",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "bubble"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 0.5
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 4,
|
||||
"duration": 0.3,
|
||||
"opacity": 1,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
@@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="layer bg" id="login"></div>
|
||||
<div class="layer flex-center">
|
||||
<!-- logo部分 -->
|
||||
<div class="logo-group">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/d2admin.png`" alt="logo">
|
||||
</div>
|
||||
<!-- 表单部分 -->
|
||||
<div class="form-group">
|
||||
<el-card>
|
||||
<el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin">
|
||||
<el-form-item prop="username">
|
||||
<el-input type="text" v-model="formLogin.username" placeholder="用户名">
|
||||
<i slot="prepend" class="fa fa-user-circle-o"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input type="password" v-model="formLogin.password" placeholder="密码">
|
||||
<i slot="prepend" class="fa fa-keyboard-o"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input type="text" v-model="formLogin.code" placeholder="- - - -">
|
||||
<template slot="prepend">验证码</template>
|
||||
<template slot="append">
|
||||
<img class="login-code" :src="`${$assetsPublicPath}static/image/login-code.png`">
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button @click="submit" type="primary" class="button-login">登录</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 帮助按钮 -->
|
||||
<el-button type="info" class="button-help">
|
||||
需要帮助
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
require('particles.js')
|
||||
// 配置地址
|
||||
// https://vincentgarreau.com/particles.js/#default
|
||||
import config from './config/default'
|
||||
import Cookies from 'js-cookie'
|
||||
import { mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formLogin: {
|
||||
username: 'admin',
|
||||
password: 'admin',
|
||||
code: 'v9am'
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 初始化例子插件
|
||||
particlesJS('login', config)
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminUsernameSet'
|
||||
]),
|
||||
// 提交登陆信息
|
||||
submit () {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
// 开始请求登录接口
|
||||
this.$axios({
|
||||
method: 'post',
|
||||
url: '/login',
|
||||
data: {
|
||||
username: this.formLogin.username,
|
||||
password: this.formLogin.password
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
this.$log('登录结果', res)
|
||||
// cookie 一天的有效期
|
||||
const setting = {
|
||||
expires: 1
|
||||
}
|
||||
// 设置 cookie 一定要存 uuid 和 token 两个 cookie，整个系统依赖这两个数据进行校验和存储
|
||||
Cookies.set('uuid', res.uuid, setting)
|
||||
Cookies.set('token', res.token, setting)
|
||||
// 设置 vuex
|
||||
this.d2adminUsernameSet(res.name)
|
||||
// 跳转路由
|
||||
this.$router.push({
|
||||
name: 'index'
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
this.$log('错误信息', err)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
@import '~@/assets/style/public.scss';
|
||||
.login-page {
|
||||
background-color: #EDF4FA;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
// 层
|
||||
.layer {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
&.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
// 背景
|
||||
.bg {
|
||||
canvas {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
// logo
|
||||
.logo-group {
|
||||
margin-top: -75px - 70px;
|
||||
position: relative;
|
||||
top: 75px;
|
||||
img {
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
// 登陆表单
|
||||
.form-group {
|
||||
width: 300px;
|
||||
// 重新设置卡片阴影
|
||||
.el-card {
|
||||
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
||||
.el-card__body {
|
||||
padding-top: 70px;
|
||||
}
|
||||
}
|
||||
// 登陆按钮
|
||||
.button-login {
|
||||
width: 100%;
|
||||
}
|
||||
// 输入框左边的图表区域缩窄
|
||||
.el-input-group__prepend {
|
||||
padding: 0px 14px;
|
||||
}
|
||||
.login-code {
|
||||
height: 40px - 2px;
|
||||
display: block;
|
||||
margin: 0px -20px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
// 帮助按钮
|
||||
.button-help {
|
||||
width: 300px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<d2-demo-page-cover
|
||||
title="设置"
|
||||
sub-title="系统设置">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/setting.png`">
|
||||
</d2-demo-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
@@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full" class="page">
|
||||
<template slot="header">D2Admin 版本检查</template>
|
||||
<div class="banner">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/d2admin.png`">
|
||||
</div>
|
||||
<div v-if="update" class="releases">
|
||||
<h1>有新版本 {{releases.tag_name}}</h1>
|
||||
<p>更新日期 {{dayjs(releases.created_at).format('YYYY年M月D日')}}</p>
|
||||
<a :href="releases.html_url" class="el-button el-button--primary d2-mb">{{releases.html_url}}</a>
|
||||
<d2-markdown key="update" :source="releases.body"/>
|
||||
</div>
|
||||
<div v-else class="up2date">
|
||||
<d2-markdown key="noupdate" :source="up2date"/>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<el-button
|
||||
:type="updateNotify ? 'primary' : 'default'"
|
||||
size="mini"
|
||||
@click="d2adminUpdateNotifySet(!updateNotify)">
|
||||
{{updateNotify ? '关闭更新提醒 (当前:打开)' : '打开更新提醒 (当前:关闭)'}}
|
||||
</el-button>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import up2date from './md/up-to-date.md'
|
||||
import dayjs from 'dayjs'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dayjs,
|
||||
up2date
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
version: state => state.d2admin.version,
|
||||
releases: state => state.d2admin.releases,
|
||||
update: state => state.d2admin.update,
|
||||
updateNotify: state => state.d2admin.updateNotify
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminUpdateNotifySet'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page {
|
||||
.banner {
|
||||
text-align: center;
|
||||
img {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
.releases {
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
.up2date {
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
已经是最新版本
|
||||
|
||||
[Github仓库](https://github.com/d2-projects/d2-admin)
|
||||
|
||||
[码云仓库](https://gitee.com/fairyever/d2-admin)
|
||||
|
||||
[中文文档](http://d2admin.fairyever.com/zh/)
|
||||
|
||||
[预览地址](https://fairyever.gitee.io/d2-admin-preview)
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full" class="page">
|
||||
custom theme setting coming soon
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page {
|
||||
// Your page style here
|
||||
// Do not use empty rulesets
|
||||
// If empty, delete it
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<d2-theme-list/>
|
||||
</d2-container>
|
||||
</template>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<d2-demo-page-cover
|
||||
title="示例业务页面"
|
||||
sub-title="暂时还没有什么 但是以后会有">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/business.png`">
|
||||
</d2-demo-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<d2-demo-page-cover
|
||||
title="图表"
|
||||
sub-title="集成图表组件">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/charts.png`">
|
||||
</d2-demo-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
@@ -1,9 +0,0 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
pubSetting: {
|
||||
height: '100%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-bar :data="chartData" v-bind="pubSetting"></ve-bar>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">指定指标维度</template>
|
||||
<div class="inner">
|
||||
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
dimension: ['日期'],
|
||||
metrics: ['访问用户']
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">排序条形图</template>
|
||||
<div class="inner">
|
||||
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
metrics: ['访问用户'],
|
||||
dataOrder: {
|
||||
label: '访问用户',
|
||||
order: 'desc'
|
||||
}
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">堆叠条形图</template>
|
||||
<div class="inner">
|
||||
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
stack: {
|
||||
'xxx': ['访问用户', '下单用户']
|
||||
}
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">纵轴为连续的数值轴</template>
|
||||
<div class="inner">
|
||||
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
yAxisType: 'value'
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': 1, '访问用户': 1393 },
|
||||
{ '日期': 2, '访问用户': 3530 },
|
||||
{ '日期': 5, '访问用户': 2923 },
|
||||
{ '日期': 10, '访问用户': 1723 },
|
||||
{ '日期': 15, '访问用户': 3792 },
|
||||
{ '日期': 36, '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-candle :data="chartData" v-bind="pubSetting"></ve-candle>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{ '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
|
||||
{ '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
|
||||
{ '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
|
||||
{ '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
|
||||
{ '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
|
||||
{ '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
|
||||
{ '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
|
||||
{ '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
|
||||
{ '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
|
||||
{ '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
|
||||
{ '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
|
||||
{ '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
|
||||
{ '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
|
||||
{ '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
|
||||
{ '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
|
||||
{ '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
|
||||
{ '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
|
||||
{ '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
|
||||
{ '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
|
||||
{ '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
|
||||
{ '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
|
||||
{ '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
|
||||
{ '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
|
||||
{ '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
|
||||
{ '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
|
||||
{ '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
|
||||
{ '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
|
||||
{ '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
|
||||
{ '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
|
||||
{ '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
|
||||
{ '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
|
||||
{ '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
|
||||
{ '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
|
||||
{ '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
|
||||
{ '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
|
||||
{ '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
|
||||
{ '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
|
||||
{ '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">显示 MA VOL</template>
|
||||
<div class="inner">
|
||||
<ve-candle :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-candle>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
showMA: true,
|
||||
showVol: true
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{ '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
|
||||
{ '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
|
||||
{ '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
|
||||
{ '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
|
||||
{ '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
|
||||
{ '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
|
||||
{ '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
|
||||
{ '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
|
||||
{ '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
|
||||
{ '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
|
||||
{ '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
|
||||
{ '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
|
||||
{ '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
|
||||
{ '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
|
||||
{ '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
|
||||
{ '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
|
||||
{ '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
|
||||
{ '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
|
||||
{ '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
|
||||
{ '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
|
||||
{ '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
|
||||
{ '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
|
||||
{ '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
|
||||
{ '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
|
||||
{ '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
|
||||
{ '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
|
||||
{ '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
|
||||
{ '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
|
||||
{ '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
|
||||
{ '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
|
||||
{ '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
|
||||
{ '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
|
||||
{ '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
|
||||
{ '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
|
||||
{ '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
|
||||
{ '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
|
||||
{ '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
|
||||
{ '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">修改指标名和图例文字</template>
|
||||
<div class="inner">
|
||||
<ve-candle :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-candle>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
showMA: true,
|
||||
showVol: true,
|
||||
labelMap: {
|
||||
MA5: 'ma5'
|
||||
},
|
||||
legendName: {
|
||||
'日K': 'day k'
|
||||
},
|
||||
showDataZoom: true
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{ '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
|
||||
{ '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
|
||||
{ '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
|
||||
{ '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
|
||||
{ '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
|
||||
{ '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
|
||||
{ '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
|
||||
{ '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
|
||||
{ '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
|
||||
{ '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
|
||||
{ '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
|
||||
{ '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
|
||||
{ '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
|
||||
{ '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
|
||||
{ '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
|
||||
{ '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
|
||||
{ '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
|
||||
{ '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
|
||||
{ '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
|
||||
{ '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
|
||||
{ '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
|
||||
{ '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
|
||||
{ '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
|
||||
{ '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
|
||||
{ '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
|
||||
{ '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
|
||||
{ '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
|
||||
{ '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
|
||||
{ '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
|
||||
{ '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
|
||||
{ '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
|
||||
{ '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
|
||||
{ '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
|
||||
{ '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
|
||||
{ '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
|
||||
{ '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
|
||||
{ '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
|
||||
{ '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-funnel :data="chartData" v-bind="pubSetting"></ve-funnel>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ '状态': '展示', '数值': 900 },
|
||||
{ '状态': '访问', '数值': 600 },
|
||||
{ '状态': '点击', '数值': 300 },
|
||||
{ '状态': '订单', '数值': 100 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">金字塔</template>
|
||||
<div class="inner">
|
||||
<ve-funnel :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-funnel>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
ascending: true
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ '状态': '展示', '数值': 900 },
|
||||
{ '状态': '访问', '数值': 600 },
|
||||
{ '状态': '点击', '数值': 300 },
|
||||
{ '状态': '订单', '数值': 100 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-gauge :data="chartData" v-bind="pubSetting"></ve-gauge>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['type', 'a', 'b', 'value'],
|
||||
rows: [
|
||||
{ type: '速度', value: 80, a: 1, b: 2 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-heatmap :data="chartData" v-bind="pubSetting"></ve-heatmap>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['时间', '地点', '人数'],
|
||||
rows: [
|
||||
{ '时间': '星期一', '地点': '北京', '人数': 1000 },
|
||||
{ '时间': '星期二', '地点': '上海', '人数': 400 },
|
||||
{ '时间': '星期三', '地点': '杭州', '人数': 800 },
|
||||
{ '时间': '星期二', '地点': '深圳', '人数': 200 },
|
||||
{ '时间': '星期三', '地点': '长春', '人数': 100 },
|
||||
{ '时间': '星期五', '地点': '南京', '人数': 300 },
|
||||
{ '时间': '星期四', '地点': '江苏', '人数': 800 },
|
||||
{ '时间': '星期一', '地点': '北京', '人数': 700 },
|
||||
{ '时间': '星期三', '地点': '上海', '人数': 300 },
|
||||
{ '时间': '星期二', '地点': '杭州', '人数': 500 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">地图热力图</template>
|
||||
<div class="inner">
|
||||
<ve-heatmap :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-heatmap>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
position: 'china',
|
||||
type: 'map',
|
||||
geo: {
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#323c48',
|
||||
borderColor: '#111'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2a333d'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['lat', 'lng', '人数'],
|
||||
rows: [
|
||||
{ 'lat': 115.892151, 'lng': 28.676493, '人数': 1000 },
|
||||
{ 'lat': 117.000923, 'lng': 36.675807, '人数': 400 },
|
||||
{ 'lat': 113.665412, 'lng': 34.757975, '人数': 800 },
|
||||
{ 'lat': 114.298572, 'lng': 30.584355, '人数': 200 },
|
||||
{ 'lat': 112.982279, 'lng': 28.19409, '人数': 100 },
|
||||
{ 'lat': 113.280637, 'lng': 23.125178, '人数': 300 },
|
||||
{ 'lat': 110.33119, 'lng': 20.031971, '人数': 800 },
|
||||
{ 'lat': 104.065735, 'lng': 30.659462, '人数': 700 },
|
||||
{ 'lat': 108.948024, 'lng': 34.263161, '人数': 300 },
|
||||
{ 'lat': 103.823557, 'lng': 36.058039, '人数': 500 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-histogram :data="chartData" v-bind="pubSetting"></ve-histogram>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">设置显示的指标维度</template>
|
||||
<div class="inner">
|
||||
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
metrics: ['访问用户', '下单用户'],
|
||||
dimension: ['日期']
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">柱状图+折线图</template>
|
||||
<div class="inner">
|
||||
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
showLine: ['下单用户']
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">堆叠柱状图</template>
|
||||
<div class="inner">
|
||||
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
stack: { '用户': ['访问用户', '下单用户'] }
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">默认显示柱状图数据</template>
|
||||
<div class="inner">
|
||||
<ve-histogram :data="chartData" :extend="extend" v-bind="pubSetting"></ve-histogram>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.extend = {
|
||||
series: {
|
||||
label: { show: true, position: "top" }
|
||||
}
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">横轴为连续的数值轴</template>
|
||||
<div class="inner">
|
||||
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
xAxisType: 'value'
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': 1, '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': 2, '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': 5, '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': 10, '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': 20, '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': 22, '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-line :data="chartData" v-bind="pubSetting"></ve-line>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data: function () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">横坐标的倾斜</template>
|
||||
<div class="inner">
|
||||
<ve-line :data="chartData" :extend="extend" v-bind="pubSetting"></ve-line>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data: function () {
|
||||
this.extend = {
|
||||
'xAxis.0.axisLabel.rotate': 45
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 },
|
||||
{ '日期': '1/7', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/8', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/9', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/10', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/11', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/12', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">堆叠面积图</template>
|
||||
<div class="inner">
|
||||
<ve-line :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-line>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
stack: { '用户': ['访问用户', '下单用户'] },
|
||||
area: true
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">显示指标数值</template>
|
||||
<div class="inner">
|
||||
<ve-line :data="chartData" :extend="extend" v-bind="pubSetting"></ve-line>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.extend = {
|
||||
series: {
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">设置别名</template>
|
||||
<div class="inner">
|
||||
<ve-line :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-line>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
labelMap: {
|
||||
'PV': '访问用户',
|
||||
'Order': '下单用户'
|
||||
},
|
||||
legendName: {
|
||||
'访问用户': '访问用户 total: 10000'
|
||||
}
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['date', 'PV', 'Order', 'OrderRate'],
|
||||
rows: [
|
||||
{ 'date': '1/1', 'PV': 1393, 'Order': 1093, 'OrderRate': 0.32 },
|
||||
{ 'date': '1/2', 'PV': 3530, 'Order': 3230, 'OrderRate': 0.26 },
|
||||
{ 'date': '1/3', 'PV': 2923, 'Order': 2623, 'OrderRate': 0.76 },
|
||||
{ 'date': '1/4', 'PV': 1723, 'Order': 1423, 'OrderRate': 0.49 },
|
||||
{ 'date': '1/5', 'PV': 3792, 'Order': 3492, 'OrderRate': 0.323 },
|
||||
{ 'date': '1/6', 'PV': 4593, 'Order': 4293, 'OrderRate': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<!-- <div class="inner">
|
||||
<ve-map :data="chartData" v-bind="pubSetting"></ve-map>
|
||||
</div> -->
|
||||
大概由于 mock.js 和 v-charts 的网络请求冲突，本示例暂时无法展示
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['位置', '税收', '人口', '面积'],
|
||||
rows: [
|
||||
{ '位置': '吉林', '税收': 123, '人口': 123, '面积': 92134 },
|
||||
{ '位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234 },
|
||||
{ '位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234 },
|
||||
{ '位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">设置城市</template>
|
||||
<!-- <div class="inner">
|
||||
<ve-map :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-map>
|
||||
</div> -->
|
||||
大概由于 mock.js 和 v-charts 的网络请求冲突，本示例暂时无法展示
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
position: 'province/beijing'
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['位置', '人口'],
|
||||
rows: [
|
||||
{ '位置': '延庆区', '人口': 123 },
|
||||
{ '位置': '密云区', '人口': 1223 },
|
||||
{ '位置': '平谷区', '人口': 2123 },
|
||||
{ '位置': '海淀区', '人口': 4123 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">设置样式</template>
|
||||
<!-- <div class="inner">
|
||||
<ve-map :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-map>
|
||||
</div> -->
|
||||
<!-- 大概由于 mock.js 和 v-charts 的网络请求冲突，本示例暂时无法展示 -->
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
position: 'china',
|
||||
label: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#00f'
|
||||
}
|
||||
},
|
||||
zoom: 1.2
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['位置', '人口'],
|
||||
rows: [
|
||||
{ '位置': '吉林', ' 人口': 123 },
|
||||
{ '位置': '北京', ' 人口': 1223 },
|
||||
{ '位置': '上海', ' 人口': 2123 },
|
||||
{ '位置': '浙江', ' 人口': 4123 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-pie :data="chartData" v-bind="pubSetting"></ve-pie>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393 },
|
||||
{ '日期': '1/2', '访问用户': 3530 },
|
||||
{ '日期': '1/3', '访问用户': 2923 },
|
||||
{ '日期': '1/4', '访问用户': 1723 },
|
||||
{ '日期': '1/5', '访问用户': 3792 },
|
||||
{ '日期': '1/6', '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">设置指标维度</template>
|
||||
<div class="inner">
|
||||
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
dimension: '日期',
|
||||
metrics: '访问用户'
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393 },
|
||||
{ '日期': '1/2', '访问用户': 3530 },
|
||||
{ '日期': '1/3', '访问用户': 2923 },
|
||||
{ '日期': '1/4', '访问用户': 1723 },
|
||||
{ '日期': '1/5', '访问用户': 3792 },
|
||||
{ '日期': '1/6', '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">玫瑰图</template>
|
||||
<div class="inner">
|
||||
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
roseType: 'radius'
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393 },
|
||||
{ '日期': '1/2', '访问用户': 3530 },
|
||||
{ '日期': '1/3', '访问用户': 2923 },
|
||||
{ '日期': '1/4', '访问用户': 1723 },
|
||||
{ '日期': '1/5', '访问用户': 3792 },
|
||||
{ '日期': '1/6', '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">限制显示条数饼图</template>
|
||||
<div class="inner">
|
||||
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
limitShowNum: 5
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393 },
|
||||
{ '日期': '1/2', '访问用户': 3530 },
|
||||
{ '日期': '1/3', '访问用户': 2923 },
|
||||
{ '日期': '1/4', '访问用户': 1723 },
|
||||
{ '日期': '1/5', '访问用户': 3792 },
|
||||
{ '日期': '1/6', '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">多圆饼图</template>
|
||||
<div class="inner">
|
||||
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
level: [
|
||||
['1/1', '1/2', '1/3'],
|
||||
['1/4', '1/5']
|
||||
]
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393 },
|
||||
{ '日期': '1/2', '访问用户': 3530 },
|
||||
{ '日期': '1/3', '访问用户': 2923 },
|
||||
{ '日期': '1/4', '访问用户': 1723 },
|
||||
{ '日期': '1/5', '访问用户': 3792 },
|
||||
{ '日期': '1/6', '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">设置饼图半径边距</template>
|
||||
<div class="inner">
|
||||
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
radius: 150,
|
||||
offsetY: 250
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393 },
|
||||
{ '日期': '1/2', '访问用户': 3530 },
|
||||
{ '日期': '1/3', '访问用户': 2923 },
|
||||
{ '日期': '1/4', '访问用户': 1723 },
|
||||
{ '日期': '1/5', '访问用户': 3792 },
|
||||
{ '日期': '1/6', '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-radar :data="chartData" v-bind="pubSetting"></ve-radar>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-ring :data="chartData" v-bind="pubSetting"></ve-ring>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393 },
|
||||
{ '日期': '1/2', '访问用户': 3530 },
|
||||
{ '日期': '1/3', '访问用户': 2923 },
|
||||
{ '日期': '1/4', '访问用户': 1723 },
|
||||
{ '日期': '1/5', '访问用户': 3792 },
|
||||
{ '日期': '1/6', '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">指定指标维度</template>
|
||||
<div class="inner">
|
||||
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
dimension: '日期',
|
||||
metrics: '访问用户'
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393 },
|
||||
{ '日期': '1/2', '访问用户': 3530 },
|
||||
{ '日期': '1/3', '访问用户': 2923 },
|
||||
{ '日期': '1/4', '访问用户': 1723 },
|
||||
{ '日期': '1/5', '访问用户': 3792 },
|
||||
{ '日期': '1/6', '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">玫瑰图</template>
|
||||
<div class="inner">
|
||||
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
roseType: 'radius'
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393 },
|
||||
{ '日期': '1/2', '访问用户': 3530 },
|
||||
{ '日期': '1/3', '访问用户': 2923 },
|
||||
{ '日期': '1/4', '访问用户': 1723 },
|
||||
{ '日期': '1/5', '访问用户': 3792 },
|
||||
{ '日期': '1/6', '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">限制显示条数环图</template>
|
||||
<div class="inner">
|
||||
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
limitShowNum: 3
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393 },
|
||||
{ '日期': '1/2', '访问用户': 3530 },
|
||||
{ '日期': '1/3', '访问用户': 2923 },
|
||||
{ '日期': '1/4', '访问用户': 1723 },
|
||||
{ '日期': '1/5', '访问用户': 3792 },
|
||||
{ '日期': '1/6', '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">设置环图半径</template>
|
||||
<div class="inner">
|
||||
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
radius: [30, 100],
|
||||
offsetY: 250
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393 },
|
||||
{ '日期': '1/2', '访问用户': 3530 },
|
||||
{ '日期': '1/3', '访问用户': 2923 },
|
||||
{ '日期': '1/4', '访问用户': 1723 },
|
||||
{ '日期': '1/5', '访问用户': 3792 },
|
||||
{ '日期': '1/6', '访问用户': 4593 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-sankey :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-sankey>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
links: [
|
||||
{ source: '首页', target: '列表页a', value: 0.5 },
|
||||
{ source: '首页', target: '列表页b', value: 0.5 },
|
||||
{ source: '列表页a', target: '内容页a-1', value: 0.1 },
|
||||
{ source: '列表页a', target: '内容页a-2', value: 0.4 },
|
||||
{ source: '列表页b', target: '内容页b-1', value: 0.2 },
|
||||
{ source: '列表页b', target: '内容页b-2', value: 0.3 }
|
||||
]
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['页面', '访问量'],
|
||||
rows: [
|
||||
{ '页面': '首页', '访问量': 100000 },
|
||||
{ '页面': '列表页a', '访问量': 20000 },
|
||||
{ '页面': '列表页b', '访问量': 80000 },
|
||||
{ '页面': '内容页a-1', '访问量': 10000 },
|
||||
{ '页面': '内容页a-2', '访问量': 10000 },
|
||||
{ '页面': '内容页b-1', '访问量': 60000 },
|
||||
{ '页面': '内容页b-2', '访问量': 20000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">单维度多指标</template>
|
||||
<div class="inner">
|
||||
<ve-scatter :data="chartData" v-bind="pubSetting"></ve-scatter>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '年龄'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
|
||||
{ '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
|
||||
{ '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },
|
||||
{ '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
|
||||
{ '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
|
||||
{ '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,63 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">双维度多指标</template>
|
||||
<div class="inner">
|
||||
<ve-scatter :data="chartData" v-bind="pubSetting"></ve-scatter>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '年龄'],
|
||||
rows: {
|
||||
'上海': [
|
||||
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
|
||||
{ '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
|
||||
{ '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },
|
||||
{ '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
|
||||
{ '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
|
||||
{ '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }
|
||||
],
|
||||
'北京': [
|
||||
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
|
||||
{ '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },
|
||||
{ '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
|
||||
{ '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },
|
||||
{ '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },
|
||||
{ '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }
|
||||
],
|
||||
'广州': [
|
||||
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
|
||||
{ '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
|
||||
{ '日期': '1/3', '访问用户': 2123, '年龄': 30, '下单用户': 3245 },
|
||||
{ '日期': '1/5', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
|
||||
{ '日期': '1/4', '访问用户': 5123, '年龄': 18, '下单用户': 4564 },
|
||||
{ '日期': '1/6', '访问用户': 3843, '年龄': 30, '下单用户': 4850 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">径向树图</template>
|
||||
<div class="inner">
|
||||
<ve-tree :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-tree>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
seriesMap: {
|
||||
tree1: {
|
||||
layout: 'radial'
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['name', 'value'],
|
||||
rows: [
|
||||
{
|
||||
name: 'tree1',
|
||||
value: [
|
||||
{
|
||||
name: 'f',
|
||||
value: 1,
|
||||
link: 'https://ele.me',
|
||||
children: [
|
||||
{
|
||||
name: 'a',
|
||||
value: 1,
|
||||
link: 'https://ele.me',
|
||||
children: [
|
||||
{
|
||||
name: 'a-a',
|
||||
link: 'https://ele.me',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: 'a-b',
|
||||
link: 'https://ele.me',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'b',
|
||||
value: 1,
|
||||
link: 'https://ele.me',
|
||||
children: [
|
||||
{
|
||||
name: 'b-a',
|
||||
link: 'https://ele.me',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: 'b-b',
|
||||
link: 'https://ele.me',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'c',
|
||||
value: 3,
|
||||
link: 'https://ele.me',
|
||||
children: [
|
||||
{
|
||||
name: 'c-a',
|
||||
link: 'https://ele.me',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: 'c-b',
|
||||
link: 'https://ele.me',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'd',
|
||||
value: 3,
|
||||
link: 'https://ele.me',
|
||||
children: [
|
||||
{
|
||||
name: 'd-a',
|
||||
link: 'https://ele.me',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: 'd-b',
|
||||
link: 'https://ele.me',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-waterfall :data="chartData" v-bind="pubSetting"></ve-waterfall>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['活动', '时间'],
|
||||
rows: [
|
||||
{ '活动': '吃饭', '时间': 4 },
|
||||
{ '活动': '睡觉', '时间': 10 },
|
||||
{ '活动': '打豆豆', '时间': 5 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<el-button-group slot="header">
|
||||
<el-button size="mini" @click="scrollRowTo(2)">跳转到第3行</el-button>
|
||||
<el-button size="mini" @click="scrollRowTo(Math.round(tableDataHandled.length * 0.8))">
|
||||
跳转到第{{Math.round(tableDataHandled.length * 0.8) + 1}}行
|
||||
</el-button>
|
||||
<el-button size="mini" @click="editCell">编辑第{{ editRow }}行第{{ editCol }}列</el-button>
|
||||
<el-button size="mini" @click="changeData(Math.round(Math.random() * 30000))">改变数据</el-button>
|
||||
<el-button size="mini" @click="changeDefaultSort">改变默认排序方式</el-button>
|
||||
</el-button-group>
|
||||
<h1 class="d2-mt-0">当前数据量 {{tableDataHandled.length}}</h1>
|
||||
<div class="wraper">
|
||||
<bigdata-table
|
||||
ref="table"
|
||||
v-model="tableDataHandled"
|
||||
:row-num="20"
|
||||
:col-num="7"
|
||||
show-index
|
||||
start-edit-type="dblclick"
|
||||
fixed
|
||||
stripe
|
||||
:col-width="200"
|
||||
:header-height="50"
|
||||
:can-edit="canEdit"
|
||||
:at-right-cell-posi="20"
|
||||
:at-left-cell-posi="40"
|
||||
:columns="columns"
|
||||
:index-render="indexRender"
|
||||
:fixed-col="0"
|
||||
:sort-index="2"
|
||||
:default-sort="defaultSort"
|
||||
selectable
|
||||
paste
|
||||
:beforeSave="beforeSave"
|
||||
:disabled-hover="false"
|
||||
@on-success-save="handleSuccessEdit"
|
||||
@on-fail-save="handleFailEdit"
|
||||
@on-moving-on-header="handleMoving"
|
||||
@on-click-tr="handleClickTr"
|
||||
@on-click-td="handleClickTd"/>
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
// 本页是由 https://github.com/lison16/vue-bigdata-table/blob/master/src/App.vue 修改而来
|
||||
// 由于原页面有太多的地方不符合本项目的代码规范，本页面不做代码检查
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tableData: [],
|
||||
columns: [],
|
||||
tableDataHandled: [], // 带有数据的表格数据
|
||||
emptyData: [], // 空的表格数据
|
||||
canEdit: true,
|
||||
editRow: 1,
|
||||
editCol: 1,
|
||||
defaultSort: {1: 'down'}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tableDataHandled (res) {
|
||||
// res
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
indexRender (h, index) {
|
||||
return h('div', {}, index + 1)
|
||||
},
|
||||
handleMoving (e) {
|
||||
// this.$log('handleMoving', e.atGivenArea + '......' + e.colIndex)
|
||||
},
|
||||
scrollRowTo (index) {
|
||||
this.$refs.table.scrollToRow(index)
|
||||
},
|
||||
handleClickTr (index) {
|
||||
this.$log('handleClickTr', index)
|
||||
},
|
||||
handleClickTd (params) {
|
||||
this.$log('handleClickTd', params)
|
||||
},
|
||||
clickEditBtn () {
|
||||
this.canEdit = !this.canEdit
|
||||
},
|
||||
beforeSave ({ row, col, value }) {
|
||||
return (row + 1) % 2
|
||||
},
|
||||
handleSuccessEdit ({ row, col, value, initRowIndex }) {
|
||||
this.$message(`第${initRowIndex + 1}行第${initRowIndex + 1}列改为${value}`)
|
||||
},
|
||||
handleFailEdit (res) {
|
||||
this.$message('偶数行不能编辑')
|
||||
},
|
||||
editCell () {
|
||||
this.$refs.table.editCell(this.editRow - 1, this.editCol - 1)
|
||||
},
|
||||
changeData (rowLen) {
|
||||
let dataArr = []
|
||||
for (let i = 0; i < rowLen; i++) {
|
||||
let arr = [
|
||||
i + '00',
|
||||
'count' + i,
|
||||
'23.4534534345',
|
||||
'0023' + i,
|
||||
'123.234534534534',
|
||||
'namenasdfsdfsdfsdfssdfsdfsdsdfsdfsf' + i,
|
||||
'2014年1月1日'
|
||||
]
|
||||
dataArr.push(arr)
|
||||
}
|
||||
this.tableDataHandled = dataArr
|
||||
},
|
||||
changeDefaultSort () {
|
||||
this.defaultSort = {2: 'up'}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeData(10000)
|
||||
let columns = ['这是数字', '这是字符1列', '这是纬度', '这是数字', '这是经度', '这是字符2列', '这是时间'].map((title, col) => {
|
||||
return {
|
||||
title: title,
|
||||
align: 'center'
|
||||
}
|
||||
})
|
||||
this.columns = columns
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.wraper{
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">我是插入到 header 中的内容</template>
|
||||
<d2-markdown :source="doc"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './md/doc-card.md'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full" scroll>
|
||||
<template slot="header">
|
||||
我是插入到 header 中的内容
|
||||
</template>
|
||||
<d2-markdown :source="doc"/>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="D2Admin" link="https://github.com/d2-projects/d2-admin"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './md/doc-full-bs.md'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">
|
||||
我是插入到 header 中的内容
|
||||
</template>
|
||||
<d2-markdown :source="doc"/>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="D2Admin" link="https://github.com/d2-projects/d2-admin"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './md/doc-full.md'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<template slot="header">隐形页面容器头部</template>
|
||||
<el-card shadow="never" style="width: 50%;">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './md/doc-ghost-header.md'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<el-card shadow="never" class="d2-mt" style="width: 50%;">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './md/doc-ghost.md'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,18 +0,0 @@
|
||||
## 基础页面容器
|
||||
|
||||
高度根据内容适应
|
||||
|
||||
```
|
||||
<d2-container>
|
||||
主体内容
|
||||
</d2-container>
|
||||
```
|
||||
|
||||
使用 `slot`
|
||||
|
||||
```
|
||||
<d2-container>
|
||||
<template slot="header">我是插入到 header 中的内容</template>
|
||||
主体内容
|
||||
</d2-container>
|
||||
```
|
||||
@@ -1,77 +0,0 @@
|
||||
## 自适应填充页面容器 + 滚动优化
|
||||
|
||||
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽，**并且使用自定义滚动条代替原生滚动条**，是否启用此功能请自行取舍
|
||||
|
||||
> 有些情况下使用滚动优化模式会有意外影响，例如页面内含有可拖拽的元素，这时候最好不要使用此模式
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
<template>
|
||||
<d2-container type="full" scroll>
|
||||
<template slot="header">
|
||||
可选的 header 内容 ...
|
||||
</template>
|
||||
主体内容 ...
|
||||
<template slot="footer">
|
||||
可选的 footer 内容 ...
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
```
|
||||
|
||||
下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
|
||||
|
||||
## vue.js
|
||||
|
||||
**易用**
|
||||
|
||||
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
|
||||
|
||||
**灵活**
|
||||
|
||||
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
|
||||
|
||||
**高效**
|
||||
|
||||
20kB min+gzip 运行大小
|
||||
|
||||
超快虚拟 DOM
|
||||
|
||||
最省心的优化
|
||||
|
||||
**Vue.js 是什么**
|
||||
|
||||
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
|
||||
|
||||
如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。
|
||||
|
||||
## Element
|
||||
|
||||
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
|
||||
|
||||
**一致性** Consistency
|
||||
|
||||
- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
|
||||
|
||||
- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
|
||||
|
||||
**反馈** Feedback
|
||||
|
||||
- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
|
||||
|
||||
- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
|
||||
|
||||
**效率** Efficiency
|
||||
|
||||
- 简化流程：设计简洁直观的操作流程；
|
||||
|
||||
- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
|
||||
|
||||
- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
|
||||
|
||||
**可控** Controllability
|
||||
|
||||
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
|
||||
|
||||
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
|
||||
@@ -1,75 +0,0 @@
|
||||
## 自适应填充页面容器
|
||||
|
||||
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">
|
||||
可选的 header 内容 ...
|
||||
</template>
|
||||
主体内容 ...
|
||||
<template slot="footer">
|
||||
可选的 footer 内容 ...
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
```
|
||||
|
||||
下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
|
||||
|
||||
## vue.js
|
||||
|
||||
**易用**
|
||||
|
||||
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
|
||||
|
||||
**灵活**
|
||||
|
||||
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
|
||||
|
||||
**高效**
|
||||
|
||||
20kB min+gzip 运行大小
|
||||
|
||||
超快虚拟 DOM
|
||||
|
||||
最省心的优化
|
||||
|
||||
**Vue.js 是什么**
|
||||
|
||||
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
|
||||
|
||||
如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。
|
||||
|
||||
## Element
|
||||
|
||||
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
|
||||
|
||||
**一致性** Consistency
|
||||
|
||||
- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
|
||||
|
||||
- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
|
||||
|
||||
**反馈** Feedback
|
||||
|
||||
- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
|
||||
|
||||
- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
|
||||
|
||||
**效率** Efficiency
|
||||
|
||||
- 简化流程：设计简洁直观的操作流程；
|
||||
|
||||
- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
|
||||
|
||||
- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
|
||||
|
||||
**可控** Controllability
|
||||
|
||||
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
|
||||
|
||||
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
|
||||
@@ -1,12 +0,0 @@
|
||||
## 隐形页面容器 带有头部
|
||||
|
||||
不显示任何背景色和边框，但是有一个和分页组件效果融合的头部，看起来更舒服一点
|
||||
|
||||
```
|
||||
<d2-container type="ghost">
|
||||
<template slot="header">隐形页面容器头部</template>
|
||||
主体内容
|
||||
</d2-container>
|
||||
```
|
||||
|
||||
> 注意 如果设置了 header 插槽的内容，header 部分会自动具有 20px 的下外边距
|
||||
@@ -1,11 +0,0 @@
|
||||
## 隐形页面容器
|
||||
|
||||
不显示任何背景色和边框
|
||||
|
||||
```
|
||||
<d2-container type="ghost">
|
||||
主体内容
|
||||
</d2-container>
|
||||
```
|
||||
|
||||
如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">自定义事件</template>
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
|
||||
<v-contextmenu-item divider></v-contextmenu-item>
|
||||
<v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
|
||||
</v-contextmenu>
|
||||
<v-contextmenu ref="dbContextmenu" event-type="dblclick">
|
||||
<v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
|
||||
<v-contextmenu-item divider></v-contextmenu-item>
|
||||
<v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
|
||||
</v-contextmenu>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="contextmenu-pad" v-contextmenu:contextmenu>
|
||||
右键点击此区域
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="contextmenu-pad" v-contextmenu:dbContextmenu>
|
||||
左键双击此区域
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick (vm, event) {
|
||||
this.$message({
|
||||
message: `你点击了${vm.$slots.default[0].text}`,
|
||||
type: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style/pub.scss';
|
||||
</style>
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">禁用</template>
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
|
||||
<v-contextmenu-item disabled @click="handleClick">菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item divider></v-contextmenu-item>
|
||||
<v-contextmenu-submenu title="子菜单">
|
||||
<v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
|
||||
<v-contextmenu-item divider></v-contextmenu-item>
|
||||
<v-contextmenu-submenu disabled title="子菜单">
|
||||
<v-contextmenu-item @click="handleClick">菜单5</v-contextmenu-item>
|
||||
</v-contextmenu-submenu>
|
||||
<v-contextmenu-item @click="handleClick">菜单4</v-contextmenu-item>
|
||||
</v-contextmenu-submenu>
|
||||
</v-contextmenu>
|
||||
<div class="contextmenu-pad" v-contextmenu:contextmenu>
|
||||
右键点击此区域
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick (vm, event) {
|
||||
this.$message({
|
||||
message: `你点击了${vm.$slots.default[0].text}`,
|
||||
type: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style/pub.scss';
|
||||
</style>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">分割线</template>
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
|
||||
<v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item divider></v-contextmenu-item>
|
||||
<v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
|
||||
</v-contextmenu>
|
||||
<div class="contextmenu-pad" v-contextmenu:contextmenu>
|
||||
右键点击此区域
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick (vm, event) {
|
||||
this.$message({
|
||||
message: `你点击了${vm.$slots.default[0].text}`,
|
||||
type: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style/pub.scss';
|
||||
</style>
|
||||
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">按钮组</template>
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<v-contextmenu-group>
|
||||
<v-contextmenu-item>菜单1</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单3</v-contextmenu-item>
|
||||
</v-contextmenu-group>
|
||||
<v-contextmenu-item divider></v-contextmenu-item>
|
||||
<v-contextmenu-group>
|
||||
<v-contextmenu-item><d2-icon class="contextmenu-icon" name="github"/></v-contextmenu-item>
|
||||
<v-contextmenu-item><d2-icon class="contextmenu-icon" name="qq"/></v-contextmenu-item>
|
||||
<v-contextmenu-item><d2-icon class="contextmenu-icon" name="weixin"/></v-contextmenu-item>
|
||||
<v-contextmenu-item><d2-icon class="contextmenu-icon" name="google-plus"/></v-contextmenu-item>
|
||||
</v-contextmenu-group>
|
||||
<v-contextmenu-item divider></v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单4</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单5</v-contextmenu-item>
|
||||
</v-contextmenu>
|
||||
<div class="contextmenu-pad" v-contextmenu:contextmenu>
|
||||
右键点击此区域
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style/pub.scss';
|
||||
</style>
|
||||
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">基础</template>
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
|
||||
<v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
|
||||
</v-contextmenu>
|
||||
<div class="contextmenu-pad" v-contextmenu:contextmenu>
|
||||
右键点击此区域
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick (vm, event) {
|
||||
this.$message({
|
||||
message: `你点击了${vm.$slots.default[0].text}`,
|
||||
type: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style/pub.scss';
|
||||
</style>
|
||||
@@ -1,15 +0,0 @@
|
||||
@import '~@/assets/style/public.scss';
|
||||
.contextmenu-pad {
|
||||
height: 300px;
|
||||
background-color: $color-bg;
|
||||
border: 1px solid $color-border-1;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
color: $color-info;
|
||||
}
|
||||
.contextmenu-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">子菜单</template>
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<v-contextmenu-item @click="handleClick">菜单 1</v-contextmenu-item>
|
||||
<v-contextmenu-item @click="handleClick">菜单 2</v-contextmenu-item>
|
||||
<v-contextmenu-item divider></v-contextmenu-item>
|
||||
<v-contextmenu-submenu title="菜单 3">
|
||||
<v-contextmenu-item @click="handleClick">菜单 3-1</v-contextmenu-item>
|
||||
<v-contextmenu-item divider></v-contextmenu-item>
|
||||
<v-contextmenu-submenu title="菜单 3-2">
|
||||
<v-contextmenu-item @click="handleClick">菜单 3-2-1</v-contextmenu-item>
|
||||
</v-contextmenu-submenu>
|
||||
<v-contextmenu-item @click="handleClick">菜单 3-3</v-contextmenu-item>
|
||||
<v-contextmenu-item @click="handleClick">菜单 3-4</v-contextmenu-item>
|
||||
<v-contextmenu-item @click="handleClick">菜单 3-5</v-contextmenu-item>
|
||||
</v-contextmenu-submenu>
|
||||
</v-contextmenu>
|
||||
<div class="contextmenu-pad" v-contextmenu:contextmenu>
|
||||
右键点击此区域
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick (vm, event) {
|
||||
this.$message({
|
||||
message: `你点击了${vm.$slots.default[0].text}`,
|
||||
type: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style/pub.scss';
|
||||
</style>
|
||||
@@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<d2-container class="page">
|
||||
<template slot="header">数字动画组件</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<p slot="title">只设置目标数字</p>
|
||||
<div class="group">
|
||||
<d2-count-up :end="100"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<p slot="title">设置起止数值</p>
|
||||
<div class="group">
|
||||
<d2-count-up :start="14" :end="100"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<p slot="title">小数位数</p>
|
||||
<div class="group">
|
||||
<d2-count-up :end="100" :decimals="2"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<p slot="title">动画时长</p>
|
||||
<div class="group">
|
||||
<d2-count-up :end="100" :duration="6"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<p slot="title">回调函数</p>
|
||||
<div class="group">
|
||||
<d2-count-up :end="100" :callback="() => {className = 'end'}" :class="className"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never" class="d2-mb-0">
|
||||
<p slot="title">结束一秒后更新数值</p>
|
||||
<div class="group">
|
||||
<d2-count-up :end="end" :callback="update"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
// 回调函数使用
|
||||
className: '',
|
||||
// 更新数值用
|
||||
end: 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
update () {
|
||||
setTimeout(() => {
|
||||
this.end = 100
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page {
|
||||
.el-card {
|
||||
@extend %unable-select;
|
||||
.group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 60px;
|
||||
&.end {
|
||||
padding: 0px 20px;
|
||||
border-radius: 4px;
|
||||
background-color: $color-success;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<d2-demo-page-header slot="header" title="基本示例"/>
|
||||
<d2-quill
|
||||
style="min-height: 200px;"
|
||||
v-model="value"
|
||||
@text-change="textChangeHandler"
|
||||
@selection-change="selectionChangeHandler"
|
||||
@editor-change="editorChangeHandler"/>
|
||||
<el-card shadow="never" class="d2-mt">
|
||||
<d2-highlight :code="formated"/>
|
||||
</el-card>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import htmlFormat from '@/libs/htmlFormat.js'
|
||||
import value from './value'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
htmlFormat,
|
||||
value
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formated () {
|
||||
return htmlFormat(this.value)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textChangeHandler (delta, oldDelta, source) {
|
||||
// console.group('QuillEditor textChangeHandler')
|
||||
// console.log(delta, oldDelta, source)
|
||||
// console.groupEnd()
|
||||
},
|
||||
selectionChangeHandler (range, oldRange, source) {
|
||||
// console.group('QuillEditor selectionChangeHandler')
|
||||
// console.log(range, oldRange, source)
|
||||
// console.groupEnd()
|
||||
},
|
||||
editorChangeHandler (eventName, ...args) {
|
||||
// console.group('QuillEditor editorChangeHandler')
|
||||
// console.log(eventName, args)
|
||||
// console.groupEnd()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,6 +0,0 @@
|
||||
export default `<p>
|
||||
<a href="https://github.com/d2-projects/d2-admin" target="_blank" class="ql-size-large" style="color: rgb(65, 184, 131);"><strong>D2 Admin</strong></a>
|
||||
<strong style="color: rgb(65, 184, 131);"></strong>
|
||||
by
|
||||
<a href="https://cn.vuejs.org/" target="_blank" class="ql-size-large" style="color: rgb(65, 184, 131);"><strong>vue.js</strong></a>
|
||||
</p>`
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<d2-demo-page-header slot="header" title="基本示例"/>
|
||||
<d2-mde
|
||||
v-model="text"
|
||||
class="mde"/>
|
||||
<el-card shadow="never">
|
||||
<pre>{{text}}</pre>
|
||||
</el-card>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import text from './text'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
text
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mde {
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +0,0 @@
|
||||
export default `# 标题
|
||||
|
||||
- 列表
|
||||
- 列表
|
||||
|
||||
\`\`\`
|
||||
alert('Hello')
|
||||
\`\`\`
|
||||
|
||||
[D2Admin in github](https://github.com/d2-projects/d2-admin)`
|
||||
@@ -1,8 +0,0 @@
|
||||
export default `body {
|
||||
background-color: aliceblue;
|
||||
height: 100%;
|
||||
}
|
||||
.my-card {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}`
|
||||
@@ -1,8 +0,0 @@
|
||||
export default `<ul>
|
||||
<li class="li-1"><p>Hello</p></li>
|
||||
<li>
|
||||
<span style="color: red;">
|
||||
Hello
|
||||
</span>
|
||||
</li>
|
||||
</ul>`
|
||||
@@ -1,3 +0,0 @@
|
||||
export default `[].forEach.call($$("*"), a => {
|
||||
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
|
||||
})`
|
||||
@@ -1,8 +0,0 @@
|
||||
export default `body {
|
||||
background-color: aliceblue;
|
||||
height: 100%;
|
||||
.my-card {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
}`
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">代码高亮组件</template>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<p slot="title">javascript</p>
|
||||
<d2-highlight :code="codeJavascript"/>
|
||||
</el-card>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never">
|
||||
<p slot="title">css</p>
|
||||
<d2-highlight :code="codeCSS"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never">
|
||||
<p slot="title">scss</p>
|
||||
<d2-highlight :code="codeSCSS"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never">
|
||||
<p slot="title">html</p>
|
||||
<d2-highlight :code="codeHTML"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import codeJavascript from './code/javascript'
|
||||
import codeCSS from './code/css'
|
||||
import codeSCSS from './code/scss'
|
||||
import codeHTML from './code/html'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
codeJavascript,
|
||||
codeCSS,
|
||||
codeSCSS,
|
||||
codeHTML
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-popover
|
||||
ref="pop"
|
||||
placement="right"
|
||||
:title="icon"
|
||||
width="300"
|
||||
trigger="click">
|
||||
<div class="icon-group">
|
||||
<i :class="'fa fa-' + icon"></i>
|
||||
</div>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8">
|
||||
<el-tooltip effect="dark" :content="iconClass" placement="top">
|
||||
<el-button @click="copy(iconClass)" style="width: 100%;">Class</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-tooltip effect="dark" :content="iconHtml" placement="top">
|
||||
<el-button @click="copy(iconHtml)" style="width: 100%;">HTML</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-tooltip effect="dark" :content="iconComponent" placement="top">
|
||||
<el-button @click="copy(iconComponent)" style="width: 100%;">组件</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-popover>
|
||||
<span v-popover:pop>
|
||||
<el-tag type="info">
|
||||
<i :class="'fa fa-' + icon"></i>
|
||||
</el-tag>
|
||||
<span style="font-size: 10px;">{{icon}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import clipboard from 'clipboard-polyfill'
|
||||
export default {
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconClass () {
|
||||
return `fa fa-${this.icon}`
|
||||
},
|
||||
iconHtml () {
|
||||
return `<i class="fa fa-${this.icon}" aria-hidden="true"></i>`
|
||||
},
|
||||
iconComponent () {
|
||||
return `<d2-icon name="${this.icon}"/>`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copy (text) {
|
||||
clipboard.writeText(text)
|
||||
this.$message({
|
||||
message: `${text} 复制到剪贴板`,
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-group {
|
||||
text-align: center;
|
||||
font-size: 200px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">图标组件</template>
|
||||
<d2-icon/>
|
||||
<d2-icon name="github"/>
|
||||
<d2-icon name="github" style="font-size: 100px;"/>
|
||||
<d2-icon name="github" class="icon-class-demo"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/assets/style/public.scss';
|
||||
.icon-class-demo {
|
||||
transition: all .3s;
|
||||
font-size: 100px;
|
||||
color: #409EFF;
|
||||
@extend %unable-select;
|
||||
&:hover{
|
||||
color: #F56C6C;
|
||||
transform: scale(1.2) rotate(30deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full" scroll>
|
||||
<template slot="header">
|
||||
<el-radio-group v-model="showIndex" size="mini">
|
||||
<el-radio-button
|
||||
v-for="(item, index) in radioOptions"
|
||||
:key="index"
|
||||
:label="item.value">
|
||||
{{item.label}}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<el-row style="margin: -10px;">
|
||||
<el-alert title="点击图标复制代码" type="info" class="d2-m-10" style="width: auto;"/>
|
||||
<el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="d2-p-10">
|
||||
<d2-icon-cell :icon="iconItem"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
|
||||
export default {
|
||||
components: {
|
||||
'd2-icon-cell': () => import('./components/d2-icon-cell')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icon,
|
||||
showIndex: 12
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconShow () {
|
||||
return this.icon[this.showIndex]
|
||||
},
|
||||
radioOptions () {
|
||||
return this.icon.map((e, index) => ({
|
||||
label: e.title,
|
||||
value: index
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">图标选择器</template>
|
||||
<div class="title-group">
|
||||
<p class="title">一般用法</p>
|
||||
<p class="sub-title">
|
||||
<template v-if="icon">
|
||||
选择的图标 {{icon}}
|
||||
<i :class="'fa fa-' + icon"></i>
|
||||
</template>
|
||||
<template v-else>未选择</template>
|
||||
</p>
|
||||
</div>
|
||||
<d2-icon-select v-model="icon"/>
|
||||
<div class="title-group">
|
||||
<p class="title">用户可以输入</p>
|
||||
<p class="sub-title">
|
||||
<template v-if="icon2">
|
||||
选择的图标 {{icon2}}
|
||||
<i :class="'fa fa-' + icon2"></i>
|
||||
</template>
|
||||
<template v-else>未选择</template>
|
||||
</p>
|
||||
</div>
|
||||
<d2-icon-select v-model="icon2" :user-input="true"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
icon: '',
|
||||
icon2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.title-group {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
&:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.title {
|
||||
margin: 0px;
|
||||
}
|
||||
.sub-title {
|
||||
margin: 0px;
|
||||
color: $color-text-sub;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">SVG图标组件</template>
|
||||
<el-row>
|
||||
<el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
|
||||
<d2-icon-svg class="icon" :name="icon"/>
|
||||
<div class="icon-title">
|
||||
<span>{{icon}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.icon-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: 150px;
|
||||
&:hover {
|
||||
.icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.icon-title {
|
||||
color: $color-text-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
transition: all .3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-title {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
color: $color-text-normal;
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<d2-demo-page-cover
|
||||
title="内置组件"
|
||||
sub-title="D2Admin 为你提供了一些上手即用的组件">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/component.png`">
|
||||
</d2-demo-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
@@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<d2-container class="page">
|
||||
<tree-view :data="packJson" :options="options"></tree-view>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import packJson from '../../../../../package.json'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {
|
||||
maxDepth: 10,
|
||||
rootObjectKey: 'package.json',
|
||||
modifiable: false
|
||||
},
|
||||
packJson
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="full" class="page">
|
||||
<d2-grid-layout
|
||||
v-bind="layout"
|
||||
@layout-updated="layoutUpdatedHandler">
|
||||
<d2-grid-item
|
||||
v-for="(item, index) in layout.layout"
|
||||
:key="index"
|
||||
v-bind="item"
|
||||
@resize="resizeHandler"
|
||||
@move="moveHandler"
|
||||
@resized="resizedHandler"
|
||||
@moved="movedHandler">
|
||||
<el-card shadow="never">
|
||||
<el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
|
||||
<template v-if="item.i === '0'">
|
||||
<div class="d2-mb">拖拽卡片调整位置</div>
|
||||
<div class="d2-mb">拖拽卡片右下角的手柄调整卡片大小</div>
|
||||
<div class="d2-mb">在控制台打印出数据变化</div>
|
||||
</template>
|
||||
</el-card>
|
||||
</d2-grid-item>
|
||||
</d2-grid-layout>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
layout: {
|
||||
layout: [
|
||||
{'x': 0, 'y': 0, 'w': 4, 'h': 10, 'i': '0'},
|
||||
{'x': 4, 'y': 0, 'w': 2, 'h': 5, 'i': '1'},
|
||||
{'x': 6, 'y': 0, 'w': 4, 'h': 5, 'i': '2'},
|
||||
{'x': 10, 'y': 0, 'w': 2, 'h': 10, 'i': '3'},
|
||||
{'x': 4, 'y': 5, 'w': 4, 'h': 5, 'i': '4'},
|
||||
{'x': 8, 'y': 5, 'w': 2, 'h': 5, 'i': '5'},
|
||||
{'x': 0, 'y': 10, 'w': 8, 'h': 5, 'i': '6'},
|
||||
{'x': 8, 'y': 10, 'w': 4, 'h': 5, 'i': '7'}
|
||||
],
|
||||
colNum: 12,
|
||||
rowHeight: 30,
|
||||
isDraggable: true,
|
||||
isResizable: true,
|
||||
isMirrored: false,
|
||||
verticalCompact: true,
|
||||
margin: [10, 10],
|
||||
useCssTransforms: true
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 加载完成后显示提示
|
||||
this.showInfo()
|
||||
},
|
||||
methods: {
|
||||
// 显示提示
|
||||
showInfo () {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '你可以按住卡片拖拽改变位置；或者在每个卡片的右下角拖动，调整卡片大小'
|
||||
})
|
||||
},
|
||||
// 测试代码
|
||||
layoutUpdatedHandler (newLayout) {
|
||||
console.group('layoutUpdatedHandler')
|
||||
newLayout.forEach(e => {
|
||||
console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
|
||||
})
|
||||
console.groupEnd()
|
||||
},
|
||||
resizeHandler (i, newH, newW) {
|
||||
this.$log('resizeHandler', `i: ${i}, newH: ${newH}, newW: ${newW}`)
|
||||
},
|
||||
moveHandler (i, newX, newY) {
|
||||
this.$log('moveHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
|
||||
},
|
||||
resizedHandler (i, newH, newW, newHPx, newWPx) {
|
||||
this.$log('resizedHandler', `i: ${i}, newH: ${newH}, newW: ${newW}, newHPx: ${newHPx}, newWPx: ${newWPx}`)
|
||||
},
|
||||
movedHandler (i, newX, newY) {
|
||||
this.$log('movedHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page {
|
||||
.vue-grid-layout {
|
||||
background-color: $color-bg;
|
||||
border-radius: 4px;
|
||||
margin: -10px;
|
||||
.el-card {
|
||||
height: 100%;
|
||||
@extend %unable-select;
|
||||
}
|
||||
.vue-resizable-handle {
|
||||
opacity: .3;
|
||||
&:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">区域划分</template>
|
||||
<div style="height: 400px; margin: -16px;">
|
||||
<SplitPane :min-percent='20' :default-percent='30' split="vertical">
|
||||
<template slot="paneL"><div style="margin: 10px;">左</div></template>
|
||||
<template slot="paneR">
|
||||
<SplitPane split="horizontal">
|
||||
<template slot="paneL"><div style="margin: 10px;">右上</div></template>
|
||||
<template slot="paneR"><div style="margin: 10px;">右下</div></template>
|
||||
</SplitPane>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted () {
|
||||
// 加载完成后显示提示
|
||||
this.showInfo()
|
||||
},
|
||||
methods: {
|
||||
// 显示提示
|
||||
showInfo () {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '在横向或者纵向的分割线上拖拽调整分区大小'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
# 一级标题
|
||||
|
||||
| ID | Name | Email |
|
||||
| --- | --- | --- |
|
||||
| 0001 | FairyEver | 1711467488@qq.com |
|
||||
|
||||
```
|
||||
alert('Hello World')
|
||||
```
|
||||
|
||||
一般引用
|
||||
|
||||
> 引用文字
|
||||
|
||||
分享一个我很早前的一副设计作品 [in Lofter](http://fairyever.lofter.com/post/16ff00_6796fe8) 借此演示百度云链接的显示优化
|
||||
|
||||
> https://pan.baidu.com/s/1kW6uUwB
|
||||
|
||||
设计源文件
|
||||
|
||||
> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
|
||||
|
||||
[https://github.com/d2-projects](https://github.com/d2-projects)
|
||||
@@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">指定资源</template>
|
||||
<d2-markdown :source="doc"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './md/doc.md'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,6 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">异步加载文件</template>
|
||||
<d2-markdown :url="`${$assetsPublicPath}static/md/demo.md`"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user