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

no message

Browse Source 
Former-commit-id: 2ac08bdf73416d40f32a3f7965369cb28d4329d3 [formerly 2ac08bdf73416d40f32a3f7965369cb28d4329d3 [formerly 2ac08bdf73416d40f32a3f7965369cb28d4329d3 [formerly 2ac08bdf73416d40f32a3f7965369cb28d4329d3 [formerly 7edbaec35ed1435f9b321dc93a6fc638390e62c1 [formerly 2b79008703fe8c1f2dfc0e74d07589f55f68fa15]]]]]
Former-commit-id: 43f9f620117aa19760d79743b2358e02473f45e6
Former-commit-id: 447bd2d9ae835cc47ceab1283c3b24a5406a234e
Former-commit-id: 0d221eda984865e1d036159f6d92c2858634055c [formerly b6c26e2313ea3786c93d68c6394e4b2c59bdbe17]
Former-commit-id: 79fdc885d3dc2a91ec43a48a11242c8a9f3ffdb1
Former-commit-id: 0959cb5dcdfe874efcb14c4ad8ed2fd5a1886516
Former-commit-id: c7cee26e0b0a5dd22d724c43c0e92828d84fab99
Former-commit-id: f75348850386038a04efa082a8bf71d5d5663f6b
Former-commit-id: 65e82442f2b596e30e183f0522bb4e3a64408738
This commit is contained in:
liyang
2018-06-26 22:20:59 +08:00
parent 9832c730b6
commit 51186622f6
49 changed files with 150 additions and 1677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/pages/demo/chart/all/components/d2-demo-chart-card-header.vue
View File

@@ -1,52 +0,0 @@
<template>
<div>
{{title}}
<span class="d2-fr">
<d2-icon
class="chart-card-header-icon"
:class="{active}"
name="refresh"
@click.native="handleRefresh">
</d2-icon>
</span>
</div>
</template>
<script>
export default {
name: 'd2-demo-chart-card-header',
props: {
title: {
type: String,
required: false,
default: ''
}
},
data () {
return {
active: false
}
},
methods: {
handleRefresh () {
this.active = true
setTimeout(() => {
this.active = false
}, 1000)
this.$emit('refresh')
}
}
}
</script>
<style lang="scss">
@import '~@/assets/style/public.scss';
.chart-card-header-icon {
color: $color-text-sub;
transition: all .3s;
&.active {
transform: rotate(360deg);
}
}
</style>

166
src/pages/demo/chart/all/index.vue
View File

@@ -1,166 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true" class="demo-chart-index">
<el-row :gutter="20">
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(0)" title="<d2-chart-line-base/>"></d2-demo-chart-card-header>
<d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(1)" title="<d2-chart-line-step/>"></d2-demo-chart-card-header>
<d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(2)" title="<d2-chart-column-base/>"></d2-demo-chart-card-header>
<d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(3)" title="<d2-chart-bar-base/>"></d2-demo-chart-card-header>
<d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(4)" title="<d2-chart-pie-base/>"></d2-demo-chart-card-header>
<d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(5)" title="<d2-chart-nightingale-rose-base/>"></d2-demo-chart-card-header>
<d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(6)" title="<d2-chart-radar-base/>"></d2-demo-chart-card-header>
<d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(7)" title="<d2-chart-area-base/>"></d2-demo-chart-card-header>
<d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
</el-card>
</el-col>
</el-row>
</d2-container>
</template>
<script>
export default {
components: {
'd2-demo-chart-card-header': () => import('./components/d2-demo-chart-card-header')
},
data () {
return {
chart: [
{
api: {url: '/api/chart/G2Line', data: {type: 'base'}},
refName: 'd2-chart-line-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Line', data: {type: 'step'}},
refName: 'd2-chart-line-step',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Column', data: {type: 'base'}},
refName: 'd2-chart-column-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
refName: 'd2-chart-bar-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
refName: 'd2-chart-pie-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
refName: 'd2-chart-nightingale-rose-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
refName: 'd2-chart-radar-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Area', data: {type: 'base'}},
refName: 'd2-chart-area-base',
ready: false,
data: []
}
]
}
},
computed: {
// 所有的图表已经 mounted
ready () {
return !this.chart.find(e => !e.ready)
}
},
watch: {
// 在所有的图表 mounted 后加载数据
ready (ready) {
if (ready) {
this.syncData()
this.showInfo()
}
}
},
methods: {
// 显示提示
showInfo () {
this.$notify({
title: '提示',
message: '点击卡片右上角的刷新按钮可以重新载入某个图表的数据',
duration: 10000
})
},
// 图表 mounted
isReady (index) {
this.chart[index].ready = true
},
// 请求图表数据
syncData () {
this.$axios.all(this.chart.map(e => this.$axios.post(e.api.url, e.api.data)))
.then(this.$axios.spread((...res) => {
res.forEach((e, index) => {
this.chart[index].data = e
})
}))
},
// 用户触发了卡片右上角的刷新按钮
handleRefreshData (index) {
const api = this.chart[index].api
this.$axios.post(api.url, api.data)
.then(res => {
this.chart[index].data = res
})
}
}
}
</script>
<style lang="scss">
@import './style.scss';
</style>

