sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

完善

Browse Source 
Former-commit-id: 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 8c4098bcffd50089b041edcf9d539c64c3c92b16 [formerly 1bf5ee08c5424c0a4cedac421d52cf8c8393ae7f]]]]]
Former-commit-id: 3aa6fad9f9c31f62376dfb27f62fa937d0735e55
Former-commit-id: d293c0b275dc8c4d439fa04a45d9d4efa1dd8f4c
Former-commit-id: a737d8ff3f0c9d829e66a1cd305257961c551eda [formerly 4d2360f8b865bfab066291680106dc95df97ce2a]
Former-commit-id: b64f59d9203d16e71bcd21065aba7ead88566938
Former-commit-id: 4350c691cdff708266be623edf8f1b9d61faeb02
Former-commit-id: 1dba1637790b1f2c87733adfdfcc8491a97bfd1d
Former-commit-id: e17d989004ecb5fb7ce620103b997998da42b8d9
Former-commit-id: 3b781b9b28f6ed584b9c6dbfa5fafe3f8c1475b5
This commit is contained in:
liyang
2018-07-17 21:54:38 +08:00
parent db62c21964
commit 14c921e6b1
214 changed files with 157 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/demo/charts/index/image/icon.png.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
5ad0be3e886c5ecb07a563adbd7ffa5963697b66

9
src/pages/demo/charts/index/index.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<d2-container type="full">
<d2-demo-page-cover
title="图表"
sub-title="集成图表组件">
<img src="./image/icon.png">
</d2-demo-page-cover>
</d2-container>
</template>

9
src/pages/demo/charts/list/_mixin/list.js Normal file
View File

@@ -0,0 +1,9 @@
export default {
data () {
return {
pubSetting: {
height: '100%'
}
}
}
}

45
src/pages/demo/charts/list/bar/demo1/index.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<div class="inner">
<ve-bar :data="chartData" v-bind="pubSetting"></ve-bar>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

49
src/pages/demo/charts/list/bar/demo2/index.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<d2-container type="full">
<template slot="header">指定指标维度</template>
<div class="inner">
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
dimension: ['日期'],
metrics: ['访问用户']
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

52
src/pages/demo/charts/list/bar/demo3/index.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<d2-container type="full">
<template slot="header">排序条形图</template>
<div class="inner">
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
metrics: ['访问用户'],
dataOrder: {
label: '访问用户',
order: 'desc'
}
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

50
src/pages/demo/charts/list/bar/demo4/index.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<d2-container type="full">
<template slot="header">堆叠条形图</template>
<div class="inner">
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
stack: {
'xxx': ['访问用户', '下单用户']
}
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

