no message
Former-commit-id: 0a49e22e5a531c2df8fa90244bedb6e0ac4297c6 [formerly 0a49e22e5a531c2df8fa90244bedb6e0ac4297c6 [formerly 0a49e22e5a531c2df8fa90244bedb6e0ac4297c6 [formerly 0a49e22e5a531c2df8fa90244bedb6e0ac4297c6 [formerly a570816c9de27ef7bc3b80c1cd5bb8bd0f2c9c13 [formerly 39ab0a504140b305df41c0d209d913079d210ef7]]]]] Former-commit-id: 7a56aafdafea6ee6ffd2b046959b88c471eaab15 Former-commit-id: 7466b6ec8a35116a499addb8630047ca7576bacc Former-commit-id: 98b9f572a6b21a6ee02483794ecd0dd0cf6873b3 [formerly 8bbac95c8d9e75c185affb7e7a6f1fddc7cc6ed5] Former-commit-id: c3909adc020a418579d7b3a2034689bba0e35593 Former-commit-id: 35cf98c0c012ee69dad83556f6654ab074730d9b Former-commit-id: ce8623ae25b423c26062e738d0df9276bee3c387 Former-commit-id: 214996c73a86f6b46d2414225b6660358f585946 Former-commit-id: fe121e22a74d82a43357212cd157c01eeda108e5
This commit is contained in:
liyang
9
src/pages/demo/charts/index/index.vue
Normal file
9
src/pages/demo/charts/index/index.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<d2-demo-page-cover
|
||||
title="图表"
|
||||
sub-title="集成图表组件">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/charts.png`">
|
||||
</d2-demo-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
9
src/pages/demo/charts/list/_mixin/list.js
Normal file
9
src/pages/demo/charts/list/_mixin/list.js
Normal file
@@ -0,0 +1,9 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
pubSetting: {
|
||||
height: '100%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
src/pages/demo/charts/list/line/demo1/index.vue
Normal file
45
src/pages/demo/charts/list/line/demo1/index.vue
Normal 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
54
src/pages/demo/charts/list/line/demo2/index.vue
Normal 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
49
src/pages/demo/charts/list/line/demo3/index.vue
Normal 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
54
src/pages/demo/charts/list/line/demo4/index.vue
Normal 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>
|
||||
Reference in New Issue
Block a user