21
src/pages/demo/chart/all/style.scss
View File

@@ -1,21 +0,0 @@
@import '~@/assets/style/public.scss';
.demo-chart-index {
.col {
height: 340px;
margin-bottom: 20px;
.el-card {
@extend %unable-select;
height: 100%;
.el-card__body {
height: 100%;
padding: 0px;
}
// 有header的卡片的body高度需要减去header
&.header-in {
.el-card__body {
height: calc(100% - 59px);
}
}
}
}
}

33
src/pages/demo/chart/demo/PieBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-pie-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-pie-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Pie',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

33
src/pages/demo/chart/demo/areaBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-area-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-area-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Area',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

33
src/pages/demo/chart/demo/barBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-bar-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-bar-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Bar',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

33
src/pages/demo/chart/demo/columnBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-column-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-column-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Column',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

66
src/pages/demo/chart/demo/components/d2-demo-chart-card.vue
View File

@@ -1,66 +0,0 @@
<template>
<el-card shadow="never">
<div slot="header">
<el-button type="primary" size="mini" @click="syncData">
<d2-icon name="refresh"/>
加载数据
</el-button>
<el-radio-group v-model="height" size="mini">
<el-radio-button v-for="(item, index) in heightOptions" :key="index" :label="item">{{item}}px</el-radio-button>
</el-radio-group>
</div>
<div :style="style">
<slot :data="data"/>
</div>
</el-card>
</template>
<script>
export default {
props: {
api: {
type: Object,
required: false,
default: () => ({})
}
},
data () {
return {
data: [],
height: 400,
heightOptions: [300, 400, 500, 600]
}
},
computed: {
style () {
return {
height: this.height + 'px'
}
}
},
watch: {
style () {
this.resize()
}
},
mounted () {
// 自动请求一次数据
this.syncData()
},
methods: {
// 请求数据
syncData () {
this.$axios.post(this.api.url, this.api.data)
.then(res => {
this.data = res
})
},
// 重新适应大小
resize () {
this.$nextTick(() => {
this.$emit('resize')
})
}
}
}
</script>

33
src/pages/demo/chart/demo/lineBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-line-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-line-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Line',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

