gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 单值型图表resize

Browse Source
This commit is contained in:
陈劲松
2020-05-31 17:40:55 +08:00
parent 6f6082d07c
commit 061056b22b
5 changed files with 221 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

392
nezha-fronted/src/components/charts/chart-single-stat.vue
View File

@@ -1,13 +1,11 @@
<style lang="scss" scoped>
@import './chart-single-stat.scss';
</style>
<style>
.max-width-90{
max-width: 90px;
}
<style lang="scss">
@import './line-chart-block.scss';
</style>
<template>
<div class="chart-single-stat" :id="'chartSingleStatDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-single" ref="resizeBox">
<div class="chart-single-stat" :id="'chartSingleStatDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
@@ -18,8 +16,8 @@
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span>
<i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<el-dropdown trigger="click" v-show="firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
@@ -41,7 +39,6 @@
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
</ul>
</el-dropdown>
</div>
<div class="mt-10 single-stat-container" v-cloak v-show="firstShow" >
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="single-stat-content" >
@@ -49,24 +46,26 @@
</div>
</div>
<!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
:visible.sync="screenModal"
width="96%" @close="screenModal = false" >
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<div class="float-right panel-calendar dialog-tool">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
</div>
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
:visible.sync="screenModal"
width="96%" @close="screenModal = false" >
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<div class="float-right panel-calendar dialog-tool">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
</div>
<div class="single-stat-screen-container" >
<div id="chartScreenContainer" ref="chartScreenContainer" class="single-stat-content" >
{{serieSingleStat}}
</div>
</div>
<div class="single-stat-screen-container" >
<div id="chartScreenContainer" ref="chartScreenContainer" class="single-stat-content" >
{{serieSingleStat}}
</div>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</div>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="dragResize"></span>
</div>
<span class="vue-resizable-handle" @mousedown="startResize"></span>
</div>
</div>
</template>
<script>
@@ -77,68 +76,68 @@ import loading from "../common/loading";
import timePicker from '../common/timePicker'
export default {
name: 'chartSingleStat',
name: 'chartSingleStat',
components: {
'loading': loading,
'time-picker':timePicker
},
props: {
// 看板id
panelId: {
type: Number,
default: 0,
},
editChartId: {
type: String,
default: 'editChartId',
},
chartIndex:{
type: Number,
default: 0,
}
props: {
// 看板id
panelId: {
type: Number,
default: 0,
},
data() {
return {
data: {}, // 该图表信息,chartItem
unit:{},
isError:false,
errorContent:'',
seriesItem: [], // 保存信息
seriesItemScreen:[],//全屏数据
serieSingleStat:'',
images: '',
//toolbox: false,
loading:Object,
items: {
metric_name: [], // 每条数据列名称
xAxis: [],
theData: [], // series数据组
},
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
firstLoad: false, // 是否第一次加载
screenModal: false,
// 查询数据使用
filter: {
start_time: '',
end_time: '',
},
firstShow: false, // 默认不显示操作按钮,
caretShow:false,
dragTitleShow:false,
dropdownMenuShow:false,
minHeight:200,
chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
titleHeight:38,//title-height:28,magrin-bottom:10
divFirstShow:false,
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
oldSearchTime: [],
};
},
created() {
editChartId: {
type: String,
default: 'editChartId',
},
chartIndex:{
type: Number,
default: 0,
}
},
data() {
return {
data: {}, // 该图表信息,chartItem
unit:{},
isError:false,
errorContent:'',
seriesItem: [], // 保存信息
seriesItemScreen:[],//全屏数据
serieSingleStat:'',
images: '',
loading:Object,
items: {
metric_name: [], // 每条数据列名称
xAxis: [],
theData: [], // series数据组
},
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
firstLoad: false, // 是否第一次加载
screenModal: false,
// 查询数据使用
filter: {
start_time: '',
end_time: '',
},
firstShow: false, // 默认不显示操作按钮,
caretShow:false,
dragTitleShow:false,
dropdownMenuShow:false,
divFirstShow:false,
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
oldSearchTime: [],
};
},
created() {
},
computed: {},
watch: {},
methods: {
startResize(e) {
let vm = this;
this.$chartResizeTool.start(vm, this.data, e);
},
dragResize:function(e){
var diffWidth =20; //界面的宽度空白的地方的宽度
var chartBoxPadding = 22;
@@ -283,67 +282,65 @@ export default {
document.onmouseup = null;
}
},
startLoading(area){
if(area==='screen'){
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
}else {
//this.showLoading = true;
this.$refs['localLoading'+this.chartIndex].startLoading();
startLoading(area){
if(area==='screen'){
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
}else {
//this.showLoading = true;
this.$refs['localLoading'+this.chartIndex].startLoading();
}
},
endLoading(area){
if(area==='screen'){
//this.showLoadingScreen = false;
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
}else {
//this.showLoading = false;
this.$refs['localLoading'+this.chartIndex].endLoading();
}
},
showLoad(chartItem) {
this.$nextTick(() => {
const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
if(height<this.minHeight){
height = this.minHeight;
}
},
endLoading(area){
if(area==='screen'){
//this.showLoadingScreen = false;
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
}else {
//this.showLoading = false;
this.$refs['localLoading'+this.chartIndex].endLoading();
}
},
clearData(){
},
showLoad(chartItem) {
this.$nextTick(() => {
const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
if(height<this.minHeight){
height = this.minHeight;
}
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
const singleStatBox = document.getElementById('chartContainer'+this.chartIndex);
singleStatBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
});
this.startLoading();
this.divFirstShow = true;
},
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;
this.startLoading();
this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);
},
// 编辑图表
editChart() {
this.dropdownMenuShow=false;
this.$emit('on-edit-chart-block', this.data.id);
},
// 删除该图表
removeChart() {
this.dropdownMenuShow=false;
this.$emit('on-remove-chart-block', this.data.id);
},
//全屏时间条件查询
dateChange(time) {
this.searchTime = [...time];
this.seriesItemScreen = [];
this.serieSingleStat = "";
this.startLoading('screen');
this.$emit('on-search-data', this.data.id, this.searchTime);
},
clickos() {
this.dropdownMenuShow=false;
},
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
const singleStatBox = document.getElementById('chartContainer'+this.chartIndex);
singleStatBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
});
this.startLoading();
this.divFirstShow = true;
},
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;
this.startLoading();
this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);
},
// 编辑图表
editChart() {
this.dropdownMenuShow=false;
this.$emit('on-edit-chart-block', this.data.id);
},
// 删除该图表
removeChart() {
this.dropdownMenuShow=false;
this.$emit('on-remove-chart-block', this.data.id);
},
//全屏时间条件查询
dateChange(time) {
this.searchTime = [...time];
this.seriesItemScreen = [];
this.serieSingleStat = "";
this.startLoading('screen');
this.$emit('on-search-data', this.data.id, this.searchTime);
},
clickos() {
this.dropdownMenuShow=false;
},
clearChart(){
this.data = {};
},
@@ -369,75 +366,70 @@ export default {
}
});
},
// 全屏查看
showAllScreen() {
this.dropdownMenuShow=false;
this.searchTime = [];
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
this.$refs.calendarPanel.setCustomTime(this.searchTime);
// 全屏查看
showAllScreen() {
this.dropdownMenuShow=false;
this.searchTime = [];
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
this.$refs.calendarPanel.setCustomTime(this.searchTime);
this.seriesItemScreen = this.seriesItem;
this.screenModal = true;
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
if(errorMsg && errorMsg!==''){
this.isError = true;
this.errorContent = errorMsg;
this.seriesItemScreen = this.seriesItem;
this.screenModal = true;
},
resize(chartItem) {
document.querySelector('#chartSingleStatDiv' + this.chartIndex + " .single-stat-container").style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`;
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
if(errorMsg && errorMsg!==''){
this.isError = true;
this.errorContent = errorMsg;
}else {
this.isError = false;
this.errorContent = '';
}
if(area==='showFullScreen'){//全屏按时间查询
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
if(Number(seriesItem)){
let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else {
this.isError = false;
this.errorContent = '';
this.serieSingleStat =seriesItem;
}
if(area==='showFullScreen'){//全屏按时间查询
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
if(Number(seriesItem)){
let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else {
this.serieSingleStat =seriesItem;
}
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
this.endLoading('screen');
}else{
this.$nextTick(() => {
const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
if(height<this.minHeight){
height = this.minHeight;
}
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
const singleStatBox = document.getElementById('chartContainer'+this.chartIndex);
singleStatBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
});
this.divFirstShow = true;
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
this.endLoading('screen');
}else{
this.$nextTick(() => {
this.resize(chartItem);
});
this.divFirstShow = true;
this.firstShow = true; // 展示操作按键
this.firstShow = true; // 展示操作按键
this.panelIdInner = panelId;
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
if(Number(seriesItem)){
let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else {
this.serieSingleStat =seriesItem;
}
if (filter) { // 保存数据,用于同步时间
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
this.oldSearchTime[0] = this.searchTime[0];
this.oldSearchTime[1] = this.searchTime[1];
}
this.endLoading();
}
},
this.panelIdInner = panelId;
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
if(Number(seriesItem)){
let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else {
this.serieSingleStat =seriesItem;
}
if (filter) { // 保存数据,用于同步时间
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
this.oldSearchTime[0] = this.searchTime[0];
this.oldSearchTime[1] = this.searchTime[1];
}
this.endLoading();
}
},
},
mounted() {
this.firstLoad = false;
this.firstLoad = false;
},
beforeDestroy() {
this.clearChart();

17
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -41,7 +41,7 @@
</el-dropdown>
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="290" :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table>
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight" :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table>
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" ></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="260">
<template slot-scope="scope">
@@ -116,6 +116,7 @@ export default {
},
data() {
return {
tableHeight: 0,
data: {}, // 该图表信息,chartItem
unit:{},
isError:false,
@@ -224,13 +225,13 @@ export default {
}
},
resize(chartItem) {
let height = Math.round(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
if(height < this.$chartResizeTool.minHeight){
height = this.$chartResizeTool.minHeight;
}
const tableBox = document.getElementById('tableContainer'+this.chartIndex);
tableBox.style.height = `${height-this.$refs.Pagination.$el.offsetHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight-this.$chartResizeTool.chartTableBlankHeight}px`;
tableBox.querySelector(".el-table__body-wrapper")._ps_.update();
let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
container.style.height = `calc(100% - ${deHeight}px)`;
this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
this.$nextTick(() => {
container.querySelector(".el-table__body-wrapper")._ps_.update();
});
},
showLoad(chartItem) {
//设置高度 chart-table

18
nezha-fronted/src/components/charts/line-chart-block.scss
View File

@@ -179,7 +179,23 @@
}
}
}
.line-chart-block, .chart-table {
.chart-single-stat {
width: 100%;
.single-stat-container {
padding-left: 8px;
padding-right: 8px;
display: table;
text-align: center;
width: calc(100% - 16px);
.single-stat-content{
text-align:center;
vertical-align: middle;
display:table-cell;
font-size:30px;
}
}
}
.line-chart-block, .chart-table, .chart-single-stat {
height: 100%;
position: relative;
background-color: white;

151
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -230,158 +230,7 @@
})
}
},
dragResize:function(e){
this.$refs.shadow.classList.add("resize-shadow-active");
var diffWidth = 20;//界面的宽度空白的地方的宽度
var chartBoxPadding = 20;
var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
var targetDivContainer= document.getElementById('listContainer'); //
var maxWidth = targetDivContainer.offsetWidth-diffWidth;
var minWidth = maxWidth/12;
var stepWidth = maxWidth/12;
var stepHeight = 10;
//得到点击时该容器的宽高：
var targetDivHeight=targetDiv.offsetHeight;
var targetDivWidth=targetDiv.offsetWidth;
var startY=e.clientY;
var startX=e.clientX;
var _this=this;
//var heightTmp = targetDivHeight;
//var widthTmp = targetDivWidth;
document.onmousemove=function(e){
e.preventDefault();
//得到鼠标拖动的宽高距离：取绝对值
var distY=Math.abs(e.clientY-startY);
var distX=Math.abs(e.clientX-startX);
//往上方拖动：
if( e.clientY < startY){
targetDiv.style.height=targetDivHeight-distY+'px';
//heightTmp = targetDivHeight-distY;
}
if( e.clientX < startX){
targetDiv.style.width=targetDivWidth-distX+'px';
//widthTmp = targetDivWidth-distX;
}
//往下方拖动：
if (e.clientY > startY) {
targetDiv.style.height=(targetDivHeight+distY)+'px';
//heightTmp = targetDivHeight+distY;
}
if (e.clientX > startX) {
targetDiv.style.width=(targetDivWidth+distX)+'px';
//widthTmp = targetDivWidth+distX;
}
if(parseInt(targetDiv.style.height)<=_this.minHeight){
targetDiv.style.height=_this.minHeight+'px';
//heightTmp = _this.minHeight;
}
if(parseInt(targetDiv.style.width)>=maxWidth){
targetDiv.style.width=maxWidth+'px';
//widthTmp = maxWidth;
}
if(parseInt(targetDiv.style.width)<=minWidth){
targetDiv.style.width=minWidth+'px';
//widthTmp = minWidth;
}
//调整图表大小
if(_this.echartStore){
let divHeight = _this.$refs.legendArea.offsetHeight;
let containerHeight = parseInt(targetDiv.style.height);
let containerWidth = parseInt(targetDiv.style.width);
const chartBox = document.getElementsByClassName('chartBox');
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
_this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)});
}
};
document.onmouseup=function(){
let targetDivHeightNew = parseInt(targetDiv.style.height);
//let targetDivHeightNew = heightTmp
let targetDivWidthNew = parseInt(targetDiv.style.width);
//let targetDivWidthNew = widthTmp;
let diffHeight = Math.abs(targetDivHeight-targetDivHeightNew);
if(targetDivHeight>targetDivHeightNew){
let finalDiffHeight = Math.floor(diffHeight/stepHeight)*stepHeight;
//console.log('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
targetDiv.style.height = (targetDivHeight-finalDiffHeight)+'px';
}
if(targetDivHeight<targetDivHeightNew){
let finalDiffHeight = Math.ceil(diffHeight/stepHeight)*stepHeight;
targetDiv.style.height = (targetDivHeight+finalDiffHeight)+'px';
}
var span = _this.data.span;
if(targetDivWidth>targetDivWidthNew){
span = Math.floor((targetDivWidthNew*12)/maxWidth);
let finalWidth = Math.floor((targetDivWidthNew*12)/maxWidth)*stepWidth;
if((finalWidth)<minWidth){
targetDiv.style.width=minWidth+'px';
span = 1;
}else {
targetDiv.style.width = finalWidth+'px';
}
}
if(targetDivWidth<targetDivWidthNew){
span = Math.ceil((targetDivWidthNew*12)/maxWidth);
let spanUnit = Math.ceil((targetDivWidthNew*12)/maxWidth);
let finalWidth = spanUnit*stepWidth;
if(finalWidth>maxWidth || spanUnit===12){
targetDiv.style.width=maxWidth+'px';
span = 12;
}else {
targetDiv.style.width = finalWidth+'px';
}
}
//调整图表大小
let containerHeight = parseInt(targetDiv.style.height);
let containerWidth = parseInt(targetDiv.style.width);
if(_this.echartStore){
let divHeight = _this.$refs.legendArea.offsetHeight;
const chartBox = document.getElementsByClassName('chartBox');
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
_this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)});
}
const modifyParams = {
id:_this.data.id,
span:span,
height:(containerHeight+_this.chartSpaceHeight),
prev:parseInt(_this.data.prev),
next:parseInt(_this.data.next),
};
targetDiv.style.height = (Math.round((containerHeight+_this.chartSpaceHeight)/10)*10-_this.chartSpaceHeight)+'px';//图表实际渲染高度，采用个位数字四舍五入
//alert('=55='+JSON.stringify(modifyParams));
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
if (response.code === 200) {
//更新当前图表数据
_this.data.span= span;re
_this.data.height= containerHeight+_this.chartSpaceHeight;
_this.$emit('on-drag-chart', _this.data);
}else {
if(response.msg){
_this.$message.error(response.msg);
}else if(response.error){
_this.$message.error(response.error);
}else {
_this.$message.error(response);
}
}
});
document.onmousemove=null;
document.onmouseup = null;
}
},
clickLegend(legendName,index){
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
let curIsGrey=this.isGrey[index];
if(this.echartStore){

7
nezha-fronted/src/tools.js
View File

@@ -419,6 +419,7 @@ export const chartResizeTool = {
//调整resize-box的宽高
box.style.width = `${originalWidth+(mouseX-mouseOriginalX)-chartBlankWidth}px`;
box.style.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`;
//调整
//监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
let remainderWidth = (box.offsetWidth+chartBlankWidth-shadowNewWidth)%stepWidth; //宽的余数
let remainderHeight = (box.offsetHeight+chartBlankHeight-shadowNewHeight)%stepHeight; //高的余数
@@ -467,13 +468,11 @@ export const chartResizeTool = {
}
if (widthChange || heightChange) {
//chart重绘
//step时chart重绘
if (box.classList.contains("resize-box-echarts")) { //echarts类型
vm.echartStore.resize({width: shadow.offsetWidth-16, height: shadow.offsetHeight-titleHeight-vm.$refs.legendArea.offsetHeight});
} else if (box.classList.contains("resize-box-table")) { //table类型
vm.$nextTick(() => {
vm.resize({height: shadow.offsetHeight});
});
box.querySelector(".el-table__body-wrapper")._ps_.update();
}
//chart外层宽高调整
let outerBox = document.getElementById(`chart-${data.id}`);