<template>
<div class="x-bar">
<el-checkbox v-show="isQueryData" class="radio" v-model="checked" @change="handleChecked">暗黑模式</el-checkbox>
<div v-show="isQueryData" class="legend">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleAllCheck">全选</el-checkbox>
<!-- 自定义图例 start-->
<el-checkbox-group v-model="checkList" @change="changCheck">
<el-checkbox v-for="item in legendData" :label="item.index" :key="item.index" @change="handleCheck($event,item.index, item.name)">{{item.name}}<span class="polygon" :style="{background: item.color}"></span></el-checkbox>
</el-checkbox-group>
<!-- 自定义图例 end-->
</div>
<div class="chartCon">
<div v-show="checkList.length || isClickLegend || isQueryData" @wheel="handleWheel" :id="id" :option="option"></div>
<div class="xrangBox">
<xrange-chart @changeAreaBg="changeAreaBg" :chartData="chartData" id="xrangChart"></xrange-chart>
</div>
</div>
</div>
</template>
<script>
import XrangeChart from './xrangeChart/index';
import HighCharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDirilldown from 'highcharts/modules/drilldown';
import exportingInit from 'highcharts/modules/exporting';
import fullScreen from 'highcharts/modules/full-screen';
HighchartsMore(HighCharts);
HighchartsDirilldown(HighCharts);
exportingInit(HighCharts);
fullScreen(HighCharts);
export default {
components: {
XrangeChart
},
// 验证类型
props: {
id: {
type: String,
default: "container"
},
option: {
type: Object
},
isEvent: {
type: Boolean,
default: true
},
isQueryData: {
type: Boolean,
default: false
}
},
data() {
return {
chart: null,
legendData: [],
defaultCheck: [],
checkList: [],
isClickLegend: false,
checked: false,
checkAll: true,
isIndeterminate: false,
clearLeng: [],
isClearSelect: false,
chartData: { // 甘特图数据
bstatc: [],
leftstatc: [],
rightstatc: []
}
}
},
watch: {
option: {
deep: true,
handler (newVal) {
if(this.chart) {
this.chart.destroy();
}
this.chart = new HighCharts.Chart(this.id, newVal);
this.legendQuery();
}
}
},
mounted() {
// this.chart = HighCharts.chart(this.id, this.option);
this.chart = new HighCharts.Chart(this.id, this.option);
// 自定义图例
this.legendQuery();
// 甘特图
this.getBstatcParams();
window.addEventListener('resize', this.resizeHandler);
},
destroyed() {
window.removeEventListener('resize',this.resizeHandler);
this.chart && this.chart.destroy();
},
methods: {
// 选中区域颜色
changeAreaBg(event) {
this.selectedAreaBg(event);
},
legendQuery() {
console.log("legendQuery=>>>>>>>>>>>>>>", this.egendData)
this.checkList = [];
// 从new HighCharts 中 this.chart 拿到图例需要的数据
this.legendData = this.chart && this.chart.series || [];
this.legendData.length && this.legendData.map(item => {
// 判断清空的按钮
if(!(this.clearLeng.includes(item.index) && this.isClickLegend)) {
this.checkList.push(item.index);
}
this.defaultCheck.push(item.index);
})
this.clearLeng.map(item => {
this.chart.series[item].hide();
})
},
resizeHandler() {
this.chart && this.chart.reflow();
},
handleWheel(event) {
if(this.isEvent) {
if(this.checkList.length < 1) {
this.$message.closeAll();
return this.$message.warning("至少选中一条数据!");
}
if(event.deltaY > 0) {
this.$emit('mouseScroll', 'down');
} else {
this.$emit('mouseScroll','up');
}
}
},
// 全选
handleAllCheck(val) {
this.checkList = val ? this.defaultCheck : [];
this.isIndeterminate = false;
if(val) {
this.chart.series.map((item, index) => {
this.chart.series[index].show()
})
this.clearLeng = [];
}else {
this.chart.series.map((item, index) => {
this.chart.series[index].hide()
});
}
},
// 点击多选框1
changCheck(val) {
let checkedCount = val.length;
this.checkAll = checkedCount == this.defaultCheck.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.defaultCheck.length;
},
// 点击图例多选框2 隐藏/显示某条数据
handleCheck(state,value,name) {
this.isClickLegend = true;
if(state) {
this.chart.series[value].show();
this.clearLeng = this.clearLeng.filter(item => item != value);
} else {
this.chart.series[value].hide();
this.clearLeng.push(value);
}
},
// 改变图表背景色
handleChecked(val) {
let bgColor = val ? '#000' : '#fff';
this.chart.update({
chart: {
backgroundColor: bgColor
}
})
this.$emit("changeCharBg",bgColor);
},
// 点击重置
resetClick() {
this.clearLeng = [];
},
// 选中区域的颜色
selectedAreaBg(data) {
this.chart.update({
xAxis: {
plotBands: [
{
className: 'plotBands',
color: 'red',
from: data.point.x,
to: data.point.x2,
events: {
click: (event) => {
this.$emit("plotBandsClick", data.point.x,data.point.x2);
}
}
}
]
}
})
},
}
}
</script>
<style scoped>
.x-bar {
display: flex;
100%;
height: 100%;
position: relative;
}
.x-bar .chartCon {
flex: 1;
}
.x-bar .legend {
200px;
border: 1px solid #ccc;
padding: 15px 0 0 20px;
}
.x-bar .legend /deep/ .el-checkbox {
margin-right: 0;
}
.x-bar .legend /deep/ .el-checkbox-group {
display: flex;
height: 100%;
flex-flow: column;
overflow-y: auto;
}
.x-bar .legend .el-checkbox-group /deep/ .el-checkbox {
margin-top: 15px;
display: flex;
align-items: center;
}
#container {
100%;
height: 100%;
}
.x-bar /deep/ .el-empty {
margin: 0 auto;
}
/deep/.el-checkbox__label {
140px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.x-bar .polygon {
display: inline-block;
15px;
height: 4px;
position: absolute;
right: 5px;
top: 8px;
}
.x-bar .radio {
display: flex;
align-items: center;
position: absolute;
left: 750px;
top: 13px;
z-index: 3;
}
.xrangBox {
100%;
height: 400px;
}
</style>