33
src/pages/demo/chart/demo/lineStep.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-line-step slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-line-step>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Line',
data: {
type: 'step'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

6
src/pages/demo/chart/demo/mixins/public.js
View File

@@ -1,6 +0,0 @@
import d2DemoChartCard from '../components/d2-demo-chart-card.vue'
export default {
components: {
'd2-demo-chart-card': d2DemoChartCard
}
}

33
src/pages/demo/chart/demo/nightingaleRoseBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-nightingale-rose-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-nightingale-rose-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2NightingaleRose',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

33
src/pages/demo/chart/demo/radarBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-radar-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-radar-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Radar',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

52
src/pages/demo/chart/dynamicSize/components/d2-demo-chart-card-header.vue
View File

@@ -1,52 +0,0 @@
<template>
<div>
{{title}}
<span class="d2-fr">
<d2-icon
class="chart-card-header-icon"
:class="{active}"
name="refresh"
@click.native="handleRefresh">
</d2-icon>
</span>
</div>
</template>
<script>
export default {
name: 'd2-demo-chart-card-header',
props: {
title: {
type: String,
required: false,
default: ''
}
},
data () {
return {
active: false
}
},
methods: {
handleRefresh () {
this.active = true
setTimeout(() => {
this.active = false
}, 1000)
this.$emit('refresh')
}
}
}
</script>
<style lang="scss">
@import '~@/assets/style/public.scss';
.chart-card-header-icon {
color: $color-text-sub;
transition: all .3s;
&.active {
transform: rotate(360deg);
}
}
</style>

209
src/pages/demo/chart/dynamicSize/index.vue
View File

@@ -1,209 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true" class="demo-chart-index">
<d2-grid-layout v-bind="layout" @layout-updated="layoutUpdatedHandler">
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(0)" title="d2-chart-line-base"></d2-demo-chart-card-header>
<d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(1)" title="d2-chart-line-step"></d2-demo-chart-card-header>
<d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(2)" title="d2-chart-column-base"></d2-demo-chart-card-header>
<d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(3)" title="d2-chart-bar-base"></d2-demo-chart-card-header>
<d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(4)" title="d2-chart-pie-base"></d2-demo-chart-card-header>
<d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(5)" title="d2-chart-nightingale-rose-base"></d2-demo-chart-card-header>
<d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(6)" title="d2-chart-radar-base"></d2-demo-chart-card-header>
<d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(7)" title="d2-chart-area-base"></d2-demo-chart-card-header>
<d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
</el-card>
</d2-grid-item>
</d2-grid-layout>
</d2-container>
</template>
<script>
export default {
components: {
'd2-demo-chart-card-header': () => import('./components/d2-demo-chart-card-header')
},
data () {
return {
chart: [
{
api: {url: '/api/chart/G2Line', data: {type: 'base'}},
refName: 'd2-chart-line-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Line', data: {type: 'step'}},
refName: 'd2-chart-line-step',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Column', data: {type: 'base'}},
refName: 'd2-chart-column-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
refName: 'd2-chart-bar-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
refName: 'd2-chart-pie-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
refName: 'd2-chart-nightingale-rose-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
refName: 'd2-chart-radar-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Area', data: {type: 'base'}},
refName: 'd2-chart-area-base',
ready: false,
data: []
}
],
layout: {
// 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里
layout: [
{'x': 7, 'y': 8, 'w': 5, 'h': 8, 'i': '0'},
{'x': 4, 'y': 16, 'w': 4, 'h': 7, 'i': '1'},
{'x': 8, 'y': 16, 'w': 4, 'h': 7, 'i': '2'},
{'x': 0, 'y': 16, 'w': 4, 'h': 7, 'i': '3'},
{'x': 3, 'y': 8, 'w': 4, 'h': 8, 'i': '4'},
{'x': 9, 'y': 0, 'w': 3, 'h': 8, 'i': '5'},
{'x': 0, 'y': 8, 'w': 3, 'h': 8, 'i': '6'},
{'x': 0, 'y': 0, 'w': 9, 'h': 8, 'i': '7'}
],
colNum: 12,
rowHeight: 30,
isDraggable: true,
isResizable: true,
isMirrored: false,
verticalCompact: true,
margin: [10, 10],
useCssTransforms: true
}
}
},
computed: {
// 所有的图表已经 mounted
ready () {
return !this.chart.find(e => !e.ready)
}
},
watch: {
// 在所有的图表 mounted 后加载数据
ready (ready) {
if (ready) {
this.syncData()
this.showInfo()
}
}
},
methods: {
// 显示提示
showInfo () {
this.$notify({
title: '提示',
message: '你可以按住卡片标题拖拽卡片；或者在每个卡片的右下角拖动，调整大小检查图表尺寸的自适应效果',
duration: 10000
})
},
// 图表 mounted
isReady (index) {
this.chart[index].ready = true
},
// 请求图表数据
syncData () {
this.$axios.all(this.chart.map(e => this.$axios.post(e.api.url, e.api.data)))
.then(this.$axios.spread((...res) => {
res.forEach((e, index) => {
this.chart[index].data = e
})
}))
},
// 布局组件发生变化
layoutUpdatedHandler (newLayout) {
console.group('layoutUpdatedHandler')
newLayout.forEach(e => {
console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
})
console.groupEnd()
},
// 改变尺寸完成
handleResized (name) {
this.$nextTick(() => {
this.$refs[name].resize()
})
},
// 用户触发了卡片右上角的刷新按钮
handleRefreshData (index) {
const api = this.chart[index].api
this.$axios.post(api.url, api.data)
.then(res => {
this.chart[index].data = res
})
}
}
}
</script>
<style lang="scss">
@import './style.scss';
</style>

28
src/pages/demo/chart/dynamicSize/style.scss
View File

@@ -1,28 +0,0 @@
@import '~@/assets/style/public.scss';
.demo-chart-index {
.vue-grid-layout {
margin: -10px;
.el-card {
@extend %unable-select;
height: 100%;
.el-card__body {
height: 100%;
padding: 0px;
}
// 有header的卡片的body高度需要减去header
&.header-in {
.el-card__body {
height: calc(100% - 59px);
}
}
}
.vue-resizable-handle {
bottom: 6px;
right: 6px;
opacity: .3;
&:hover{
opacity: 1;
}
}
}
}

9
src/pages/demo/chart/index/index.vue
View File

@@ -1,9 +0,0 @@
<template>
<d2-container type="full">
<d2-demo-page-cover
title="内置 G2 图表库"
sub-title="如果用不到 建议删除相关代码和依赖">
<img :src="`${$assetsPublicPath}static/image/icon/500/chart.png`">
</d2-demo-page-cover>
</d2-container>
</template>