<!--
|
/**
|
* @name gunter
|
* @module C:\project-total\hx_web\src\components\gunter.vue
|
* @description 甘特图
|
* @author xiashan
|
* @date 2020-03-12
|
* @example <gunter></gunter>
|
*/
|
-->
|
<template>
|
<div class="gunter-chart">
|
<div class="mod-demo-echarts">
|
<div :id="gunterId" class="chart-box"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import HighCharts from 'highcharts'
|
import highchartsMore from 'highcharts/highcharts-more'
|
highchartsMore(HighCharts)
|
import ECharts from 'vue-echarts/components/ECharts.vue'
|
import 'echarts/lib/chart/gauge'
|
import 'echarts/lib/chart/Pie'
|
import 'echarts/lib/component/tooltip'
|
|
export default {
|
name: 'gunterchart',
|
props: {
|
gunterData: {
|
type: Object,
|
required: true
|
},
|
successData: {
|
type: Boolean
|
}
|
},
|
components: {
|
ECharts
|
},
|
data() {
|
return {
|
gunterline: null,
|
option: {},
|
gunterId: 'gunterline' + Math.random().toString(36).substr(2) + Date.now(),
|
data: this.gunterData.data
|
}
|
},
|
mounted() {
|
this.initgunterline()
|
},
|
|
activated() {
|
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
if (this.gunterline) {
|
this.gunterline.resize()
|
}
|
},
|
methods: {
|
// 初始化
|
initgunterline() {
|
const _self = this
|
this.option = {
|
chart: { type: 'xrange', marginTop: 30 },
|
title: {
|
text: '',
|
style: {
|
fontSize: '15px'
|
}
|
},
|
xAxis: {
|
type: 'datetime',
|
tickInterval: 50,
|
dateTimeLabelFormats: {
|
// week: '%Y/%m/%d'
|
week: '%Y/%m/%d %H%M'
|
}
|
},
|
yAxis: {
|
title: { text: '' },
|
categories: [_self.gunterData.yAxistext],
|
reversed: true
|
},
|
legend: { enabled: false },
|
credits: { enabled: false },
|
exporting: { enabled: false },
|
tooltip: {
|
formatter: function() {
|
var x = new Date(this.x)
|
// console.log(this.x + '---x1-' + x2)
|
|
var x2 = new Date(this.x2)
|
// console.log(this.x2 + '--x2--' + x2)
|
var status = this.point.status
|
var start = '<b>' + x.getUTCFullYear() + '-' + (x.getUTCMonth() + 1) + '-' + x.getUTCDate() + ' ' + x.getUTCHours() + ':' + x.getUTCMinutes() + ':' + x.getSeconds() + '</b>'
|
var end = '<b>' + x2.getUTCFullYear() + '-' + (x2.getUTCMonth() + 1) + '-' + x2.getUTCDate() + ' ' + x2.getUTCHours() + ':' + x2.getUTCMinutes() + ':' + x2.getSeconds() + '</b>'
|
var time = status + ':' + start + '至' + end
|
return time
|
}
|
},
|
plotOptions: { series: { turboThreshold: 200000 }},
|
lang: {
|
noData: '暂无数据显示'// 自定义显示文本
|
},
|
noData: { // 自定义样式
|
style: { // 对无数据标签的CSS样式。 默认值：[object Object].
|
fontWeight: 'bold',
|
fontSize: '18px',
|
color: '#333333'
|
}
|
},
|
series: [
|
{
|
groupPadding: 0,
|
borderColor: 'gray',
|
pointWidth: 30,
|
data: []
|
}
|
]
|
}
|
// eslint-disable-next-line no-undef
|
this.brokenline = echarts.init(document.getElementById(this.gunterId))
|
// 等待加载loading
|
this.brokenline.showLoading({
|
text: 'loading',
|
color: '#19678E',
|
textColor: '#c9c9c9',
|
maskColor: '#f0f0f0',
|
zlevel: 0
|
})
|
this.handleSeriesData()
|
},
|
handleSeriesData() {
|
this.option.series[0].data = this.gunterData.data
|
this.option.title.text = this.gunterData.title
|
this.brokenline.hideLoading()
|
this.brokenline.clear()
|
// eslint-disable-next-line no-undef
|
Highcharts.chart(this.gunterId, this.option)
|
}
|
},
|
watch: {
|
gunterData: {
|
handler() {
|
if (this.successData) {
|
this.handleSeriesData()
|
}
|
},
|
deep: true
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.gunter-chart {
|
.mod-demo-echarts {
|
.chart-box {
|
min-height: 150px;
|
}
|
}
|
}
|
</style>
|
