no message
Former-commit-id: 0cdf814303614e8577d56874f9384888b1c9e613 Former-commit-id: e676ef372115ff3ffebe667096553dc506f5c798 Former-commit-id: 0bb4e736a85e70b4d741d9256d3ee2c1b3fe9019
This commit is contained in:
@@ -38,9 +38,11 @@ export default {
|
||||
changeData () {
|
||||
if (this.chart) {
|
||||
// 已经初始化过图表 更新数据
|
||||
this.$log('changeData', '已经初始化过图表 只更新数据')
|
||||
this.chart.changeData(this.data)
|
||||
} else {
|
||||
// 没有图表 新创建一个实例
|
||||
this.$log('changeData', '没有图表 新创建一个实例')
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,35 @@
|
||||
import Mock from 'mockjs'
|
||||
|
||||
const r = (add = 0) => {
|
||||
return Math.round(Math.random() * 100) + add
|
||||
}
|
||||
|
||||
Mock.mock('/api/chart/G2Line', 'post', ({body, type, url}) => {
|
||||
const _body = JSON.parse(body)
|
||||
switch (_body.code) {
|
||||
case 1:
|
||||
let lastValue = 0
|
||||
const temp = [
|
||||
{ year: '1991', value: 0 },
|
||||
{ year: '1992', value: 0 },
|
||||
{ year: '1993', value: 0 },
|
||||
{ year: '1994', value: 0 },
|
||||
{ year: '1995', value: 0 },
|
||||
{ year: '1996', value: 0 },
|
||||
{ year: '1997', value: 0 },
|
||||
{ year: '1998', value: 0 },
|
||||
{ year: '1999', value: 0 }
|
||||
]
|
||||
const data = temp.map(e => {
|
||||
e.value = lastValue + r()
|
||||
lastValue = e.value
|
||||
return e
|
||||
})
|
||||
lastValue = 0
|
||||
return {
|
||||
code: 0,
|
||||
msg: '请求成功',
|
||||
data: [
|
||||
{ year: '1991', value: 3 },
|
||||
{ year: '1992', value: 4 },
|
||||
{ year: '1993', value: 3.5 },
|
||||
{ year: '1994', value: 5 },
|
||||
{ year: '1995', value: 4.9 },
|
||||
{ year: '1996', value: 6 },
|
||||
{ year: '1997', value: 7 },
|
||||
{ year: '1998', value: 9 },
|
||||
{ year: '1999', value: 13 }
|
||||
]
|
||||
data
|
||||
}
|
||||
default:
|
||||
return {}
|
||||
|
||||
@@ -8,5 +8,5 @@ import '@/mock/chart'
|
||||
|
||||
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
|
||||
Mock.setup({
|
||||
timeout: '600-1000'
|
||||
timeout: '300-600'
|
||||
})
|
||||
|
||||
30
src/pages/demo/chart/index/components/ChartCardHeader.vue
Normal file
30
src/pages/demo/chart/index/components/ChartCardHeader.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
{{title}}
|
||||
<span class="dd-fr">
|
||||
<el-tooltip effect="dark" content="刷新数据" placement="top">
|
||||
<Icon class="chart-card-header-icon" name="refresh"></Icon>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/assets/style/public.scss';
|
||||
.chart-card-header-icon {
|
||||
color: $color-text-sub;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,7 +6,10 @@
|
||||
@resize="handleResize('G2LineBase1')"
|
||||
@resized="handleResized('G2LineBase1')">
|
||||
<el-card class="header-in">
|
||||
<div slot="header">近年趋势</div>
|
||||
<ChartCardHeader
|
||||
slot="header"
|
||||
title="近年行情">
|
||||
</ChartCardHeader>
|
||||
<G2LineBase ref="G2LineBase1" v-bind="chart[0]"></G2LineBase>
|
||||
</el-card>
|
||||
</GridItem>
|
||||
@@ -17,11 +20,15 @@
|
||||
<script>
|
||||
import layout from './mixins/layout'
|
||||
import chart from './mixins/chart'
|
||||
import ChartCardHeader from './components/ChartCardHeader'
|
||||
export default {
|
||||
mixins: [
|
||||
layout,
|
||||
chart
|
||||
]
|
||||
],
|
||||
components: {
|
||||
ChartCardHeader
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -22,7 +22,9 @@ export default {
|
||||
methods: {
|
||||
// 更新指定的图表
|
||||
chartResize (name) {
|
||||
this.$refs[name].resize()
|
||||
this.$nextTick(() => {
|
||||
this.$refs[name].resize()
|
||||
})
|
||||
},
|
||||
// 布局组件发生变化
|
||||
layoutUpdatedHandler (newLayout) {
|
||||
|
||||
Reference in New Issue
Block a user