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

feat:新增饼图

Browse Source
This commit is contained in:
wangwenrui
2021-02-07 18:19:59 +08:00
parent 25eb0ce600
commit caaa0ab737
12 changed files with 868 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/charts/chart-alert-list.vue
View File

@@ -42,6 +42,7 @@
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow || isPreview">
<alertMessageTable
:id="'tableContainer'+chartIndex"
:tableData="storedTableData"
:loading="loadingTable"
:tableHeight="tableHeight"
@@ -66,6 +67,7 @@
<!-- <span class="float-right dialog-tool" @click="screenRefreshChart"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
</div>
<alertMessageTable
:id="'tableContainer'+chartIndex"
:tableData="storedScreanTableData"
:loading="loadingTable"
:tableHeight="'95%'"

52
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -157,6 +157,19 @@
@on-edit-chart-block="editData"
@dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
></chart-alert-list>
<chart-pie :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'pie'" :temp-dom="tempDom"
@on-refresh-data="refreshChart"
@on-search-data="searchData"
@on-remove-chart-block="removeChart"
@on-duplicate-chart-block="duplicateChart"
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
:chart-data="item"
:is-lock="panelLock"
:panel-id="filter.panelId"
@dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
:chart-index="index"></chart-pie>
</div>
</draggable>
<el-row v-if="dataList.length === 0" class="noData"></el-row>
@@ -176,6 +189,7 @@
import chartDataFormat from "./chartDataFormat";
import chartAlertList from './chart-alert-list'
import textChart from './text-chart'
import chartPie from './chart-pie'
// import visNetwork from './visNetwork'
export default {
name: 'chartList',
@@ -196,7 +210,8 @@
chartUrl,
chartSingleStat,
draggable,
textChart
textChart,
chartPie,
// visNetwork,
},
data() {
@@ -681,7 +696,7 @@
this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
panelId, filter,'',errorMsg);
}
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4||chartItem.type ==='pie') {
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
panelId, filter, legend, filterType,errorMsg);
@@ -817,6 +832,28 @@
threshold: null,
};*/
let errorMsg = "";
let pieSeries;
if(chartInfo.type ==='pie'){
pieSeries={
type: 'pie',
radius: ['20%', '100%'],
center: ['50%', '50%'],
roseType: 'radius',
minAngle:10,
itemStyle: {
borderRadius: 5
},
label: {
show: false
},
emphasis: {
label: {
show: false
}
},
data:[]
}
}
res.forEach((response, innerPos) => {
if (response.status === 'success') {
errorMsg = "";
@@ -939,8 +976,12 @@
});
return [dpsItem[0] * 1000, dpsItem[1]];
});
if(chartInfo.type === 'pie'){
pieSeries.data.push({value:bus.getSingleStatRlt(chartInfo.param.statistics,seriesItem.theData.data),name:host+"-"+chartItem.elements[innerPos].id+"-" + resIndex})
}else{
series.push(seriesItem.theData);
seriesItem = null;
}
} else if (chartItem.elements && chartItem.elements[innerPos]) {
// 无数据提示
/*
@@ -971,6 +1012,9 @@
});
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
if(chartInfo.type === 'pie'){
series.push(pieSeries)
}
let chartData = {
chartItem: chartItem,
series: series,
@@ -991,7 +1035,7 @@
this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
this.filter.panelId, this.filter, '', errorMsg);
}
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4||chartItem.type == 'pie') {
if (series.length && chartItem.type === 4) {//曲线汇总
//series.push(sumData);//后续需要
}
@@ -1023,7 +1067,7 @@
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
this.filter);
}
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4||chartItem.type === 'pie') {
if (filterType === 'showFullScreen') {//table的全屏查询
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
this.filter, filterType);

623
nezha-fronted/src/components/charts/chart-pie.vue Normal file
View File

@@ -0,0 +1,623 @@
<style lang="scss">
@import './chart.scss';
</style>
<template>
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-echarts" ref="resizeBox">
<div class="chart-single-stat" :id="'chartPieChart'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
v-if="isError"
:close-delay=10
placement="top-start"
trigger="hover"
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>
</span>
</el-popover>
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
<li @click="refreshChart" class="el-dropdown-menu__item">
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
<li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
<li @click="showAllScreen" class="el-dropdown-menu__item">
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
</ul>
</el-dropdown>
</div>
<div :id="'pie-chart-local-'+chartIndex" ref="pieChartLocal" ></div>
<div class="chart-no-data" v-show="noData">No Data</div>
<div class='legend-container' ref="legendArea" v-show="firstShow">
<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':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
</div>
</div>
<!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" @opened="initChart('screen')"
:visible.sync="screenModal"
width="96%" @close="screenModal = false" :modal-append-to-body="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>-->
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
</div>
<!-- <span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
</div>
<div class="single-stat-screen-container" >
<div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
<div :id="'screenLegendArea'+chartIndex" class="legend-container legend-container-screen">
<div v-for="(item, index) in legendScreen" :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':item.color)}"></span>{{item.alias?item.alias:item.name}}
<br/><!--bgColorList[index]-->
</div>
</div>
</div>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
</div>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
</div>
</div>
</template>
<script>
import chartDataFormat from './chartDataFormat'
import loading from "../common/loading";
import timePicker from '../common/timePicker'
import * as echarts from 'echarts'
import {getChart, setChart} from "../common/js/common";
import chart from '../page/dashboard/overview/chart'
import chartConfig from "../page/dashboard/overview/chartConfig";
import {randomcolor} from "../common/js/radomcolor/randomcolor";
export default {
name: 'pieChart',
components: {
'loading': loading,
'time-picker':timePicker,
chart,
},
props: {
tempDom:Object,
chartData: {
type: Object
},
// 看板id
panelId: {
type: Number,
default: 0,
},
editChartId: {
type: String,
default: 'editChartId',
},
chartIndex:{
type: Number,
default: 0,
},
from: {type: String},
isLock:{type:Boolean,default:false}
},
data() {
return {
data: {}, // 该图表信息,chartItem
noData:false,
unit:{},
isError:false,
errorContent:'',
seriesItem: [], // 保存信息
seriesItemScreen:[],//全屏数据
pieData:[],
mapping:'',//满足valueMapping时 mapping的值
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: [],
legend:[],
legendScreen:[],
isGrey:[],
isGreyScreen:[],
echart:null,
echartScreen:null,
bgColorList:[],
option:{
title: {
show: false,
},
legend:{
show:false,
},
grid: {
left:'center',
top:'middle',
},
tooltip:{
trigger:'item',
backgroundColor:'rgba(221,228,237,1)',
borderColor :'rgba(255,255,255,0)',
textStyle:{
color:'#000'
},
textStyle:{
color:'#000'
},
axisPointer:{
snap:false,
animation:false,
},
extraCssText:'z-index:1000;',
},
series:null,
}
};
},
created() {
},
computed: {},
watch: {
dropdownMenuShow(n) {
this.$emit("dropmenu-change", n);
}
},
methods: {
startResize(e) {
let vm = this;
this.$chartResizeTool.start(vm, this.data, e,this.chartIndex);
},
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('chartPieChart'+this.chartIndex);
let height = Math.floor(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
if(height<this.$chartResizeTool.minHeight){
height = this.$chartResizeTool.minHeight;
}
chartBox.style.height = `${height-this.$chartResizeTool.chartBlankHeight}px`;
});
this.clearData();
this.firstShow = false;
this.$refs['localLoading'+this.chartIndex].startLoading();
this.divFirstShow = true;
},
clearData(){
if(getChart(this.chartIndex)){
getChart(this.chartIndex).clear();
// getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
}
},
screenRefreshChart(){
this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
},
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;
let id = this.data.id;
this.clearChart();
this.$refs['localLoading'+this.chartIndex].startLoading();
this.firstShow = false;
this.$emit('on-refresh-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.seriesItemScreen = [];
this.seriePieChart = "";
this.startLoading('screen');
this.$emit('on-search-data', this.data.id, this.searchTime);
},
clickos() {
this.dropdownMenuShow=false;
},
clearChart(){
this.data = {};
},
duplicate(){
this.dropdownMenuShow=false;
this.$confirm(this.$t("tip.confirmDuplicate"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'info'
}).then(() => {
const param = {id:this.data.id};
this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
if (response.code === 200) {
this.$message({
duration: 2000,
type: 'success',
message: this.$t("tip.duplicateSuccess")
});
this.$emit('on-duplicate-chart-block', this.data.id,response.data);
}else {
if(response.msg){
this.$message.error(response.msg);
}else if(response.error){
this.$message.error(response.error);
}else {
this.$message.error(response);
}
}
});
});
},
// 全屏查看
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.screenModal = true;
},
resize(chartItem) {
getChart(this.chartIndex).resize()
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,legend,area,errorMsg) {
if(errorMsg && errorMsg!==''){
this.isError = true;
this.errorContent = errorMsg;
}else {
this.isError = false;
this.errorContent = '';
}
if(seriesItem||seriesItem.data.length<1){ //0 为false
this.noData=false;
}else{
this.noData=true;
}
this.legend = legend;
this.legendScreen=legend
legend && this.setColor(legend.length);
legend && legend.forEach((t,i)=>{t.color = this.bgColorList[i]});
this.$set(this.option,'color',this.bgColorList)
console.log('legend',legend)
this.pieData = seriesItem;
if(area==='showFullScreen'){//全屏按时间查询
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
this.initChart('screen')
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
this.endLoading('screen');
}else{
this.divFirstShow = true;
this.firstShow = true; // 展示操作按键
this.panelIdInner = panelId;
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
this.initChart('local')
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();
}
},
formatLegend(chartWidth,name){
if(!name){
return '';
}
//计算宽度
let span = document.querySelector(".temp-dom");
span.textContent = name;
let txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width;
if(txtWidth < chartWidth){
return name;
}else {
let charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
return name.slice(0,charNum)+'...';
}
},
initChart:function(type){
this.option.series = this.pieData;
if(type == 'local'){
this.initLocal();
}else{
this.initScreen()
}
},
initLocal:function(){
let self=this;
let dom = document.getElementById('pie-chart-local-'+this.chartIndex)
if(!this.echart){
this.echart= echarts.init(dom);
setChart(this.chartIndex, this.echart);
}
if(this.legend){
this.isGrey=[];
this.legend.map((item, i) => {
const legend = {
name:item.name,
alias:item.alias,
color:item.color,
showText:this.formatLegend(dom.clientWidth,item.name)
};
self.isGrey.push(false);
return legend
});
}
this.$nextTick(() => {
setTimeout(function () {
let divHeight = self.$refs.legendArea.offsetHeight;
if(!self.chartData.height){
getChart(self.chartIndex).resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
}else {
getChart(self.chartIndex).resize({height:(self.chartData.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
}
self.$set(self.option.tooltip,'formatter',self.formatterFunc)
if(self.pieData[0].data.length>0){
getChart(self.chartIndex).clear();
getChart(self.chartIndex).setOption(self.option);//创建图表
self.noData=false;
}else{
self.noData=true;
self.option=chartConfig.getOption('noData')
getChart(self.chartIndex).clear();
getChart(self.chartIndex).setOption(self.option);//创建图表
}
self.$refs['localLoading'+self.chartIndex].endLoading();
self.firstShow = true; // 展示操作按键
}, 100);
})
},
initScreen:function(){
let self=this;
let dom = document.getElementById('pie-chart-screen-'+this.chartIndex)
if(!this.echartScreen){
this.echartScreen = echarts.init(dom)
}
if(this.legendScreen){
this.isGreyScreen=[];
this.legendScreen=this.legendScreen.map((item, i) => {
const legend = {
name:item.name,
alias:item.alias,
color:item.color,
showText:this.formatLegend(dom.clientWidth,item.name)
};
self.isGreyScreen.push(false);
return legend
});
}
if(self.echartScreen){
self.echartScreen.clear();
self.showLegend = true;
self.$refs['localLoadingScreen'+self.chartIndex].endLoading();
}
this.$nextTick(() => {
let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
let divHeight = legendDiv.offsetHeight;
let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`;
self.echartScreen.resize({height: (sumHeight - divHeight - 58)});//图表的高度
setTimeout(function () {
if(self.pieData[0].data.length>0){
console.log('option',self.option)
self.echartScreen.setOption(self.option);//显示全屏界面
self.noData=false;
}else{
self.noData=true;
self.option=chartConfig.getOption('noData')
self.echartScreen.setOption(self.option);//显示全屏界面
}
self.echartScreen.on('finished', function () {
let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
let divHeight = legendDiv.offsetHeight;
let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`;
self.echartScreen.resize({height: (sumHeight - divHeight - 58)});//图表的高度
self.echartScreen.off('finished');
})
}, 100);
})
},
dealLegendAlias:function(legend,expression){
if(/\{\{.+\}\}/.test(expression)){
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
let reg=new RegExp(label+'=".+?"');
let value=null;
if(reg.test(legend)){
let find=legend.match(reg)[0];
value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
}
return value?value:label;
});
return labelValue
}else{
return expression;
}
},
clickLegend(legendName, index){
/*点击legend
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
* 2.如果点击的是唯一高亮的legend，则变为全高亮状态
* 3.否则只改变被点击的legend状态
* */
let highlightNum = 0; //高亮数量
this.isGrey.forEach(g => {
if (!g) {
highlightNum++;
}
});
let hasGrey = highlightNum < this.isGrey.length; //是否有置灰的
let curIsGrey = this.isGrey[index]; //当前legend的状态
let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
let echart = getChart(this.chartIndex)
if (echart) {
if (!hasGrey) { //1.除当前legend外全置灰
echart.dispatchAction({
type: 'legendInverseSelect'
});
echart.dispatchAction({
type: 'legendSelect',
name: legendName
});
this.isGrey = this.isGrey.map((g, i) => i !== index);
} else if (currentIsTheOnlyOneHighlight) { //2.全高亮
echart.dispatchAction({
type: 'legendAllSelect'
});
this.isGrey = this.isGrey.map(() => false);
} else {
let type = curIsGrey ? "legendSelect" : "legendUnSelect";
echart.dispatchAction({
type: type,
name: legendName
});
this.$set(this.isGrey, index, !this.isGrey[index]);
}
}
},
clickScreenLegend(legendName,index){
/*点击legend
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
* 2.如果点击的是唯一高亮的legend，则变为全高亮状态
* 3.否则只改变被点击的legend状态
* */
let highlightNum = 0; //高亮数量
this.isGreyScreen.forEach(g => {
if (!g) {
highlightNum++;
}
});
let hasGrey = highlightNum < this.isGreyScreen.length; //是否有置灰的
let curIsGrey = this.isGreyScreen[index]; //当前legend的状态
let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
let echart = this.echartScreen;
if (echart) {
if (!hasGrey) { //1.除当前legend外全置灰
echart.dispatchAction({
type: 'legendInverseSelect'
});
echart.dispatchAction({
type: 'legendSelect',
name: legendName
});
this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index);
} else if (currentIsTheOnlyOneHighlight) { //2.全高亮
echart.dispatchAction({
type: 'legendAllSelect'
});
this.isGreyScreen = this.isGreyScreen.map(() => false);
} else {
let type = curIsGrey ? "legendSelect" : "legendUnSelect";
echart.dispatchAction({
type: type,
name: legendName
});
this.$set(this.isGreyScreen, index, !this.isGreyScreen[index]);
}
}
},
setColor(colorNum){
this.bgColorList = [
'#FF5200','#3685FF','#FF8D00','#00DCA2',
'#954Eff','#FFCB01','#f65A96','#00BFD0',
'#FF8BEA','#4D7693','#72577C','#99D750',
'#DD8270','#C475EE','#7E83FB','#7EB090',
'#FF9094','#00CCF5','#CF6684','#4E55FF'
];
for(let i=0;i<colorNum-19;i++) {
this.bgColorList.push(randomcolor())
}
},
formatterFunc:function(params, ticket, callback){
return `
<div>
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;">${this.legend[params.dataIndex].alias}</div>
<div style="display:flex;justify-content: space-between;">
<div>value</div>
<div>${params.value}</div>
</div>
<div style="display:flex;justify-content: space-between;">
<div>percent</div>
<div>${params.percent}%</div>
</div>
</div>
</div>
`
}
},
mounted() {
this.firstLoad = false;
},
beforeDestroy() {
this.clearChart();
},
};
</script>

