no message
Former-commit-id: 558e1ab1c2372b618ad3efdb6b3fe3bac813c686 Former-commit-id: c8d48cdd1c06bd537dd78078d76401bb374e6ed9 Former-commit-id: bd727ab8e5bd014afb10dbbe56f7a3f2c876fb28
This commit is contained in:
@@ -11,8 +11,24 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
// 初始化图表
|
// 初始化图表
|
||||||
initHandler () {
|
initHandler () {
|
||||||
this.creatChart()
|
this.chart = new this.G2.Chart({
|
||||||
this.setChartTitle()
|
container: this.$refs.chart,
|
||||||
|
forceFit: this.forceFit,
|
||||||
|
height: this.G2.DomUtil.getHeight(this.$refs.chart),
|
||||||
|
padding: this.padding
|
||||||
|
})
|
||||||
|
this.chart.guide().text({
|
||||||
|
top: true,
|
||||||
|
position: ['min', 'max'],
|
||||||
|
content: this.title,
|
||||||
|
style: {
|
||||||
|
fill: '#666', // 文本颜色
|
||||||
|
fontSize: '16', // 文本大小
|
||||||
|
fontWeight: 'bold' // 文本粗细
|
||||||
|
},
|
||||||
|
offsetX: 0,
|
||||||
|
offsetY: 0
|
||||||
|
})
|
||||||
this.chart.source(this.data)
|
this.chart.source(this.data)
|
||||||
this.chart.scale('value', {
|
this.chart.scale('value', {
|
||||||
min: 0
|
min: 0
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ export default {
|
|||||||
autoInit: {
|
autoInit: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
required: false,
|
||||||
default: false
|
default: true
|
||||||
},
|
},
|
||||||
// [图表设置项] 标题
|
// [图表设置项] 标题
|
||||||
title: {
|
title: {
|
||||||
@@ -40,6 +40,12 @@ export default {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
required: false,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
// [图表设置项] 自动宽度
|
||||||
|
forceFit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
@@ -49,9 +55,7 @@ export default {
|
|||||||
// 数据处理模块
|
// 数据处理模块
|
||||||
dataSet,
|
dataSet,
|
||||||
// 图表实例
|
// 图表实例
|
||||||
chart: null,
|
chart: null
|
||||||
// [图表设置项] 自动宽度
|
|
||||||
forceFit: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
@@ -69,37 +73,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 创建图表
|
|
||||||
creatChart () {
|
|
||||||
this.chart = new this.G2.Chart({
|
|
||||||
container: this.$refs.chart,
|
|
||||||
forceFit: this.forceFit,
|
|
||||||
height: this.G2.DomUtil.getHeight(this.$refs.chart),
|
|
||||||
padding: this.padding
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 设置图表的标题
|
|
||||||
setChartTitle () {
|
|
||||||
if (!this.title) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.guide().text({
|
|
||||||
top: true,
|
|
||||||
position: ['min', 'max'],
|
|
||||||
content: this.title,
|
|
||||||
style: {
|
|
||||||
fill: '#666', // 文本颜色
|
|
||||||
fontSize: '16', // 文本大小
|
|
||||||
fontWeight: 'bold' // 文本粗细
|
|
||||||
},
|
|
||||||
offsetX: 0,
|
|
||||||
offsetY: 0
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 重绘大小
|
// 重绘大小
|
||||||
resize () {
|
resize (width, height) {
|
||||||
if (this.chart) {
|
if (this.chart) {
|
||||||
this.chart.changeSize(this.G2.DomUtil.getWidth(this.$refs.chart), this.G2.DomUtil.getHeight(this.$refs.chart))
|
this.chart.changeSize(width || this.G2.DomUtil.getWidth(this.$refs.chart), height || this.G2.DomUtil.getHeight(this.$refs.chart))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user