删除文件夹
Former-commit-id: 90222263f0d525cd3cde7070521695b9134f020e
This commit is contained in:
liyang
@@ -1,11 +0,0 @@
|
|||||||
---
|
|
||||||
name: "👾 BUG"
|
|
||||||
about: 代码错误
|
|
||||||
---
|
|
||||||
|
|
||||||
```
|
|
||||||
为了统一格式，请将下面一行复制到 `Title` 栏，然后删除这部分
|
|
||||||
👾 BUG | 你的标题
|
|
||||||
```
|
|
||||||
|
|
||||||
如果需要，在这里描述具体内容
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
---
|
|
||||||
name: "🎮 示例相关"
|
|
||||||
about: 增加或者完善示例
|
|
||||||
---
|
|
||||||
|
|
||||||
```
|
|
||||||
为了统一格式，请将下面一行复制到 `Title` 栏，然后删除这部分
|
|
||||||
🎮 示例相关 | 你的标题
|
|
||||||
```
|
|
||||||
|
|
||||||
如果需要，在这里描述具体内容
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
---
|
|
||||||
name: "🌈 显示优化"
|
|
||||||
about: 显示方面调整
|
|
||||||
---
|
|
||||||
|
|
||||||
```
|
|
||||||
为了统一格式，请将下面一行复制到 `Title` 栏，然后删除这部分
|
|
||||||
🌈 显示优化 | 你的标题
|
|
||||||
```
|
|
||||||
|
|
||||||
如果需要，在这里描述具体内容
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
---
|
|
||||||
name: "📔 文档相关"
|
|
||||||
about: 更新或者新增文档内容
|
|
||||||
---
|
|
||||||
|
|
||||||
```
|
|
||||||
为了统一格式，请将下面一行复制到 `Title` 栏，然后删除这部分
|
|
||||||
📔 文档相关 | 你的标题
|
|
||||||
```
|
|
||||||
|
|
||||||
如果需要，在这里描述具体内容
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
---
|
|
||||||
name: "🔩 功能开发"
|
|
||||||
about: 开发新的功能
|
|
||||||
---
|
|
||||||
|
|
||||||
```
|
|
||||||
为了统一格式，请将下面一行复制到 `Title` 栏，然后删除这部分
|
|
||||||
🔩 功能开发 | 你的标题
|
|
||||||
```
|
|
||||||
|
|
||||||
如果需要，在这里描述具体内容
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
---
|
|
||||||
name: "🖐 其它问题"
|
|
||||||
about: 其它类型的 issue 请使用该模板
|
|
||||||
---
|
|
||||||
|
|
||||||
```
|
|
||||||
为了统一格式，请将下面一行复制到 `Title` 栏，然后删除这部分
|
|
||||||
🖐 其它问题 | 你的标题
|
|
||||||
```
|
|
||||||
|
|
||||||
如果需要，在这里描述具体内容
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
---
|
|
||||||
name: "🤔 提问"
|
|
||||||
about: 提出使用方面的问题
|
|
||||||
---
|
|
||||||
|
|
||||||
```
|
|
||||||
为了统一格式，请将下面一行复制到 `Title` 栏，然后删除这部分
|
|
||||||
🤔 提问 | 你的标题
|
|
||||||
```
|
|
||||||
|
|
||||||
如果需要，在这里描述具体内容
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
---
|
|
||||||
name: "⚙ 功能升级"
|
|
||||||
about: 升级某个功能
|
|
||||||
---
|
|
||||||
|
|
||||||
```
|
|
||||||
为了统一格式，请将下面一行复制到 `Title` 栏，然后删除这部分
|
|
||||||
⚙ 功能升级 | 你的标题
|
|
||||||
```
|
|
||||||
|
|
||||||
如果需要，在这里描述具体内容
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 748 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 258 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 272 KiB |
@@ -1 +0,0 @@
|
|||||||
201810220000004bh2i5pwqfgrqp1azjyj7itsun1y3fr4mcbxlc397hri1pvzeo
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
@@ -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,9 +0,0 @@
|
|||||||
import request from '@/plugin/axios'
|
|
||||||
|
|
||||||
export function ComponentsMarkdownBase (url) {
|
|
||||||
return request({
|
|
||||||
baseURL: process.env.BASE_URL,
|
|
||||||
url,
|
|
||||||
method: 'get'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import request from '@/plugin/axios'
|
|
||||||
|
|
||||||
export function BusinessTable1List (data) {
|
|
||||||
return request({
|
|
||||||
url: '/demo/business/table/1',
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import request from '@/plugin/axios'
|
|
||||||
|
|
||||||
export function PluginMocksAjax () {
|
|
||||||
return request({
|
|
||||||
url: '/demo/plugins/mock/ajax',
|
|
||||||
method: 'get'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import Mock from 'mockjs'
|
|
||||||
|
|
||||||
Mock.mock('/api/demo/business/table/1', ({ body }) => {
|
|
||||||
// 这是通过 post 传来的参数
|
|
||||||
body = JSON.parse(body)
|
|
||||||
const { page } = body
|
|
||||||
page.total = 1000
|
|
||||||
return Mock.mock(
|
|
||||||
{
|
|
||||||
code: 0,
|
|
||||||
msg: '获取数据成功',
|
|
||||||
data: {
|
|
||||||
page,
|
|
||||||
'list|20': [
|
|
||||||
{
|
|
||||||
'key': '@guid',
|
|
||||||
'value|1': [10, 100, 200, 500],
|
|
||||||
'type': '@boolean',
|
|
||||||
'admin': '@cname',
|
|
||||||
'adminNote': '@cparagraph(0.5)',
|
|
||||||
'dateTimeCreat': '@datetime',
|
|
||||||
'used': '@boolean',
|
|
||||||
'dateTimeUse': '@datetime'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
})
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import Mock from 'mockjs'
|
|
||||||
|
|
||||||
Mock.mock('/api/demo/plugins/mock/ajax', {
|
|
||||||
code: 0,
|
|
||||||
msg: '获取数据成功',
|
|
||||||
data: {
|
|
||||||
'list|4-10': [
|
|
||||||
{
|
|
||||||
'id|+1': 1,
|
|
||||||
'name': '@CNAME',
|
|
||||||
'star|1-5': '★',
|
|
||||||
'delFlag|1': [0, 1],
|
|
||||||
'creatDate': '@DATE',
|
|
||||||
'address': '@CITY',
|
|
||||||
'zip': '@ZIP'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
@@ -1,9 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<d2-page-cover
|
|
||||||
title="示例"
|
|
||||||
sub-title="供借鉴和参考的页面">
|
|
||||||
<img src="./image/icon.png">
|
|
||||||
</d2-page-cover>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-popover
|
|
||||||
:placement="popoverPlacement"
|
|
||||||
:title="popoverTitle"
|
|
||||||
:width="popoverWidth"
|
|
||||||
trigger="hover">
|
|
||||||
<el-switch
|
|
||||||
v-model="currentValue"
|
|
||||||
:active-color="activeColor"
|
|
||||||
:inactive-color="inactiveColor"
|
|
||||||
:active-text="activeText"
|
|
||||||
:inactive-text="inactiveText"
|
|
||||||
:disabled="disabled"
|
|
||||||
@change="handleChange">
|
|
||||||
</el-switch>
|
|
||||||
<span slot="reference">
|
|
||||||
<slot v-if="value" name="active"/>
|
|
||||||
<slot v-else name="inactive"/>
|
|
||||||
</span>
|
|
||||||
</el-popover>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
popoverPlacement: {
|
|
||||||
default: 'left'
|
|
||||||
},
|
|
||||||
popoverTitle: {
|
|
||||||
default: '修改'
|
|
||||||
},
|
|
||||||
popoverWidth: {
|
|
||||||
default: '150'
|
|
||||||
},
|
|
||||||
activeColor: {
|
|
||||||
default: '#67C23A'
|
|
||||||
},
|
|
||||||
inactiveColor: {
|
|
||||||
default: '#F56C6C'
|
|
||||||
},
|
|
||||||
activeText: {
|
|
||||||
default: '正常'
|
|
||||||
},
|
|
||||||
inactiveText: {
|
|
||||||
default: '禁用'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
currentValue: false,
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value: {
|
|
||||||
handler (val) {
|
|
||||||
this.currentValue = val
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleChange (val) {
|
|
||||||
this.disabled = true
|
|
||||||
this.$message({
|
|
||||||
message: '正在发送请求',
|
|
||||||
type: 'info'
|
|
||||||
})
|
|
||||||
// 请将 setTimeout 修改为您的异步请求
|
|
||||||
setTimeout(() => {
|
|
||||||
this.disabled = false
|
|
||||||
this.$message({
|
|
||||||
message: '修改成功',
|
|
||||||
type: 'success'
|
|
||||||
})
|
|
||||||
this.$emit('change', val)
|
|
||||||
// 如果修改失败的话需要在这里手动将 currentValue 复原
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
<template>
|
|
||||||
<span slot="reference">
|
|
||||||
<d2-icon
|
|
||||||
v-if="disabled"
|
|
||||||
name="hourglass-start"
|
|
||||||
style="font-size: 14px; line-height: 32px; color: #909399;"/>
|
|
||||||
<span @click="handleClick">
|
|
||||||
<slot
|
|
||||||
v-if="!disabled && value"
|
|
||||||
name="active"/>
|
|
||||||
<slot
|
|
||||||
v-if="!disabled && !value"
|
|
||||||
name="inactive"/>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
currentValue: false,
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value: {
|
|
||||||
handler (val) {
|
|
||||||
this.currentValue = val
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClick () {
|
|
||||||
// 这里先赋值是为了和 TypeControl 使用一样的 handleChange
|
|
||||||
this.currentValue = !this.currentValue
|
|
||||||
this.handleChange(this.currentValue)
|
|
||||||
},
|
|
||||||
handleChange (val) {
|
|
||||||
this.disabled = true
|
|
||||||
this.$message({
|
|
||||||
message: '正在发送请求',
|
|
||||||
type: 'info'
|
|
||||||
})
|
|
||||||
// 请将 setTimeout 修改为您的异步请求
|
|
||||||
setTimeout(() => {
|
|
||||||
this.disabled = false
|
|
||||||
this.$message({
|
|
||||||
message: '修改成功',
|
|
||||||
type: 'success'
|
|
||||||
})
|
|
||||||
this.$emit('change', val)
|
|
||||||
// 如果修改失败的话需要在这里手动将 currentValue 复原
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-pagination
|
|
||||||
:current-page="current"
|
|
||||||
:page-size="size"
|
|
||||||
:total="total"
|
|
||||||
:page-sizes="[100, 200, 300, 400]"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
style="margin: -10px;"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange">
|
|
||||||
</el-pagination>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
current: {
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
default: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleSizeChange (val) {
|
|
||||||
this.$emit('change', {
|
|
||||||
current: this.current,
|
|
||||||
size: val,
|
|
||||||
total: this.total
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleCurrentChange (val) {
|
|
||||||
this.$emit('change', {
|
|
||||||
current: val,
|
|
||||||
size: this.size,
|
|
||||||
total: this.total
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,99 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-form
|
|
||||||
:inline="true"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
ref="form"
|
|
||||||
size="mini"
|
|
||||||
style="margin-bottom: -18px;">
|
|
||||||
|
|
||||||
<el-form-item label="状态" prop="type">
|
|
||||||
<el-select
|
|
||||||
v-model="form.type"
|
|
||||||
placeholder="状态选择"
|
|
||||||
style="width: 100px;">
|
|
||||||
<el-option label="状态 1" value="1"/>
|
|
||||||
<el-option label="状态 2" value="2"/>
|
|
||||||
<el-option label="状态 3" value="3"/>
|
|
||||||
<el-option label="状态 4" value="4"/>
|
|
||||||
<el-option label="状态 5" value="5"/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="用户" prop="user">
|
|
||||||
<el-input
|
|
||||||
v-model="form.user"
|
|
||||||
placeholder="用户"
|
|
||||||
style="width: 100px;"/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="卡密" prop="key">
|
|
||||||
<el-input
|
|
||||||
v-model="form.key"
|
|
||||||
placeholder="卡密"
|
|
||||||
style="width: 120px;"/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="备注" prop="note">
|
|
||||||
<el-input
|
|
||||||
v-model="form.note"
|
|
||||||
placeholder="备注"
|
|
||||||
style="width: 120px;"/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
@click="handleFormSubmit">
|
|
||||||
<d2-icon name="search"/>
|
|
||||||
查询
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item>
|
|
||||||
<el-button
|
|
||||||
@click="handleFormReset">
|
|
||||||
<d2-icon name="refresh"/>
|
|
||||||
重置
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
</el-form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
form: {
|
|
||||||
type: '1',
|
|
||||||
user: 'FairyEver',
|
|
||||||
key: '',
|
|
||||||
note: ''
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
type: [ { required: true, message: '请选择一个状态', trigger: 'change' } ],
|
|
||||||
user: [ { required: true, message: '请输入用户', trigger: 'change' } ]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleFormSubmit () {
|
|
||||||
this.$refs.form.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.$emit('submit', this.form)
|
|
||||||
} else {
|
|
||||||
this.$notify.error({
|
|
||||||
title: '错误',
|
|
||||||
message: '表单校验失败'
|
|
||||||
})
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleFormReset () {
|
|
||||||
this.$refs.form.resetFields()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,230 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-form
|
|
||||||
:inline="true"
|
|
||||||
size="mini">
|
|
||||||
<el-form-item :label="`已选数据下载 [ ${currentTableData.length} ]`">
|
|
||||||
<el-button-group>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
size="mini"
|
|
||||||
:disabled="currentTableData.length === 0"
|
|
||||||
@click="handleDownloadXlsx(currentTableData)">
|
|
||||||
xlsx
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
size="mini"
|
|
||||||
:disabled="currentTableData.length === 0"
|
|
||||||
@click="handleDownloadCsv(currentTableData)">
|
|
||||||
csv
|
|
||||||
</el-button>
|
|
||||||
</el-button-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="`已选数据下载 [ ${multipleSelection.length} ]`">
|
|
||||||
<el-button-group>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
size="mini"
|
|
||||||
:disabled="multipleSelection.length === 0"
|
|
||||||
@click="handleDownloadXlsx(multipleSelection)">
|
|
||||||
xlsx
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
size="mini"
|
|
||||||
:disabled="multipleSelection.length === 0"
|
|
||||||
@click="handleDownloadCsv(multipleSelection)">
|
|
||||||
csv
|
|
||||||
</el-button>
|
|
||||||
</el-button-group>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<el-table
|
|
||||||
:data="currentTableData"
|
|
||||||
v-loading="loading"
|
|
||||||
size="mini"
|
|
||||||
stripe
|
|
||||||
style="width: 100%;"
|
|
||||||
@selection-change="handleSelectionChange">
|
|
||||||
|
|
||||||
<el-table-column
|
|
||||||
type="selection"
|
|
||||||
width="55">
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="卡密" :show-overflow-tooltip="true">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
{{scope.row.key}}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="面值" width="60" align="center">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-tag
|
|
||||||
size="mini"
|
|
||||||
type="success">
|
|
||||||
{{scope.row.value}}
|
|
||||||
</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="状态" width="50" align="center">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<boolean-control
|
|
||||||
:value="scope.row.type"
|
|
||||||
@change="(val) => {
|
|
||||||
handleSwitchChange(val, scope.$index)
|
|
||||||
}">
|
|
||||||
<d2-icon
|
|
||||||
name="check-circle"
|
|
||||||
style="font-size: 20px; line-height: 32px; color: #67C23A;"
|
|
||||||
slot="active"/>
|
|
||||||
<d2-icon
|
|
||||||
name="times-circle"
|
|
||||||
style="font-size: 20px; line-height: 32px; color: #F56C6C;"
|
|
||||||
slot="inactive"/>
|
|
||||||
</boolean-control>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="状态" width="50" align="center">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<boolean-control-mini
|
|
||||||
:value="scope.row.type"
|
|
||||||
@change="(val) => {
|
|
||||||
handleSwitchChange(val, scope.$index)
|
|
||||||
}">
|
|
||||||
<d2-icon
|
|
||||||
name="check-circle"
|
|
||||||
style="font-size: 20px; line-height: 32px; color: #67C23A;"
|
|
||||||
slot="active"/>
|
|
||||||
<d2-icon
|
|
||||||
name="times-circle"
|
|
||||||
style="font-size: 20px; line-height: 32px; color: #F56C6C;"
|
|
||||||
slot="inactive"/>
|
|
||||||
</boolean-control-mini>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="管理员" width="60">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
{{scope.row.admin}}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="管理员备注" :show-overflow-tooltip="true">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
{{scope.row.adminNote}}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
{{scope.row.dateTimeCreat}}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="使用状态" width="100" align="center">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-tag
|
|
||||||
size="mini"
|
|
||||||
:type="scope.row.used ? 'info' : ''">
|
|
||||||
{{scope.row.used ? '已使用' : '未使用'}}
|
|
||||||
</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column label="使用时间" width="150" :show-overflow-tooltip="true">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
{{scope.row.dateTimeUse}}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import BooleanControl from '../BooleanControl'
|
|
||||||
import BooleanControlMini from '../BooleanControlMini'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
BooleanControl,
|
|
||||||
BooleanControlMini
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
tableData: {
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
loading: {
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
currentTableData: [],
|
|
||||||
multipleSelection: [],
|
|
||||||
downloadColumns: [
|
|
||||||
{ label: '卡密', prop: 'key' },
|
|
||||||
{ label: '面值', prop: 'value' },
|
|
||||||
{ label: '状态', prop: 'type' },
|
|
||||||
{ label: '管理员', prop: 'admin' },
|
|
||||||
{ label: '管理员备注', prop: 'adminNote' },
|
|
||||||
{ label: '创建时间', prop: 'dateTimeCreat' },
|
|
||||||
{ label: '使用状态', prop: 'used' },
|
|
||||||
{ label: '使用时间', prop: 'dateTimeUse' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
tableData: {
|
|
||||||
handler (val) {
|
|
||||||
this.currentTableData = val
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleSwitchChange (val, index) {
|
|
||||||
const oldValue = this.currentTableData[index]
|
|
||||||
this.$set(this.currentTableData, index, {
|
|
||||||
...oldValue,
|
|
||||||
type: val
|
|
||||||
})
|
|
||||||
// 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
|
|
||||||
},
|
|
||||||
handleSelectionChange (val) {
|
|
||||||
this.multipleSelection = val
|
|
||||||
},
|
|
||||||
downloadDataTranslate (data) {
|
|
||||||
return data.map(row => ({
|
|
||||||
...row,
|
|
||||||
type: row.type ? '禁用' : '正常',
|
|
||||||
used: row.used ? '已使用' : '未使用'
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
handleDownloadXlsx (data) {
|
|
||||||
this.$export.excel({
|
|
||||||
title: 'D2Admin 表格示例',
|
|
||||||
columns: this.downloadColumns,
|
|
||||||
data: this.downloadDataTranslate(data)
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
this.$message('导出表格成功')
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleDownloadCsv (data) {
|
|
||||||
this.$export.csv({
|
|
||||||
title: 'D2Admin 表格示例',
|
|
||||||
columns: this.downloadColumns,
|
|
||||||
data: this.downloadDataTranslate(data)
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
this.$message('导出CSV成功')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<demo-page-header
|
|
||||||
slot="header"
|
|
||||||
@submit="handleSubmit"
|
|
||||||
ref="header"/>
|
|
||||||
<demo-page-main
|
|
||||||
:table-data="table"
|
|
||||||
:loading="loading"/>
|
|
||||||
<demo-page-footer
|
|
||||||
slot="footer"
|
|
||||||
:current="page.current"
|
|
||||||
:size="page.size"
|
|
||||||
:total="page.total"
|
|
||||||
@change="handlePaginationChange"/>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { BusinessTable1List } from '@/api/demo/business/table/1'
|
|
||||||
export default {
|
|
||||||
// name 值和本页的 $route.name 一致才可以缓存页面
|
|
||||||
name: 'demo-business-table-1',
|
|
||||||
components: {
|
|
||||||
'DemoPageHeader': () => import('./componnets/PageHeader'),
|
|
||||||
'DemoPageMain': () => import('./componnets/PageMain'),
|
|
||||||
'DemoPageFooter': () => import('./componnets/PageFooter')
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
table: [],
|
|
||||||
loading: false,
|
|
||||||
page: {
|
|
||||||
current: 1,
|
|
||||||
size: 100,
|
|
||||||
total: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handlePaginationChange (val) {
|
|
||||||
this.$notify({
|
|
||||||
title: '分页变化',
|
|
||||||
message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
|
|
||||||
})
|
|
||||||
this.page = val
|
|
||||||
// nextTick 只是为了优化示例中 notify 的显示
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.header.handleFormSubmit()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleSubmit (form) {
|
|
||||||
this.loading = true
|
|
||||||
this.$notify({
|
|
||||||
title: '开始请求模拟表格数据'
|
|
||||||
})
|
|
||||||
BusinessTable1List({
|
|
||||||
...form,
|
|
||||||
page: this.page
|
|
||||||
})
|
|
||||||
.then(res => {
|
|
||||||
this.loading = false
|
|
||||||
this.$notify({
|
|
||||||
title: '模拟表格数据请求完毕'
|
|
||||||
})
|
|
||||||
this.table = res.list
|
|
||||||
this.page = res.page
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
this.loading = false
|
|
||||||
this.$notify({
|
|
||||||
title: '模拟表格数据请求异常'
|
|
||||||
})
|
|
||||||
console.log('err', err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
@@ -1,9 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<d2-page-cover
|
|
||||||
title="图表"
|
|
||||||
sub-title="集成图表组件">
|
|
||||||
<img src="./image/icon.png">
|
|
||||||
</d2-page-cover>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,9 +0,0 @@
|
|||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
pubSetting: {
|
|
||||||
height: '100%'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-bar :data="chartData" v-bind="pubSetting"></ve-bar>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">指定指标维度</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">排序条形图</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">堆叠条形图</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">纵轴为连续的数值轴</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-candle :data="chartData" v-bind="pubSetting"></ve-candle>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<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-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>
|
|
||||||
<template slot="header">修改指标名和图例文字</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-candle :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-candle>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-funnel :data="chartData" v-bind="pubSetting"></ve-funnel>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">金字塔</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-funnel :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-funnel>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-gauge :data="chartData" v-bind="pubSetting"></ve-gauge>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-heatmap :data="chartData" v-bind="pubSetting"></ve-heatmap>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">地图热力图</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-heatmap :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-heatmap>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-histogram :data="chartData" v-bind="pubSetting"></ve-histogram>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">设置显示的指标维度</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">柱状图+折线图</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">堆叠柱状图</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">默认显示柱状图数据</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-histogram :data="chartData" :extend="extend" v-bind="pubSetting"></ve-histogram>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">横轴为连续的数值轴</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-line :data="chartData" v-bind="pubSetting"></ve-line>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">横坐标的倾斜</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-line :data="chartData" :extend="extend" v-bind="pubSetting"></ve-line>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">堆叠面积图</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-line :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-line>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">显示指标数值</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-line :data="chartData" :extend="extend" v-bind="pubSetting"></ve-line>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">设置别名</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-line :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-line>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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,47 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-map :data="chartData" v-bind="pubSetting" :settings="chartSettings"></ve-map>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
|
||||||
</template>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
|
||||||
import mapOrigin from '@/pages/demo/charts/list/_data/china'
|
|
||||||
export default {
|
|
||||||
mixins: [
|
|
||||||
list
|
|
||||||
],
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
chartSettings: {
|
|
||||||
mapOrigin
|
|
||||||
},
|
|
||||||
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,48 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<template slot="header">设置城市</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-map :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-map>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
|
||||||
</template>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
|
||||||
import mapOrigin from '@/pages/demo/charts/list/_data/beijing'
|
|
||||||
export default {
|
|
||||||
mixins: [
|
|
||||||
list
|
|
||||||
],
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
chartSettings: {
|
|
||||||
position: 'province/beijing',
|
|
||||||
mapOrigin
|
|
||||||
},
|
|
||||||
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,55 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<template slot="header">设置样式</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-map :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-map>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
|
||||||
</template>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
|
||||||
import mapOrigin from '@/pages/demo/charts/list/_data/china'
|
|
||||||
export default {
|
|
||||||
mixins: [
|
|
||||||
list
|
|
||||||
],
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
chartSettings: {
|
|
||||||
position: 'china',
|
|
||||||
mapOrigin,
|
|
||||||
label: false,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
borderColor: '#00f'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
zoom: 1.2
|
|
||||||
},
|
|
||||||
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>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-pie :data="chartData" v-bind="pubSetting"></ve-pie>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">设置指标维度</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">玫瑰图</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">限制显示条数饼图</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">多圆饼图</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">设置饼图半径边距</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-radar :data="chartData" v-bind="pubSetting"></ve-radar>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-ring :data="chartData" v-bind="pubSetting"></ve-ring>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">指定指标维度</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">玫瑰图</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">限制显示条数环图</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">设置环图半径</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-sankey :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-sankey>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">单维度多指标</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-scatter :data="chartData" v-bind="pubSetting"></ve-scatter>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">双维度多指标</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-scatter :data="chartData" v-bind="pubSetting"></ve-scatter>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">径向树图</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-tree :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-tree>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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>
|
|
||||||
<template slot="header">一般</template>
|
|
||||||
<div class="inner">
|
|
||||||
<ve-waterfall :data="chartData" v-bind="pubSetting"></ve-waterfall>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">
|
|
||||||
<d2-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,16 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container type="card" better-scroll>
|
|
||||||
<template slot="header">Header</template>
|
|
||||||
<d2-demo-article/>
|
|
||||||
<template slot="footer">Footer</template>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import d2DemoArticle from './components/d2-demo-article'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
'd2-demo-article': d2DemoArticle
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container type="card">
|
|
||||||
<template slot="header">Header</template>
|
|
||||||
<d2-demo-article/>
|
|
||||||
<template slot="footer">Footer</template>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import d2DemoArticle from './components/d2-demo-article'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
'd2-demo-article': d2DemoArticle
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container type="card">
|
|
||||||
<d2-demo-article/>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import d2DemoArticle from './components/d2-demo-article'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
'd2-demo-article': d2DemoArticle
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="d2-demo-article-control">
|
|
||||||
<el-switch
|
|
||||||
v-model="isLong"
|
|
||||||
active-text="长内容"
|
|
||||||
inactive-text="短内容">
|
|
||||||
</el-switch>
|
|
||||||
</div>
|
|
||||||
<d2-markdown v-show="isLong" :source="long"/>
|
|
||||||
<d2-markdown v-show="!isLong" :source="short"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import long from '../md/long.md'
|
|
||||||
import short from '../md/short.md'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
long,
|
|
||||||
short,
|
|
||||||
isLong: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.d2-demo-article-control {
|
|
||||||
padding: 8px 16px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f4f4f5;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container better-scroll>
|
|
||||||
<template slot="header">Header</template>
|
|
||||||
<d2-demo-article/>
|
|
||||||
<template slot="footer">Header</template>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import d2DemoArticle from './components/d2-demo-article'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
'd2-demo-article': d2DemoArticle
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<template slot="header">Header</template>
|
|
||||||
<d2-demo-article/>
|
|
||||||
<template slot="footer">Footer</template>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import d2DemoArticle from './components/d2-demo-article'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
'd2-demo-article': d2DemoArticle
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<d2-demo-article/>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import d2DemoArticle from './components/d2-demo-article'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
'd2-demo-article': d2DemoArticle
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container type="ghost" better-scroll>
|
|
||||||
<template slot="header">Header</template>
|
|
||||||
<div class="d2-pt d2-pb">
|
|
||||||
<el-card shadow="never" class="d2-card" style="width: 400px;">
|
|
||||||
<d2-demo-article/>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">Footer</template>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import d2DemoArticle from './components/d2-demo-article'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
'd2-demo-article': d2DemoArticle
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container type="ghost">
|
|
||||||
<template slot="header">Header</template>
|
|
||||||
<div class="d2-pt d2-pb">
|
|
||||||
<el-card shadow="never" class="d2-card" style="width: 400px;">
|
|
||||||
<d2-demo-article/>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
<template slot="footer">Footer</template>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import d2DemoArticle from './components/d2-demo-article'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
'd2-demo-article': d2DemoArticle
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container type="ghost">
|
|
||||||
<div class="d2-pt d2-pb">
|
|
||||||
<el-card shadow="never" class="d2-card" style="width: 400px;">
|
|
||||||
<d2-demo-article/>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import d2DemoArticle from './components/d2-demo-article'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
'd2-demo-article': d2DemoArticle
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
## 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,17 +0,0 @@
|
|||||||
## vue.js
|
|
||||||
|
|
||||||
**易用**
|
|
||||||
|
|
||||||
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
|
|
||||||
|
|
||||||
**灵活**
|
|
||||||
|
|
||||||
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
|
|
||||||
|
|
||||||
**高效**
|
|
||||||
|
|
||||||
20kB min+gzip 运行大小
|
|
||||||
|
|
||||||
超快虚拟 DOM
|
|
||||||
|
|
||||||
最省心的优化
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container type="card">
|
|
||||||
<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 type="card">
|
|
||||||
<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 type="card">
|
|
||||||
<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 type="card">
|
|
||||||
<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 type="card">
|
|
||||||
<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 type="card">
|
|
||||||
<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,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container type="card" class="page">
|
|
||||||
<template slot="header">数字动画组件</template>
|
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-card shadow="never" class="d2-card 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-card 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-card 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-card 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" class="d2-card">
|
|
||||||
<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-card 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 {
|
|
||||||
.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,50 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<template slot="header">基本示例</template>
|
|
||||||
<d2-quill
|
|
||||||
style="min-height: 200px; margin-bottom: 20px;"
|
|
||||||
v-model="value"
|
|
||||||
@text-change="textChangeHandler"
|
|
||||||
@selection-change="selectionChangeHandler"
|
|
||||||
@editor-change="editorChangeHandler"/>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
@click="handleAddRow">
|
|
||||||
添加一行
|
|
||||||
</el-button>
|
|
||||||
<el-card shadow="never" class="d2-card d2-mt">
|
|
||||||
<d2-highlight :code="value" format-html/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import value from './value'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
value
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleAddRow () {
|
|
||||||
this.value += '<p style="color: #409EFF;">我是新增的行</p>'
|
|
||||||
},
|
|
||||||
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>`
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user