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 () {
|
changeData () {
|
||||||
if (this.chart) {
|
if (this.chart) {
|
||||||
// 已经初始化过图表 更新数据
|
// 已经初始化过图表 更新数据
|
||||||
|
this.$log('changeData', '已经初始化过图表 只更新数据')
|
||||||
this.chart.changeData(this.data)
|
this.chart.changeData(this.data)
|
||||||
} else {
|
} else {
|
||||||
// 没有图表 新创建一个实例
|
// 没有图表 新创建一个实例
|
||||||
|
this.$log('changeData', '没有图表 新创建一个实例')
|
||||||
this.init()
|
this.init()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,23 +1,35 @@
|
|||||||
import Mock from 'mockjs'
|
import Mock from 'mockjs'
|
||||||
|
|
||||||
|
const r = (add = 0) => {
|
||||||
|
return Math.round(Math.random() * 100) + add
|
||||||
|
}
|
||||||
|
|
||||||
Mock.mock('/api/chart/G2Line', 'post', ({body, type, url}) => {
|
Mock.mock('/api/chart/G2Line', 'post', ({body, type, url}) => {
|
||||||
const _body = JSON.parse(body)
|
const _body = JSON.parse(body)
|
||||||
switch (_body.code) {
|
switch (_body.code) {
|
||||||
case 1:
|
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 {
|
return {
|
||||||
code: 0,
|
code: 0,
|
||||||
msg: '请求成功',
|
msg: '请求成功',
|
||||||
data: [
|
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 }
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
default:
|
default:
|
||||||
return {}
|
return {}
|
||||||
|
|||||||
@@ -8,5 +8,5 @@ import '@/mock/chart'
|
|||||||
|
|
||||||
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
|
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
|
||||||
Mock.setup({
|
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')"
|
@resize="handleResize('G2LineBase1')"
|
||||||
@resized="handleResized('G2LineBase1')">
|
@resized="handleResized('G2LineBase1')">
|
||||||
<el-card class="header-in">
|
<el-card class="header-in">
|
||||||
<div slot="header">近年趋势</div>
|
<ChartCardHeader
|
||||||
|
slot="header"
|
||||||
|
title="近年行情">
|
||||||
|
</ChartCardHeader>
|
||||||
<G2LineBase ref="G2LineBase1" v-bind="chart[0]"></G2LineBase>
|
<G2LineBase ref="G2LineBase1" v-bind="chart[0]"></G2LineBase>
|
||||||
</el-card>
|
</el-card>
|
||||||
</GridItem>
|
</GridItem>
|
||||||
@@ -17,11 +20,15 @@
|
|||||||
<script>
|
<script>
|
||||||
import layout from './mixins/layout'
|
import layout from './mixins/layout'
|
||||||
import chart from './mixins/chart'
|
import chart from './mixins/chart'
|
||||||
|
import ChartCardHeader from './components/ChartCardHeader'
|
||||||
export default {
|
export default {
|
||||||
mixins: [
|
mixins: [
|
||||||
layout,
|
layout,
|
||||||
chart
|
chart
|
||||||
]
|
],
|
||||||
|
components: {
|
||||||
|
ChartCardHeader
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -22,7 +22,9 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
// 更新指定的图表
|
// 更新指定的图表
|
||||||
chartResize (name) {
|
chartResize (name) {
|
||||||
|
this.$nextTick(() => {
|
||||||
this.$refs[name].resize()
|
this.$refs[name].resize()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
// 布局组件发生变化
|
// 布局组件发生变化
|
||||||
layoutUpdatedHandler (newLayout) {
|
layoutUpdatedHandler (newLayout) {
|
||||||
|
|||||||
Reference in New Issue
Block a user