48
src/pages/demo/charts/list/bar/demo5/index.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<d2-container type="full">
<template slot="header">纵轴为连续的数值轴</template>
<div class="inner">
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
yAxisType: 'value'
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': 1, '访问用户': 1393 },
{ '日期': 2, '访问用户': 3530 },
{ '日期': 5, '访问用户': 2923 },
{ '日期': 10, '访问用户': 1723 },
{ '日期': 15, '访问用户': 3792 },
{ '日期': 36, '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

77
src/pages/demo/charts/list/candle/demo1/index.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<div class="inner">
<ve-candle :data="chartData" v-bind="pubSetting"></ve-candle>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
rows: [
{ '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
{ '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
{ '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
{ '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
{ '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
{ '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
{ '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
{ '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
{ '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
{ '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
{ '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
{ '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
{ '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
{ '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
{ '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
{ '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
{ '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
{ '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
{ '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
{ '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
{ '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
{ '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
{ '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
{ '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
{ '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
{ '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
{ '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
{ '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
{ '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
{ '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
{ '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
{ '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
{ '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
{ '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
{ '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
{ '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
{ '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
{ '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

81
src/pages/demo/charts/list/candle/demo2/index.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<d2-container type="full">
<template slot="header">显示 MA VOL</template>
<div class="inner">
<ve-candle :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-candle>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
showMA: true,
showVol: true
}
return {
chartData: {
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
rows: [
{ '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
{ '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
{ '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
{ '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
{ '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
{ '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
{ '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
{ '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
{ '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
{ '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
{ '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
{ '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
{ '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
{ '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
{ '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
{ '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
{ '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
{ '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
{ '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
{ '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
{ '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
{ '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
{ '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
{ '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
{ '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
{ '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
{ '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
{ '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
{ '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
{ '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
{ '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
{ '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
{ '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
{ '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
{ '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
{ '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
{ '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
{ '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

88
src/pages/demo/charts/list/candle/demo3/index.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<d2-container type="full">
<template slot="header">修改指标名和图例文字</template>
<div class="inner">
<ve-candle :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-candle>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
showMA: true,
showVol: true,
labelMap: {
MA5: 'ma5'
},
legendName: {
'日K': 'day k'
},
showDataZoom: true
}
return {
chartData: {
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
rows: [
{ '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
{ '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
{ '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
{ '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
{ '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
{ '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
{ '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
{ '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
{ '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
{ '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
{ '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
{ '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
{ '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
{ '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
{ '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
{ '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
{ '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
{ '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
{ '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
{ '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
{ '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
{ '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
{ '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
{ '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
{ '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
{ '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
{ '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
{ '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
{ '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
{ '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
{ '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
{ '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
{ '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
{ '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
{ '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
{ '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
{ '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
{ '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

43
src/pages/demo/charts/list/funnel/demo1/index.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<div class="inner">
<ve-funnel :data="chartData" v-bind="pubSetting"></ve-funnel>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['状态', '数值'],
rows: [
{ '状态': '展示', '数值': 900 },
{ '状态': '访问', '数值': 600 },
{ '状态': '点击', '数值': 300 },
{ '状态': '订单', '数值': 100 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

46
src/pages/demo/charts/list/funnel/demo2/index.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<d2-container type="full">
<template slot="header">金字塔</template>
<div class="inner">
<ve-funnel :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-funnel>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
ascending: true
}
return {
chartData: {
columns: ['状态', '数值'],
rows: [
{ '状态': '展示', '数值': 900 },
{ '状态': '访问', '数值': 600 },
{ '状态': '点击', '数值': 300 },
{ '状态': '订单', '数值': 100 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

40
src/pages/demo/charts/list/gauge/demo1/index.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<div class="inner">
<ve-gauge :data="chartData" v-bind="pubSetting"></ve-gauge>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['type', 'a', 'b', 'value'],
rows: [
{ type: '速度', value: 80, a: 1, b: 2 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

49
src/pages/demo/charts/list/heatmap/demo1/index.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<div class="inner">
<ve-heatmap :data="chartData" v-bind="pubSetting"></ve-heatmap>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['时间', '地点', '人数'],
rows: [
{ '时间': '星期一', '地点': '北京', '人数': 1000 },
{ '时间': '星期二', '地点': '上海', '人数': 400 },
{ '时间': '星期三', '地点': '杭州', '人数': 800 },
{ '时间': '星期二', '地点': '深圳', '人数': 200 },
{ '时间': '星期三', '地点': '长春', '人数': 100 },
{ '时间': '星期五', '地点': '南京', '人数': 300 },
{ '时间': '星期四', '地点': '江苏', '人数': 800 },
{ '时间': '星期一', '地点': '北京', '人数': 700 },
{ '时间': '星期三', '地点': '上海', '人数': 300 },
{ '时间': '星期二', '地点': '杭州', '人数': 500 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

69
src/pages/demo/charts/list/heatmap/demo2/index.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<d2-container type="full">
<template slot="header">地图热力图</template>
<div class="inner">
<ve-heatmap :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-heatmap>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
position: 'china',
type: 'map',
geo: {
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
}
return {
chartData: {
columns: ['lat', 'lng', '人数'],
rows: [
{ 'lat': 115.892151, 'lng': 28.676493, '人数': 1000 },
{ 'lat': 117.000923, 'lng': 36.675807, '人数': 400 },
{ 'lat': 113.665412, 'lng': 34.757975, '人数': 800 },
{ 'lat': 114.298572, 'lng': 30.584355, '人数': 200 },
{ 'lat': 112.982279, 'lng': 28.19409, '人数': 100 },
{ 'lat': 113.280637, 'lng': 23.125178, '人数': 300 },
{ 'lat': 110.33119, 'lng': 20.031971, '人数': 800 },
{ 'lat': 104.065735, 'lng': 30.659462, '人数': 700 },
{ 'lat': 108.948024, 'lng': 34.263161, '人数': 300 },
{ 'lat': 103.823557, 'lng': 36.058039, '人数': 500 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

45
src/pages/demo/charts/list/histogram/demo1/index.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<div class="inner">
<ve-histogram :data="chartData" v-bind="pubSetting"></ve-histogram>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

49
src/pages/demo/charts/list/histogram/demo2/index.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<d2-container type="full">
<template slot="header">设置显示的指标维度</template>
<div class="inner">
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
metrics: ['访问用户', '下单用户'],
dimension: ['日期']
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

48
src/pages/demo/charts/list/histogram/demo3/index.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<d2-container type="full">
<template slot="header">柱状图+折线图</template>
<div class="inner">
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
showLine: ['下单用户']
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

48
src/pages/demo/charts/list/histogram/demo4/index.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<d2-container type="full">
<template slot="header">堆叠柱状图</template>
<div class="inner">
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
stack: { '用户': ['访问用户', '下单用户'] }
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

50
src/pages/demo/charts/list/histogram/demo5/index.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<d2-container type="full">
<template slot="header">默认显示柱状图数据</template>
<div class="inner">
<ve-histogram :data="chartData" :extend="extend" v-bind="pubSetting"></ve-histogram>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.extend = {
series: {
label: { show: true, position: 'top' }
}
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

48
src/pages/demo/charts/list/histogram/demo6/index.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<d2-container type="full">
<template slot="header">横轴为连续的数值轴</template>
<div class="inner">
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
xAxisType: 'value'
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': 1, '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': 2, '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': 5, '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': 10, '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': 20, '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': 22, '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

45
src/pages/demo/charts/list/line/demo1/index.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<div class="inner">
<ve-line :data="chartData" v-bind="pubSetting"></ve-line>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data: function () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

54
src/pages/demo/charts/list/line/demo2/index.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<d2-container type="full">
<template slot="header">横坐标的倾斜</template>
<div class="inner">
<ve-line :data="chartData" :extend="extend" v-bind="pubSetting"></ve-line>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data: function () {
this.extend = {
'xAxis.0.axisLabel.rotate': 45
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 },
{ '日期': '1/7', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/8', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/9', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/10', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/11', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/12', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

49
src/pages/demo/charts/list/line/demo3/index.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<d2-container type="full">
<template slot="header">堆叠面积图</template>
<div class="inner">
<ve-line :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-line>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
stack: { '用户': ['访问用户', '下单用户'] },
area: true
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

54
src/pages/demo/charts/list/line/demo4/index.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<d2-container type="full">
<template slot="header">显示指标数值</template>
<div class="inner">
<ve-line :data="chartData" :extend="extend" v-bind="pubSetting"></ve-line>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.extend = {
series: {
label: {
normal: {
show: true
}
}
}
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

54
src/pages/demo/charts/list/line/demo5/index.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<d2-container type="full">
<template slot="header">设置别名</template>
<div class="inner">
<ve-line :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-line>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
labelMap: {
'PV': '访问用户',
'Order': '下单用户'
},
legendName: {
'访问用户': '访问用户 total: 10000'
}
}
return {
chartData: {
columns: ['date', 'PV', 'Order', 'OrderRate'],
rows: [
{ 'date': '1/1', 'PV': 1393, 'Order': 1093, 'OrderRate': 0.32 },
{ 'date': '1/2', 'PV': 3530, 'Order': 3230, 'OrderRate': 0.26 },
{ 'date': '1/3', 'PV': 2923, 'Order': 2623, 'OrderRate': 0.76 },
{ 'date': '1/4', 'PV': 1723, 'Order': 1423, 'OrderRate': 0.49 },
{ 'date': '1/5', 'PV': 3792, 'Order': 3492, 'OrderRate': 0.323 },
{ 'date': '1/6', 'PV': 4593, 'Order': 4293, 'OrderRate': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

44
src/pages/demo/charts/list/map/demo1/index.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<!-- <div class="inner">
<ve-map :data="chartData" v-bind="pubSetting"></ve-map>
</div> -->
大概由于 mock.js 和 v-charts 的网络请求冲突，本示例暂时无法展示
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['位置', '税收', '人口', '面积'],
rows: [
{ '位置': '吉林', '税收': 123, '人口': 123, '面积': 92134 },
{ '位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234 },
{ '位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234 },
{ '位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

47
src/pages/demo/charts/list/map/demo2/index.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<d2-container type="full">
<template slot="header">设置城市</template>
<!-- <div class="inner">
<ve-map :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-map>
</div> -->
大概由于 mock.js 和 v-charts 的网络请求冲突，本示例暂时无法展示
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
position: 'province/beijing'
}
return {
chartData: {
columns: ['位置', '人口'],
rows: [
{ '位置': '延庆区', '人口': 123 },
{ '位置': '密云区', '人口': 1223 },
{ '位置': '平谷区', '人口': 2123 },
{ '位置': '海淀区', '人口': 4123 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

54
src/pages/demo/charts/list/map/demo3/index.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<d2-container type="full">
<template slot="header">设置样式</template>
<!-- <div class="inner">
<ve-map :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-map>
</div> -->
<!-- 大概由于 mock.js 和 v-charts 的网络请求冲突，本示例暂时无法展示 -->
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
position: 'china',
label: false,
itemStyle: {
normal: {
borderColor: '#00f'
}
},
zoom: 1.2
}
return {
chartData: {
columns: ['位置', '人口'],
rows: [
{ '位置': '吉林', ' 人口': 123 },
{ '位置': '北京', ' 人口': 1223 },
{ '位置': '上海', ' 人口': 2123 },
{ '位置': '浙江', ' 人口': 4123 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

45
src/pages/demo/charts/list/pie/demo1/index.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<div class="inner">
<ve-pie :data="chartData" v-bind="pubSetting"></ve-pie>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

49
src/pages/demo/charts/list/pie/demo2/index.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<d2-container type="full">
<template slot="header">设置指标维度</template>
<div class="inner">
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
dimension: '日期',
metrics: '访问用户'
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

48
src/pages/demo/charts/list/pie/demo3/index.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<d2-container type="full">
<template slot="header">玫瑰图</template>
<div class="inner">
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
roseType: 'radius'
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

48
src/pages/demo/charts/list/pie/demo4/index.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<d2-container type="full">
<template slot="header">限制显示条数饼图</template>
<div class="inner">
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
limitShowNum: 5
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

51
src/pages/demo/charts/list/pie/demo5/index.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<d2-container type="full">
<template slot="header">多圆饼图</template>
<div class="inner">
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
level: [
['1/1', '1/2', '1/3'],
['1/4', '1/5']
]
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

49
src/pages/demo/charts/list/pie/demo6/index.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<d2-container type="full">
<template slot="header">设置饼图半径边距</template>
<div class="inner">
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
radius: 150,
offsetY: 250
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

45
src/pages/demo/charts/list/radar/demo1/index.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<div class="inner">
<ve-radar :data="chartData" v-bind="pubSetting"></ve-radar>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

45
src/pages/demo/charts/list/ring/demo1/index.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<div class="inner">
<ve-ring :data="chartData" v-bind="pubSetting"></ve-ring>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

49
src/pages/demo/charts/list/ring/demo2/index.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<d2-container type="full">
<template slot="header">指定指标维度</template>
<div class="inner">
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
dimension: '日期',
metrics: '访问用户'
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

48
src/pages/demo/charts/list/ring/demo3/index.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<d2-container type="full">
<template slot="header">玫瑰图</template>
<div class="inner">
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
roseType: 'radius'
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

48
src/pages/demo/charts/list/ring/demo4/index.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<d2-container type="full">
<template slot="header">限制显示条数环图</template>
<div class="inner">
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
limitShowNum: 3
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

49
src/pages/demo/charts/list/ring/demo5/index.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<d2-container type="full">
<template slot="header">设置环图半径</template>
<div class="inner">
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
radius: [30, 100],
offsetY: 250
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

56
src/pages/demo/charts/list/sankey/demo1/index.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<div class="inner">
<ve-sankey :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-sankey>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
links: [
{ source: '首页', target: '列表页a', value: 0.5 },
{ source: '首页', target: '列表页b', value: 0.5 },
{ source: '列表页a', target: '内容页a-1', value: 0.1 },
{ source: '列表页a', target: '内容页a-2', value: 0.4 },
{ source: '列表页b', target: '内容页b-1', value: 0.2 },
{ source: '列表页b', target: '内容页b-2', value: 0.3 }
]
}
return {
chartData: {
columns: ['页面', '访问量'],
rows: [
{ '页面': '首页', '访问量': 100000 },
{ '页面': '列表页a', '访问量': 20000 },
{ '页面': '列表页b', '访问量': 80000 },
{ '页面': '内容页a-1', '访问量': 10000 },
{ '页面': '内容页a-2', '访问量': 10000 },
{ '页面': '内容页b-1', '访问量': 60000 },
{ '页面': '内容页b-2', '访问量': 20000 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

45
src/pages/demo/charts/list/scatter/demo1/index.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<d2-container type="full">
<template slot="header">单维度多指标</template>
<div class="inner">
<ve-scatter :data="chartData" v-bind="pubSetting"></ve-scatter>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '年龄'],
rows: [
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
{ '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
{ '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },
{ '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
{ '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
{ '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

63
src/pages/demo/charts/list/scatter/demo2/index.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<d2-container type="full">
<template slot="header">双维度多指标</template>
<div class="inner">
<ve-scatter :data="chartData" v-bind="pubSetting"></ve-scatter>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '年龄'],
rows: {
'上海': [
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
{ '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
{ '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },
{ '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
{ '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
{ '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }
],
'北京': [
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
{ '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },
{ '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
{ '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },
{ '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },
{ '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }
],
'广州': [
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
{ '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
{ '日期': '1/3', '访问用户': 2123, '年龄': 30, '下单用户': 3245 },
{ '日期': '1/5', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
{ '日期': '1/4', '访问用户': 5123, '年龄': 18, '下单用户': 4564 },
{ '日期': '1/6', '访问用户': 3843, '年龄': 30, '下单用户': 4850 }
]
}
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

126
src/pages/demo/charts/list/tree/demo1/index.vue Normal file
View File

@@ -0,0 +1,126 @@
<template>
<d2-container type="full">
<template slot="header">径向树图</template>
<div class="inner">
<ve-tree :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-tree>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
seriesMap: {
tree1: {
layout: 'radial'
}
}
}
return {
chartData: {
columns: ['name', 'value'],
rows: [
{
name: 'tree1',
value: [
{
name: 'f',
value: 1,
link: 'https://ele.me',
children: [
{
name: 'a',
value: 1,
link: 'https://ele.me',
children: [
{
name: 'a-a',
link: 'https://ele.me',
value: 2
},
{
name: 'a-b',
link: 'https://ele.me',
value: 2
}
]
},
{
name: 'b',
value: 1,
link: 'https://ele.me',
children: [
{
name: 'b-a',
link: 'https://ele.me',
value: 2
},
{
name: 'b-b',
link: 'https://ele.me',
value: 2
}
]
},
{
name: 'c',
value: 3,
link: 'https://ele.me',
children: [
{
name: 'c-a',
link: 'https://ele.me',
value: 4
},
{
name: 'c-b',
link: 'https://ele.me',
value: 2
}
]
},
{
name: 'd',
value: 3,
link: 'https://ele.me',
children: [
{
name: 'd-a',
link: 'https://ele.me',
value: 4
},
{
name: 'd-b',
link: 'https://ele.me',
value: 2
}
]
}
]
}
]
}
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>

42
src/pages/demo/charts/list/waterfall/demo1/index.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<d2-container type="full">
<template slot="header">一般</template>
<div class="inner">
<ve-waterfall :data="chartData" v-bind="pubSetting"></ve-waterfall>
</div>
<template slot="footer">
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['活动', '时间'],
rows: [
{ '活动': '吃饭', '时间': 4 },
{ '活动': '睡觉', '时间': 10 },
{ '活动': '打豆豆', '时间': 5 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>