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

NEZ-3083 fix：dashboard 时序图表 legend选择 使用不便

Browse Source
This commit is contained in:
zyh
2023-08-23 14:43:41 +08:00
parent 4e52bcb686 84cdf93f00
commit aa73b00001
29 changed files with 262 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -484,6 +484,10 @@
padding-left: 5px;
}
}
.tooltip__row.highlight{
color: $--color-text-primary;
font-weight: bold;
}
}
.endpoint-query-metrics.chart-fullscreen.nz-dialog,.recordRules-query-metrics.chart-fullscreen.nz-dialog {
.chart-screen-header .chart-header__tools #browser-go {
@@ -689,6 +693,9 @@
margin-right: 4px;
}
}
.select-series+.chart-dataLink-item{
border-top: 1px solid $--border-color-light;
}
}
}

18
nezha-fronted/src/assets/css/font/iconfont.css
View File

File diff suppressed because one or more lines are too long

2
nezha-fronted/src/assets/css/font/iconfont.js
View File

File diff suppressed because one or more lines are too long

21
nezha-fronted/src/assets/css/font/iconfont.json
View File

@@ -5,6 +5,27 @@
"css_prefix_text": "nz-icon-",
"description": "",
"glyphs": [
{
"icon_id": "37041244",
"name": "Show all series",
"font_class": "a-Showallseries",
"unicode": "e7f0",
"unicode_decimal": 59376
},
{
"icon_id": "37041245",
"name": "Show seleted series",
"font_class": "a-Showseletedseries",
"unicode": "e7ef",
"unicode_decimal": 59375
},
{
"icon_id": "680107",
"name": "展开",
"font_class": "zhankai",
"unicode": "e6dd",
"unicode_decimal": 59101
},
{
"icon_id": "7775074",
"name": "个性化",

BIN
nezha-fronted/src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

21
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

4
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -190,7 +190,7 @@ export default {
...data.metric,
legend: legend.alias
},
seriesIndex: expressionIndex,
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping,
label: {
@@ -261,7 +261,7 @@ export default {
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = params.data.labels
this.tooltip.metric.expressionIndex = params.data.seriesIndex
this.tooltip.metric.expressionIndex = params.data.expressionIndex
const e = params.event.event
this.datalinkPosition(e)
},

4
nezha-fronted/src/components/chart/chart/chartBubble.vue
View File

@@ -97,7 +97,7 @@ export default {
...data.metric,
legend: legend.alias
},
seriesIndex: expressionIndex,
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping,
background: mapping ? mapping.color.bac : this.colorList[colorIndex] // 气泡颜色
@@ -327,7 +327,7 @@ export default {
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.data.labels
this.tooltip.metric.expressionIndex = data.data.seriesIndex
this.tooltip.metric.expressionIndex = data.data.expressionIndex
this.datalinkPosition(e)
}
},

27
nezha-fronted/src/components/chart/chart/chartDoughnut.vue
View File

@@ -13,6 +13,7 @@
:legends="legends"
:is-fullscreen="isFullscreen"
@clickLegendD3="clickLegendD3"
@hoverLegendD3="hoverLegendD3"
></chart-legend>
<div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
@@ -95,7 +96,8 @@ export default {
chartId: '',
doughnutData: [],
selectData: [],
svg: null
svg: null,
drawing: false
}
},
methods: {
@@ -135,7 +137,7 @@ export default {
...data.metric,
legend: legend.alias
},
seriesIndex: expressionIndex,
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping,
background: mapping ? mapping.color.bac : this.colorList[colorIndex]
@@ -193,7 +195,9 @@ export default {
d.percent = percentage.toFixed(2)
})
const self = this
function doughnutOver (e, d) {
if (self.drawing) { return }
chart.select('.path-' + d.index)
.transition()
.attr('d', d3.arc()
@@ -202,6 +206,7 @@ export default {
)
}
function doughnutOut (e, d) {
if (self.drawing) { return }
chart.select('.path-' + d.index)
.transition()
.attr('d', d3.arc()
@@ -210,6 +215,7 @@ export default {
)
}
this.drawing = true
// 图形
chart.selectAll('path')
.data(arcs)
@@ -261,6 +267,7 @@ export default {
.style('opacity', 1)
.on('end', function () {
d3.select(this).classed('no-events', false)
self.drawing = false
})
},
@@ -357,6 +364,20 @@ export default {
this.selectData = this.$lodash.cloneDeep(data)
this.drawDoughnutChart(true)
},
hoverLegendD3 (legendName, index, type) {
if (this.svg) {
const data = this.$lodash.cloneDeep(this.selectData)
const findIndex = data.findIndex(item => item.name === legendName)
const chart = this.svg.select('g')
const mouseover = new CustomEvent('mouseover')
const mouseout = new CustomEvent('mouseout')
if (type === 'highlight') {
chart.select('.path-' + findIndex).node().dispatchEvent(mouseover)
} else {
chart.select('.path-' + findIndex).node().dispatchEvent(mouseout)
}
}
},
resize () {
setTimeout(() => {
this.drawDoughnutChart(false)
@@ -413,7 +434,7 @@ export default {
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.data.labels
this.tooltip.metric.expressionIndex = data.data.seriesIndex
this.tooltip.metric.expressionIndex = data.data.expressionIndex
this.datalinkPosition(e)
}
},

4
nezha-fronted/src/components/chart/chart/chartFunnel.vue
View File

@@ -97,7 +97,7 @@ export default {
...data.metric,
legend: legend.alias
},
seriesIndex: expressionIndex,
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping,
background: mapping ? mapping.color.bac.substr(0, 7) : this.colorList[colorIndex], // 仅限十六进制
@@ -423,7 +423,7 @@ export default {
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.labels
this.tooltip.metric.expressionIndex = data.seriesIndex
this.tooltip.metric.expressionIndex = data.expressionIndex
this.datalinkPosition(e)
}
},

4
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -110,7 +110,7 @@ export default {
gauge.label = data.metric
gauge.legend = legend.alias
gauge.label.legend = gauge.legend
gauge.seriesIndex = expressionIndex
gauge.expressionIndex = expressionIndex
gauge.name = legend.name
gauge.alias = legend.alias
gauge.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(gauge.value, null, -1, decimals)
@@ -316,7 +316,7 @@ export default {
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = params.data.label
this.tooltip.metric.expressionIndex = params.data.seriesIndex
this.tooltip.metric.expressionIndex = params.data.expressionIndex
const e = params.event.event
this.datalinkPosition(e)
},

4
nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
View File

@@ -99,7 +99,7 @@ export default {
Hexagon.label = data.metric
Hexagon.legend = legend.alias
Hexagon.label.legend = Hexagon.legend
Hexagon.seriesIndex = expressionIndex
Hexagon.expressionIndex = expressionIndex
Hexagon.name = legend.name
Hexagon.alias = legend.alias
Hexagon.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(Hexagon.value, null, -1, decimals)
@@ -478,7 +478,7 @@ export default {
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.metrics
this.tooltip.metric.expressionIndex = data.seriesIndex
this.tooltip.metric.expressionIndex = data.expressionIndex
this.datalinkPosition(e)
}
},

2
nezha-fronted/src/components/chart/chart/chartPie.vue
View File

@@ -127,7 +127,7 @@ export default {
name: legend.name,
alias: legend.alias,
labels: data.metric,
seriesIndex: expressionIndex,
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping,
label: {

4
nezha-fronted/src/components/chart/chart/chartRank.vue
View File

@@ -104,7 +104,7 @@ export default {
...data.metric,
legend: legend.alias
},
seriesIndex: expressionIndex,
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping
})
@@ -340,7 +340,7 @@ export default {
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.labels
this.tooltip.metric.expressionIndex = data.seriesIndex
this.tooltip.metric.expressionIndex = data.expressionIndex
this.datalinkPosition(e)
}
},

29
nezha-fronted/src/components/chart/chart/chartRose.vue
View File

@@ -13,6 +13,7 @@
:legends="legends"
:is-fullscreen="isFullscreen"
@clickLegendD3="clickLegendD3"
@hoverLegendD3="hoverLegendD3"
></chart-legend>
<div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
@@ -105,7 +106,8 @@ export default {
show: false,
dataLinkShow: false
},
svg: null
svg: null,
drawing: false
}
},
methods: {
@@ -145,7 +147,7 @@ export default {
...data.metric,
legend: legend.alias
},
seriesIndex: expressionIndex,
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping,
background: mapping ? mapping.color.bac : this.colorList[colorIndex]
@@ -215,7 +217,9 @@ export default {
d.percent = percentage.toFixed(2)
})
const self = this
function roseOver (e, d) {
if (self.drawing) { return }
chart.select('.path-' + d.index)
.transition()
.attr('d', d3.arc()
@@ -227,6 +231,7 @@ export default {
)
}
function roseOut (e, d) {
if (self.drawing) { return }
chart.select('.path-' + d.index)
.transition()
.attr('d', d3.arc()
@@ -235,6 +240,8 @@ export default {
.cornerRadius(radius)
)
}
this.drawing = true
// 图形
chart.selectAll('path')
.data(arcs)
@@ -286,6 +293,7 @@ export default {
.style('opacity', 1)
.on('end', function () {
d3.select(this).classed('no-events', false)
self.drawing = false
})
},
@@ -382,6 +390,21 @@ export default {
this.selectData = this.$lodash.cloneDeep(data)
this.drawRoseChart(true)
},
hoverLegendD3 (legendName, index, type) {
if (this.svg) {
const data = this.$lodash.cloneDeep(this.selectData)
data.sort((a, b) => b.value - a.value)
const findIndex = data.findIndex(item => item.name === legendName)
const chart = this.svg.select('g')
const mouseover = new CustomEvent('mouseover')
const mouseout = new CustomEvent('mouseout')
if (type === 'highlight') {
chart.select('.path-' + findIndex).node().dispatchEvent(mouseover)
} else {
chart.select('.path-' + findIndex).node().dispatchEvent(mouseout)
}
}
},
resize () {
setTimeout(() => {
this.drawRoseChart(false)
@@ -438,7 +461,7 @@ export default {
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.data.labels
this.tooltip.metric.expressionIndex = data.data.seriesIndex
this.tooltip.metric.expressionIndex = data.data.expressionIndex
this.datalinkPosition(e)
}
},

8
nezha-fronted/src/components/chart/chart/chartSankey.vue
View File

@@ -73,8 +73,8 @@ export default {
}
// 根据link获取node
this.linksData.forEach(item => {
this.nodesData.push({ node: item.source, labels: item.labels, seriesIndex: item.seriesIndex })
this.nodesData.push({ node: item.target, labels: item.labels, seriesIndex: item.seriesIndex })
this.nodesData.push({ node: item.source, labels: item.labels, expressionIndex: item.expressionIndex })
this.nodesData.push({ node: item.target, labels: item.labels, expressionIndex: item.expressionIndex })
})
// 去重相同的node
for (let i = 0; i < this.nodesData.length; i++) {
@@ -108,7 +108,7 @@ export default {
...data.metric,
legend: legend.alias
},
seriesIndex: expressionIndex
expressionIndex: expressionIndex
}
if (data.metric[chartInfo.param.sourceLabel] && data.metric[chartInfo.param.targetLabel]) {
obj.source = data.metric[chartInfo.param.sourceLabel]
@@ -447,7 +447,7 @@ export default {
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.labels
this.tooltip.metric.expressionIndex = data.seriesIndex
this.tooltip.metric.expressionIndex = data.expressionIndex
this.datalinkPosition(e)
}
},

4
nezha-fronted/src/components/chart/chart/chartStat.vue
View File

@@ -173,7 +173,7 @@ export default {
stat.label = data.metric
stat.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias
stat.label.legend = stat.legend
stat.seriesIndex = expressionIndex
stat.expressionIndex = expressionIndex
stat.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
stat.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(stat.value, null, -1, decimals)
stat.mapping = this.selectMapping(stat.value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
@@ -535,7 +535,7 @@ export default {
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = data.label
this.tooltip.metric.expressionIndex = data.seriesIndex
this.tooltip.metric.expressionIndex = data.expressionIndex
this.datalinkPosition(e)
}
},

4
nezha-fronted/src/components/chart/chart/chartTable.vue
View File

@@ -218,7 +218,7 @@ export default {
data.showValue = showValue
data.$legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias
data.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
data.seriesIndex = expressionIndex
data.expressionIndex = expressionIndex
// data.mapping = mapping
data.keys = ''
// eslint-disable-next-line vue/no-mutating-props
@@ -508,7 +508,7 @@ export default {
...flattenedObject.metric,
legend: flattenedObject.$legend
}
this.tooltip.metric.expressionIndex = flattenedObject.seriesIndex
this.tooltip.metric.expressionIndex = flattenedObject.expressionIndex
this.datalinkPosition(e)
}
},

82
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -14,6 +14,7 @@
</p>
</div>
<chart-legend
ref="legend"
v-if="hasLegend"
:chart-data="chartData"
:chart-info="chartInfo"
@@ -25,6 +26,16 @@
<div v-html="tooltip.tooltipHtml"></div>
<!-- dataLink -->
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 只有一条数据时显示 -->
<div class="chart-dataLink-item select-series" v-if="isGrey.filter(value => value === false).length==1" @click="showAllSeries">
<i class="nz-icon nz-icon-a-Showallseries"></i>
<span>{{$t('dashboard.showAllSeries')}}</span>
</div>
<!-- 有多条数据时显示 -->
<div class="chart-dataLink-item select-series" v-else @click="showSelectedSeries">
<i class="nz-icon nz-icon-a-Showseletedseries"></i>
<span>{{$t('dashboard.showSelectedSeries')}}</span>
</div>
<div class="chart-dataLink-item" v-for="(item,index) in dataLink" :title='item.title' :key="index" @click="linkClick(item)">
<i class="nz-icon nz-icon-link"></i>
<span>{{item.title}}</span>
@@ -66,7 +77,20 @@ export default {
isStack: false,
hasRightYAxis: false,
chartLoading: false,
cursorDefault: false
cursorDefault: false,
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: '',
metric: {},
activeIndex: undefined,
clickIndex: undefined
},
isGrey: []
}
},
computed: {
@@ -148,6 +172,8 @@ export default {
}
this.legends = []
this.series = chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
this.isGrey = this.legends.map(() => false)
chartOption.color = this.colorList
if (!this.series.length) {
this.isNoData = true
@@ -232,8 +258,8 @@ export default {
this.cursorDefault = false
}
})
if (this.dataLink.length) {
// 设置dataLink的图表 划过节点时鼠标样式为pointer
// 设置dataLink的图表 或存在多条数据时 划过节点时鼠标样式为pointer（可点击）
if (this.dataLink.length || this.series.length > 1) {
myChart.on('mousemove', () => {
this.cursorDefault = false
})
@@ -246,6 +272,13 @@ export default {
})
}
myChart.on('mouseover', (params) => {
this.tooltip.activeIndex = params.seriesIndex
})
myChart.on('mouseout', () => {
this.tooltip.activeIndex = undefined
})
// 修复echarts bug(dataZoom设置为inside 未按住ctrl 页面无法滚动)
// 监听按键按下事件
document.addEventListener('keydown', this.keydown)
@@ -502,8 +535,9 @@ export default {
className = 'yAxis-icon nz-icon nz-icon-youzongzhou'
}
// 鼠标悬浮 series data symbol 时，tooltip 中相应的legend 高亮显示
str += `
<div class="tooltip__row" title="${seriesName}">
<div class="${(self.tooltip.activeIndex == item.seriesIndex && self.isGrey.filter(value => value === false).length > 1) ? 'tooltip__row highlight' : 'tooltip__row'}" title="${seriesName}">
<div class="row__label">
<span class="${className}" style="background-color: ${color};color: ${color}"></span>
<span>${seriesName}</span>
@@ -589,6 +623,7 @@ export default {
}, 100)
},
legendChange (isGrey) {
this.isGrey = isGrey
let flag = false
// 点击legend 如果右y轴数据有一个不是灰色 则显示右y轴name
isGrey.forEach((item, index) => {
@@ -632,7 +667,6 @@ export default {
if (this.isConnect !== 'none') {
echarts.disconnect('timeSeriesGroup')
}
echarts.disconnect('timeSeriesGroup')
const option = {
tooltip: {
extraCssText: 'z-index:99999999;visibility:hidden;transition:none;',
@@ -693,7 +727,8 @@ export default {
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = this.series[params.seriesIndex].labels
this.tooltip.metric.expressionIndex = this.series[params.seriesIndex].seriesIndex
this.tooltip.metric.expressionIndex = this.series[params.seriesIndex].expressionIndex
this.tooltip.clickIndex = params.seriesIndex
const e = params.event.event
this.datalinkPosition(e)
if (this.isConnect !== 'none') {
@@ -701,7 +736,7 @@ export default {
}
},
clickout () {
if (this.dataLink.length) {
if (this.dataLink.length || this.series.length > 1) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
const option = {
@@ -711,6 +746,39 @@ export default {
}
getChart(this.chartId).setOption(option)
}
},
showSelectedSeries () {
if (this.isConnect !== 'none') {
echarts.disconnect('timeSeriesGroup')
}
const index = this.tooltip.clickIndex
getChart(this.chartId).dispatchAction({
type: 'legendInverseSelect'
})
getChart(this.chartId).dispatchAction({
type: 'legendSelect',
name: this.legends[index].name
})
this.isGrey = this.isGrey.map((g, i) => i !== index)
this.$refs.legend.isGrey = this.isGrey
if (this.isConnect !== 'none') {
echarts.disconnect('timeSeriesGroup')
}
this.clickout()
},
showAllSeries () {
if (this.isConnect !== 'none') {
echarts.disconnect('timeSeriesGroup')
}
getChart(this.chartId).dispatchAction({
type: 'legendAllSelect'
})
this.isGrey = this.isGrey.map(() => false)
this.$refs.legend.isGrey = this.isGrey
if (this.isConnect !== 'none') {
echarts.disconnect('timeSeriesGroup')
}
this.clickout()
}
},
mounted () {

4
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -155,7 +155,7 @@ export default {
name: legend.name,
alias: legend.alias,
labels: data.metric,
seriesIndex: expressionIndex,
expressionIndex: expressionIndex,
dataIndex: dataIndex,
mapping: mapping,
label: {
@@ -232,7 +232,7 @@ export default {
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.metric.labels = params.data.labels
this.tooltip.metric.expressionIndex = params.data.seriesIndex
this.tooltip.metric.expressionIndex = params.data.expressionIndex
const e = params.event.event
this.datalinkPosition(e)
},

26
nezha-fronted/src/components/chart/chart/legend.vue
View File

@@ -18,6 +18,8 @@
:class="{'row--inactive': isGrey[index]}"
class="legend--table-row"
@click="clickLegend(item.name, index)"
@mouseenter="hoverLegend(item.name, index,'highlight')"
@mouseleave="hoverLegend(item.name, index,'downplay')"
>
<div :title="item.alias ? item.alias : item.name" class="legend--table-cell">
<i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
@@ -34,6 +36,8 @@
:class="{'row--inactive': isGrey[index]}"
class="legend--table-row"
@click="clickLegend(item.name, index)"
@mouseenter="hoverLegend(item.name, index,'highlight')"
@mouseleave="hoverLegend(item.name, index,'downplay')"
>
<div :title="item.alias ? item.alias : item.name" class="legend--table-cell">
<i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
@@ -55,6 +59,8 @@
:title="item.alias ? item.alias : item.name"
class="legend-item"
@click="clickLegend(item.name, index)"
@mouseenter="hoverLegend(item.name, index,'highlight')"
@mouseleave="hoverLegend(item.name, index,'downplay')"
>
<i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
<span v-else :style="{background: item.color}" class="legend-shape"></span>
@@ -69,6 +75,8 @@
:title="item.alias ? item.alias : item.name"
class="legend-item"
@click="clickLegend(item.name, index)"
@mouseenter="hoverLegend(item.name, index,'highlight')"
@mouseleave="hoverLegend(item.name, index,'downplay')"
>
<i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
<span v-else :style="{background: item.color}" class="legend-shape"></span>
@@ -242,6 +250,24 @@ export default {
}
this.$emit('clickLegendD3', this.isGrey)
},
hoverLegend (legendName, index, type) {
if (this.chartInfo.type === 'pie' || this.chartInfo.type === 'doughnut' || this.chartInfo.type === 'rose') {
if (!this.isGrey[index]) {
this.$emit('hoverLegendD3', legendName, index, type)
}
} else if (this.isTimeSeries) {
getChart(this.chartId).dispatchAction({
type: type,
seriesIndex: index,
name: legendName
})
} else {
getChart(this.chartId).dispatchAction({
type: type,
name: legendName
})
}
},
// 四舍五入保留2位小数（不够位数，则用0替补）
keepTwoDecimalFull (num) {
let result = parseFloat(num)

3
nezha-fronted/src/components/chart/chart/options/chartBar.js
View File

@@ -64,6 +64,9 @@ const chartBarOption = {
},
labelLine: {
show: true
},
emphasis: {
focus: 'series'
}
}
]

3
nezha-fronted/src/components/chart/chart/options/chartPie.js
View File

@@ -30,6 +30,9 @@ const chartPieOption = {
},
labelLine: {
show: true
},
emphasis: {
focus: 'series'
}
}
]

8
nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
View File

@@ -156,6 +156,9 @@ export const chartTimeSeriesLineOption = {
lineStyle: {
width: 1,
opacity: 0.9
},
emphasis: {
focus: 'series'
}
}],
useUTC: false // 使用本地时间
@@ -173,6 +176,9 @@ export const chartTimeSeriesScatterOption = {
name: '',
type: 'scatter',
data: [],
z: 9
z: 9,
emphasis: {
focus: 'series'
}
}]
}

11
nezha-fronted/src/components/chart/chartMixin.js
View File

@@ -114,10 +114,6 @@ export default {
s.yAxisIndex = 1
}
if (!this.dataLink.length) {
s.cursor = 'default'
}
if (s.param && s.param.nullType) {
s.connectNulls = s.param.nullType !== 'null'
} else {
@@ -132,7 +128,7 @@ export default {
...data.metric,
legend: legend.alias
}
s.seriesIndex = expressionIndex
s.expressionIndex = expressionIndex
if (chartInfo.param.stack) { // 堆叠
s.stack = 'Total' + s.yAxisIndex
}
@@ -188,6 +184,11 @@ export default {
})
})
this.$emit('chartIsNoData', this.isNoData)
if (!this.dataLink.length && this.series.length == 1) {
series.forEach(item => {
item.cursor = 'default'
})
}
return series
},
// 单个legend

8
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -400,6 +400,14 @@ export default {
varValue: '',
result: 'show'
},
rightYAxis: {
elementNames: [],
style: 'line',
unit: 2,
label: '',
min: undefined,
max: undefined
},
dataLink: []
}
}

2
nezha-fronted/src/entrance/exportHtml/i18nData.js
View File

File diff suppressed because one or more lines are too long