Merge remote-tracking branch 'origin/codeCheck' into codeCheck
This commit is contained in:
chenjinsong
@@ -749,6 +749,10 @@
|
||||
smooth: 0.2, //曲线变平滑
|
||||
showSymbol: false,
|
||||
data: [],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
},
|
||||
type: chartInfo.type,
|
||||
},
|
||||
metric_name: '',
|
||||
@@ -980,6 +984,10 @@
|
||||
smooth: 0.2, //曲线变平滑
|
||||
showSymbol: false,
|
||||
data: [],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
},
|
||||
type: chartInfo.type,
|
||||
},
|
||||
//visible: true,
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
</div>
|
||||
|
||||
<div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
|
||||
|
||||
<div style="position: absolute;top:50%;left:50%;" v-show="noData">No data</div>
|
||||
<div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
|
||||
<div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
|
||||
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
|
||||
@@ -78,7 +78,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
|
||||
|
||||
<div style="position: absolute;top:50%;left:50%;" v-show="noData">No data</div>
|
||||
<div class="legend-container legend-container-screen" :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
|
||||
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
|
||||
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
|
||||
@@ -101,6 +101,7 @@
|
||||
import chartDataFormat from './chartDataFormat'
|
||||
import {randomcolor} from '../common/js/radomcolor/randomcolor.js'
|
||||
import timePicker from '../common/timePicker'
|
||||
import chartConfig from "../page/dashboard/overview/chartConfig";
|
||||
export default {
|
||||
name: 'lineChartBlock',
|
||||
components: {
|
||||
@@ -133,6 +134,7 @@
|
||||
data() {
|
||||
return {
|
||||
data: {}, // 该图表信息,chartItem
|
||||
noData:false,
|
||||
seriesItem: [], // 保存信息
|
||||
seriesItemScreen:[],
|
||||
images: '',
|
||||
@@ -616,14 +618,30 @@
|
||||
show: true,
|
||||
},
|
||||
splitLine:{
|
||||
show:true
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: "#d9d9d9",
|
||||
opacity: 0.8,
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
//boundaryGap:['20%', '0'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine:{
|
||||
show:true
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: "#d9d9d9",
|
||||
opacity: 0.8,
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
//去掉y轴--start
|
||||
axisLine:{
|
||||
@@ -669,8 +687,17 @@
|
||||
}else {
|
||||
self.echartStore.resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
|
||||
}
|
||||
if(dataArg&&dataArg.length>0){
|
||||
self.echartStore.clear();
|
||||
self.echartStore.setOption(option);//创建图表
|
||||
self.noData=false;
|
||||
}else{
|
||||
self.noData=true;
|
||||
option=chartConfig.getOption('noData')
|
||||
self.echartStore.clear();
|
||||
self.echartStore.setOption(option);//创建图表
|
||||
}
|
||||
|
||||
self.$refs['localLoading'+self.chartIndex].endLoading();
|
||||
self.firstShow = true; // 展示操作按键
|
||||
}, 100);
|
||||
@@ -766,7 +793,15 @@
|
||||
//console.log("11____00",sumHeight,divHeight,legendDiv)
|
||||
self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
|
||||
self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
|
||||
if(dataArg&&dataArg.length>0){
|
||||
self.echartModalStore.setOption(option);//显示全屏界面
|
||||
self.noData=false;
|
||||
}else{
|
||||
self.noData=true;
|
||||
option=chartConfig.getOption('noData')
|
||||
self.echartModalStore.setOption(option);//显示全屏界面
|
||||
}
|
||||
|
||||
}, 100)
|
||||
|
||||
this.echartModalStore.on('magictypechanged', function (params) {
|
||||
|
||||
@@ -309,6 +309,10 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
|
||||
showSymbol:false,
|
||||
smooth: 0.2, //曲线变平滑
|
||||
data: [],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
},
|
||||
type: 'line',
|
||||
}
|
||||
seriesItem.data = result.values.map((item) => {
|
||||
@@ -337,14 +341,12 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
|
||||
this.$refs['promql-'+promqlIndex][0].setError(response.data.error)
|
||||
}
|
||||
})
|
||||
if(series.length>0){
|
||||
|
||||
this.$refs.exploreChart.setLegend(legend);
|
||||
this.$refs.exploreChart.setRandomColors(series.length)
|
||||
this.$refs.exploreChart.setSeries(series)
|
||||
this.defaultChartVisible = true;
|
||||
}else{
|
||||
// this.defaultChartVisible = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.$refs.exploreChart.endLoading();
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<div class="chart-header">{{chartTitle}}</div>
|
||||
|
||||
<div class="chart-body" ref="chartBody" :id="chartId" ></div>
|
||||
<div style="position: absolute;top:50%;left:50%;" v-show="noData">No data</div>
|
||||
|
||||
<div class="legend-container legend-container-screen" id="legendArea" ref="legendArea" v-show="legend.length>0" v-scrollBar:legend>
|
||||
<div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':item.isGray}" :key="'legend_' + item.name+'_'+index">
|
||||
@@ -46,6 +47,7 @@
|
||||
chartId: this.name + '-'+this.guid()+'-'+new Date().getTime(),
|
||||
legend:[],
|
||||
colors:chartConfig.getBgColorList(),
|
||||
noData:false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -99,10 +101,19 @@
|
||||
}
|
||||
}
|
||||
// console.log(this.option)
|
||||
if(this.series&&this.series.length>0){
|
||||
this.$set(this.option,'series',this.series);
|
||||
|
||||
this.noData=false;
|
||||
this.chart.clear();
|
||||
this.chart.setOption(this.option);
|
||||
}else{
|
||||
this.noData=true;
|
||||
let option=chartConfig.getOption('noData');
|
||||
this.chart.clear();
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
|
||||
|
||||
//坐标轴label鼠标悬浮提示
|
||||
if (this.axisTooltip) {
|
||||
let tooltipDom = document.querySelector(".axis-tooltip");
|
||||
|
||||
@@ -88,14 +88,36 @@
|
||||
axisPointer: {//y轴上显示指针对应的值
|
||||
show: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine:{
|
||||
show:false
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: "#d9d9d9",
|
||||
opacity: 0.8,
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine:{
|
||||
show:true
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: "#d9d9d9",
|
||||
opacity: 0.8,
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
// formatter:null,
|
||||
@@ -312,12 +334,58 @@
|
||||
useUTC: false,//使用本地时间
|
||||
series: [],
|
||||
};
|
||||
const noDataOption={
|
||||
grid: {
|
||||
top: 30,
|
||||
left: 0,
|
||||
right: 30,
|
||||
containLabel: true,
|
||||
bottom:8,//156
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: createTempTimes(),
|
||||
splitLine:{
|
||||
show:true
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: [1, 3, 5, 7, 9, 11, 13],
|
||||
splitLine:{
|
||||
show:true
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
series: null,
|
||||
};
|
||||
function createTempTimes(){
|
||||
let times=[];
|
||||
for(let i=0;i<10;i++){
|
||||
let time=new Date();
|
||||
time.setMinutes(new Date().getMinutes()-(10-i)*5);
|
||||
times.push(bus.timeFormate(time,'hh:mm'))
|
||||
}
|
||||
return times;
|
||||
}
|
||||
const chartTypes={
|
||||
line:{name:'line',option:commonOption},
|
||||
overviewLine: {name: 'line', option: overviewLine},
|
||||
map:{name:'map',option:mapOptions},
|
||||
pie: {name: 'assetType', option: assetTypePie},
|
||||
bar: {name: 'alertMessage', option: alertMessageBar}
|
||||
bar: {name: 'alertMessage', option: alertMessageBar},
|
||||
noData:{name:'noData',option:noDataOption},
|
||||
};
|
||||
export default {
|
||||
getOption:function(type){
|
||||
|
||||
Reference in New Issue
Block a user