no message
Former-commit-id: 9667b0a25a623f856198d5449e92d89e115f1054 Former-commit-id: eb11c30b2dd9b4041952066961848c5127e44ce8 Former-commit-id: f4813552e90f7902dac59b9527a1243895ac68bb
This commit is contained in:
49
src/components/charts/G2/components/Line/1.vue
Normal file
49
src/components/charts/G2/components/Line/1.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
|
||||
<div ref="chart" style="height: 100%;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import G2 from '@/components/charts/G2/mixins/G2.js'
|
||||
export default {
|
||||
mixins: [
|
||||
G2
|
||||
],
|
||||
methods: {
|
||||
// 初始化图表
|
||||
init () {
|
||||
// mixin 中提供 creatChart
|
||||
this.creatChart()
|
||||
// 本组件的特殊设置
|
||||
this.chart.source(this.data)
|
||||
this.chart.scale('value', {
|
||||
min: 0
|
||||
})
|
||||
this.chart.scale('year', {
|
||||
range: [0, 1]
|
||||
})
|
||||
this.chart.tooltip({
|
||||
crosshairs: {
|
||||
type: 'line'
|
||||
}
|
||||
})
|
||||
this.chart.line().position('year*value')
|
||||
this.chart.point().position('year*value').size(4).shape('circle').style({
|
||||
stroke: '#fff',
|
||||
lineWidth: 1
|
||||
})
|
||||
this.chart.render()
|
||||
},
|
||||
// 数据源改变 重新渲染新的数据
|
||||
changeData () {
|
||||
if (this.chart) {
|
||||
// 已经初始化过图表 更新数据
|
||||
this.chart.changeData(this.data)
|
||||
} else {
|
||||
// 没有图表 新创建一个实例
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -36,7 +36,7 @@ export default {
|
||||
watch: {
|
||||
// 数据改变
|
||||
data () {
|
||||
this.refreshData()
|
||||
this.changeData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -86,11 +86,11 @@ export default {
|
||||
)
|
||||
},
|
||||
// 更新数据
|
||||
refreshData () {
|
||||
changeData () {
|
||||
this.$log(
|
||||
'@/components/charts/G2/mixins/G2.js',
|
||||
'图表没有正确刷新数据',
|
||||
'如果你看到这条消息 请检查是否在图表组件中设置refreshData方法'
|
||||
'如果你看到这条消息 请检查是否在图表组件中设置changeData方法'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user