'
let dot = bus.countDecimals(val)
if (dot < this.chartDot) {
dot = this.chartDot
@@ -611,6 +707,134 @@ export default {
unit,
oldDot
}
+ },
+ datalinkPosition (e) {
+ this.$nextTick(() => {
+ const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+ const left = e.pageX - this.$refs.chartRoom.getBoundingClientRect().left
+ const top = e.pageY - this.$refs.chartRoom.getBoundingClientRect().top
+ if (box) {
+ const boxWidth = box.offsetWidth
+ const chartDom = document.getElementById(this.chartId)
+ const parent = chartDom.parentElement
+ const parClientWidth = parent.clientWidth// 可视宽度
+ if ((parClientWidth - left - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
+ this.tooltip.x = left + 10
+ } else {
+ this.tooltip.x = left - boxWidth
+ }
+ this.tooltip.y = top + 10
+ }
+ })
+ },
+ chartClick (params) {
+ const option = {
+ tooltip: {
+ extraCssText: 'z-index:1000;visibility:hidden;transition:none;',
+ hideDelay: 0
+ }
+ }
+ this.chart.setOption(option)
+ this.chart.dispatchAction({
+ type: 'hideTip'
+ })
+ const nameArr = params.seriesName.split('-')
+ if (nameArr.length > 1) {
+ nameArr.splice(nameArr.length - 1, 1)
+ }
+ const seriesName = nameArr.join('-')
+ // title
+ const value = bus.computeTimezone(params.data[0])
+ const tData = new Date(value)
+ // value
+ let paramsDot = bus.countDecimals(params.data[1])
+ if (paramsDot < this.chartDot) {
+ paramsDot = this.chartDot
+ } else if (paramsDot > 6) {
+ paramsDot = 6
+ }
+ const val = formatScientificNotation(params.data[1], paramsDot)
+ const color = this.colors[params.seriesIndex]
+ this.tooltip.tooltipHtml = `
+
+ `
+ this.tooltip.show = true
+ this.tooltip.dataLinkShow = true
+ this.tooltip.clickIndex = params.seriesIndex
+ const e = params.event.event
+ this.datalinkPosition(e)
+ },
+ clickout () {
+ if (this.series.length > 1) {
+ this.tooltip.show = false
+ this.tooltip.dataLinkShow = false
+ const option = {
+ tooltip: {
+ extraCssText: 'z-index:1000;visibility:visible;'
+ }
+ }
+ this.chart.setOption(option)
+ }
+ },
+ showSelectedSeries () {
+ this.legend.forEach((item, index) => {
+ if (index == this.tooltip.clickIndex) {
+ this.chart.dispatchAction({
+ type: 'legendSelect',
+ name: item.name
+ })
+ } else {
+ this.chart.dispatchAction({
+ type: 'legendUnSelect',
+ name: item.name
+ })
+ }
+ })
+
+ this.legend = this.legend.map((item, index) => {
+ return {
+ ...item,
+ isGray: index !== this.tooltip.clickIndex
+ }
+ })
+ this.clickout()
+ },
+ showAllSeries () {
+ this.chart.dispatchAction({
+ type: 'legendAllSelect'
+ })
+ this.legend = this.legend.map((item, index) => {
+ return {
+ ...item,
+ isGray: false
+ }
+ })
+ this.clickout()
+ },
+ // 十六进制转为rgba
+ hexToRgb (hex, a = 1) {
+ /*
+ hex: {String}, "#333", "#AF0382"
+ */
+ hex = hex.slice(1)
+ if (hex.length == 3) {
+ hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+ }
+ const r = parseInt(hex.slice(0, 2), 16)
+ const g = parseInt(hex.slice(2, 4), 16)
+ const b = parseInt(hex.slice(4, 6), 16)
+ return `rgba(${r}, ${g}, ${b}, ${a})`
}
},
mounted () {
@@ -623,7 +847,7 @@ export default {
beforeDestroy () {
this.$refs.chartRoom.removeEventListener('mousemove', this.chartRoomMouseMove)
if (this.chart) {
- this.chart.clear()
+ this.chart.dispose()
}
}
}