146
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -3,8 +3,6 @@
}
.nz-preview-picker{
}
.v-modal{
}
.hidden{
visibility: hidden;
}
@@ -76,9 +74,9 @@
</div>
</div>
<template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea' || chart.type == 'endpointInfo'">
<template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea' || chart.type == 'endpointInfo' ||chart.type =='pie'">
<div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart">
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;"></div>
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px"></div>
<div class="chart-no-data" v-show="noData">No Data</div>
<template v-if="!hasLegendOptions">
@@ -267,12 +265,14 @@
this.searchTime = bus.getTimezontDateRange();
this.chart = JSON.parse(JSON.stringify(chartInfo));
console.log('chart',this.chart,chartInfo)
let chartType= chartInfo.type;
let chartContainerId = 'chartEchartPreview';
if(chartType==='table'){
this.tableShow = false;
chartContainerId = 'chartTablePreview';
}else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
}else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4||chartType == 'pie') {
this.isGreyScreen=[];
this.showLegend = false;
chartContainerId = 'chartEchartPreview';
@@ -346,7 +346,7 @@
let chartType= this.chart.type;
if(chartType==='table'){
}else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == "endpointInfo") {
}else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == "endpointInfo"||chartType == 'pie') {
if(this.echartModalStore){
this.echartModalStore.clear();
}
@@ -381,7 +381,7 @@
this.$nextTick(() => {
if (chartItem.type === 'table') {//表格
this.setTableData([]);
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === "endpointInfo") {
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === "endpointInfo"||chartItem == 'pie') {
this.setData(chartItem, [], []);
}else if(chartItem.type ==='singleStat'){
this.serieSingleStat = "";
@@ -415,12 +415,28 @@
let singleStatRlt = '';
const legend = [];
const tableData = [];
const sumData = {
name: 'sum',
data: [],
visible: true,
threshold: null,
};
let pieSeries;
if(chartItem.type ==='pie'){
pieSeries={
type: 'pie',
radius: ['20%', '100%'],
center: ['50%', '50%'],
roseType: 'radius',
minAngle:10,
itemStyle: {
borderRadius: 5
},
label: {
show: false
},
emphasis: {
label: {
show: false
}
},
data:[]
}
}
res.forEach((response, innerPos) => {
if (response.status === 'success') {
this.isError = false;
@@ -513,8 +529,12 @@
});
return [dpsItem[0] * 1000, dpsItem[1]];
});
if(chartItem.type === 'pie'){
console.log(chartItem.param.statistics,seriesItem.theData.data)
pieSeries.data.push({value:bus.getSingleStatRlt(chartItem.param.statistics,seriesItem.theData.data),name:host + resInnerPos})
}else{
series.push(seriesItem.theData);
}
} else if (chartItem.elements && chartItem.elements[innerPos]) {
// 无数据提示
/*
@@ -581,6 +601,14 @@
this.serieSingleStat =singleStatRlt;
}
this.$refs.loadingPreview.endLoading();
}else if(chartItem.type == 'pie'){
series.push(pieSeries)
if(series[0].data.length<1){
this.noData=true;
}else{
this.noData=false;
}
this.setData(chartItem,series,legend)
}
//}
} else {
@@ -588,7 +616,7 @@
//if(this.$refs.editChart[index]) {
if (type === 'table') {
this.setTableData([]);
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || type === 4) {
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || type === 4||chartItem.type == 'pie') {
this.setData(chartItem, []);
}else if(chartItem.type ==='singleStat'){
this.serieSingleStat = "";
@@ -738,7 +766,7 @@
this.chartType = 'line';
}
this.echartModalStore = echarts.init(ele);
console.log('height',ele.clientWidth,ele.clientHeight)
var chartWidth = ele.clientWidth;
var title = {
show:false,
@@ -1040,6 +1068,71 @@
}
});
},
initPie:function(chartInfo, dataArg, legend){
let option={
title: {
show: false,
},
legend:{
show:false,
},
grid: {
left:'center',
top:'middle',
},
tooltip:{
trigger:'item',
backgroundColor:'rgba(221,228,237,1)',
borderColor :'rgba(255,255,255,0)',
textStyle:{
color:'#000'
},
textStyle:{
color:'#000'
},
axisPointer:{
snap:false,
animation:false,
},
extraCssText:'z-index:1000;',
},
series:null,
}
option.series = dataArg;
option.color = this.bgColorList;
option.tooltip.formatter=this.pieFormatterFunc;
let self=this;
let dom = document.getElementById('screenShowArea')
this.echartModalStore = echarts.init(dom)
console.log('dom',dom.clientWidth,dom.clientHeight)
this.showLegend = true;
if(legend){
this.screenLegendList = [];
legend.forEach((item, i) => {
let _legend = {
name:item.name,
alias:item.alias,
color:item.color,
showText:this.formatLegend(dom.clientWidth,item.alias?item.alias:item.name)
};
this.screenLegendList.push(_legend);
this.isGreyScreen.push(false);
});
}
this.$nextTick(() => {
let divHeight = this.$refs.screenLegendArea.offsetHeight;
this.echartModalStore.resize({height:(chartInfo.height-this.chartSpaceHeight-divHeight-this.titleHeight)});
this.echartModalStore.clear();
if(dataArg[0].data.length<1){
this.echartModalStore.setOption(chartConfig.getOption('noData'))
}else{
console.log(option)
this.echartModalStore.setOption(option);//创建图表
}
this.$refs.loadingPreview.endLoading();
});
},
mouseEnterFullChart(){
if (this.echartModalStore) {
this.echartModalStore.setOption({
@@ -1077,6 +1170,10 @@
let sortedOptionKeys=['min','max','avg','last','total']
this.screenLegendOptions=sortedOptionKeys.map(item=>{ return {option:item,sort:'',value:chartItem.param.legendValue[item]}})
}
if(chartItem.type == 'pie'){
this.initPie(chartItem,seriesItem,legend)
return;
}
this.initChart(chartItem, seriesItem, this.$refs.screenShowArea,legend);
},
// 设置数据
@@ -1444,6 +1541,23 @@
legend.sort((x,y)=>y[option.option] - x[option.option])
option.sort = 'asc'
}
},
pieFormatterFunc:function(params, ticket, callback){
return `
<div>
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;">${this.legend[params.dataIndex].alias}</div>
<div style="display:flex;justify-content: space-between;">
<div>value</div>
<div>${params.value}</div>
</div>
<div style="display:flex;justify-content: space-between;">
<div>percent</div>
<div>${params.percent}%</div>
</div>
</div>
</div>
`
}
},
beforeDestroy() {

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

@@ -189,6 +189,7 @@
import timePicker from '../common/timePicker';
import chartConfig from "../page/dashboard/overview/chartConfig";
import {getChart, setChart,lineChartMove,getMousePoint} from "../common/js/common";
import {getMetricTypeValue} from "../common/js/tools";
export default {
name: 'lineChartBlock',
@@ -578,20 +579,6 @@
//chartId='screenShowArea';
}
var chartWidth = ele.clientWidth;
var title = {
show:false,
text: chartInfo.title || null,
textAlign: 'left',
useHTML: true,
textStyle: {
//display: 'inline-block',//无此属性
width: '60%',
fontStyle:'normal',
fontWeight:'bold',
color: "#333",
}
};
let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e');
let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb');
@@ -1739,94 +1726,17 @@
let options=where =='local'?this.legendOptions:this.screenLegendOptions;
let keys=options.filter(item=>{return item.value == 'on'}).map(item=>{return item.option});
let $self=this;
keys.forEach(item=>{
switch (item) {
case 'min':
$self.legendMinValue(legend,dataArr);
break;
case 'max':
$self.legendMaxValue(legend,dataArr);
break;
case 'avg':
$self.legendAvgValue(legend,dataArr);
break;
case 'last':
$self.legendLastValue(legend,dataArr);
break;
case 'total':
$self.legendTotalValue(legend,dataArr);
break;
}
})
},
legendMinValue:function(legend,dataArr){
keys.forEach(key=>{
return new Promise(resolve => {
legend.forEach(item=>{
let data=dataArr.find(t=>t.name == item.name)
if(data&&data.data){
let copy=JSON.parse(JSON.stringify(data.data));
let min =copy.sort((x,y)=>{return parseFloat(x[1]) - parseFloat(y[1])})[0][1]
item['min']=parseFloat(min)
}
})
resolve();
})
},
legendMaxValue:function(legend,dataArr){
return new Promise(resolve => {
legend.forEach(item=>{
let data=dataArr.find(t=>t.name == item.name)
if(data&&data.data){
let copy=JSON.parse(JSON.stringify(data.data));
let max =copy.sort((x,y)=>{return parseFloat(y[1]) - parseFloat(x[1])})[0][1]
item['max']=parseFloat(max)
let value=getMetricTypeValue(data.data,key)
item[key] = parseFloat(value)
}
})
resolve();
})
},
legendAvgValue:function(legend,dataArr){
return new Promise(resolve => {
legend.forEach(item=>{
let data=dataArr.find(t=>t.name == item.name)
if(data&&data.data){
let copy=JSON.parse(JSON.stringify(data.data));
copy = copy.map(t=>parseFloat(t[1]))
let sum = eval(copy.join('+'));
let avg = sum / copy.length;
item['avg'] = avg;
}
})
resolve();
})
},
legendLastValue:function(legend,dataArr){
return new Promise(resolve => {
legend.forEach(item=>{
let data=dataArr.find(t=>t.name == item.name)
if(data&&data.data){
let copy=JSON.parse(JSON.stringify(data.data));
let last =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0][1]
item['last']=parseFloat(last)
}
})
resolve();
})
},
legendTotalValue:function(legend,dataArr){
return new Promise(resolve => {
legend.forEach(item=>{
let data=dataArr.find(t=>t.name == item.name)
if(data&&data.data){
let copy=JSON.parse(JSON.stringify(data.data));
copy = copy.map(t=>parseFloat(t[1]))
let sum = eval(copy.join('+'));
item['total'] = sum;
}
})
resolve();
})
},
formatLegendData:function(data){

7
nezha-fronted/src/components/common/alert/alertMessageTable.vue
View File

@@ -6,7 +6,7 @@
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
:id="projectAlertId+'-element-set'"
:id="id+'-element-set'"
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
@@ -29,7 +29,7 @@
@selection-change="selectChange"
style="width: 100%;height: 100%"
@sort-change="tableDataSort"
:id="projectAlertId"
:id="id+'-table'"
>
<el-table-column
:resizable="false"
@@ -243,7 +243,8 @@
type:Boolean,
default:true,
},
from: {type: String}
from: {type: String},
id:String,
},
data() {
vm = this;

2
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
View File

@@ -25,7 +25,7 @@
</div>
</div>
<alertMessageTable
:projectAlertId="from+'-sub-alert-table'"
:id="from+'-sub-alert-table'"
ref="alertMessageTable"
:tableData="tableData"
:loading="loading"

3
nezha-fronted/src/components/common/language/cn.js
View File

@@ -160,6 +160,9 @@ const cn = {
singleStat:{
label:"SingleStat"
},
pie:{
label:"饼图"
},
alertList:{
label:"告警列表"
},

3
nezha-fronted/src/components/common/language/en.js
View File

@@ -173,6 +173,9 @@ const en = {
singleStat:{
label:"SingleStat"
},
pie:{
label:"Pie"
},
alertList:{
label:"Alert list"
},

2
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -34,7 +34,7 @@
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<alertMessageTable
projectAlertId="alert-msg-table"
id="alert-msg-table"
ref="alertMessageTable"
:tableData="tableData"
:loading="tools.loading"

43
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -259,6 +259,14 @@
<el-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.statistics')" class="half-form-item" prop="param.statistics" v-if="editChart.type == 'singleStat' || editChart.type == 'pie' ">
<el-select placeholder="" popper-class="chart-box-dropdown-mini" size="small" v-model="editChart.param.statistics" id="chart-box-panelname">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in statisticsList">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
<el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" class="exporter-switch" v-model="editChart.param.last" id="chart-box-last"></el-switch>
</el-form-item>
@@ -315,7 +323,6 @@
></promql-input>
-->
<el-row>
<template v-if="editChart.type != 'singleStat'">
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover placement="top" trigger="hover" width="211">
@@ -326,19 +333,6 @@
<el-col style="width: calc(100% - 120px);">
<el-input size="small" type="text" v-model="legends[index-1]" ></el-input>
</el-col>
</template>
<template v-else>
<el-col class="required-marker" style="width: 120px; padding-right: 20px; text-align: right; color: #666">
<label >{{$t('dashboard.panel.chartForm.statistics')}}</label>&nbsp;
</el-col>
<el-col style="width: calc(100% - 120px);">
<el-select placeholder="" popper-class="chart-box-dropdown-mini" size="small" v-model="editChart.param.statistics" id="chart-box-panelname">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in statisticsList">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-col>
</template>
</el-row>
<span class="nz-icon-minus-medium nz-icon-minus-position">
<i class="nz-icon nz-icon-minus" @click="removeExpression(index - 1)"></i>
@@ -562,6 +556,9 @@
],
'param.threshold':[
{validator:nzNumber,trigger: 'blur'}
],
"param.statistics":[
{required: true, message: this.$t('validate.required'), trigger: 'change'}
]
},
chartTypeList: [
@@ -581,6 +578,10 @@
id:'singleStat',
name:this.$t("dashboard.panel.chartForm.typeVal.singleStat.label")
},
{
id:'pie',
name:this.$t("dashboard.panel.chartForm.typeVal.pie.label")
},
{
id:"table",
name:this.$t("dashboard.panel.chartForm.typeVal.table.label")
@@ -941,7 +942,7 @@
},
sync: this.editChart.sync
};
if(this.editChart.type === 'singleStat'){
if(this.editChart.type === 'singleStat'||this.editChart.type == 'pie'){
// params.param.statistics=this.statistics;
} else {
delete params.param.statistics;
@@ -1041,7 +1042,7 @@
this.$refs.alertParamBox.saveParam();
return ;
}
if(this.editChart.type == 'singleStat'){
if(this.editChart.type == 'singleStat'||this.editChart.type == 'pie'){
// this.$set(this.editChart.param, "statistics", this.statistics);
} else {
delete this.editChart.param.statistics;
@@ -1435,15 +1436,15 @@
height: this.editChart.height,
type: this.editChart.type,
unit:this.editChart.unit,
param:{
},
param:this.editChart.param,
sync: this.editChart.sync
};
if(this.editChart.type === 'singleStat'){
if(this.editChart.type === 'singleStat'||this.editChart.type === 'table'){
// params.param.statistics=this.statistics;
params.param.valueMapping=this.editChart.param.valueMapping;
} else {
}
console.log(this.editChart)
if(this.editChart.type != 'singleStat' && this.editChart.type != 'pie'){
delete params.param.statistics;
}
if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'||this.editChart.type==='table'){

34
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -334,25 +334,25 @@
if(chartList[i].id === data.id){
chartList.splice(i,1);
}
if(data.next != -1){
if(chartList[i].id === data.next){
nextChart = chartList[i]
}
}
if(data.prev != 0){
if(chartList[i].id === data.prev){
prevChart = chartList[i]
}
}
// if(data.next != -1){
// if(chartList[i].id === data.next){
// nextChart = chartList[i]
// }
// }
// if(data.prev != 0){
// if(chartList[i].id === data.prev){
// prevChart = chartList[i]
// }
// }
}
this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop);
if(nextChart&&prevChart){ //删除图表为中间位置
prevChart.next = nextChart.id;
nextChart.prev = prevChart.id;
}else{
if(!nextChart) prevChart.next = -1;
if(!prevChart) nextChart.prev = 0;
}
// if(nextChart&&prevChart){ //删除图表为中间位置
// prevChart.next = nextChart.id;
// nextChart.prev = prevChart.id;
// }else{
// if(!nextChart) prevChart.next = -1;
// if(!prevChart) nextChart.prev = 0;
// }
// this.getTableData(); //删除相关图表后，刷新面板数据
} else {
this.$message.error(response.msg);