754 lines
24 KiB
JavaScript
754 lines
24 KiB
JavaScript
import lodash from 'lodash'
|
||
import * as echarts from 'echarts'
|
||
import { getMetricTypeValue, formatScientificNotation } from '@/components/common/js/tools'
|
||
import { getChart, getMousePoint, setChart } from '@/components/common/js/common'
|
||
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
|
||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||
import {
|
||
chartTimeSeriesLineOption,
|
||
chartTimeSeriesAreaOption,
|
||
chartTimeSeriesScatterOption
|
||
} from './chart/options/chartTimeSeries'
|
||
import * as CSV from 'csv-string'
|
||
import { initColor } from '@/components/chart/chart/tools'
|
||
import { interpolateRgbBasis } from 'd3-interpolate'
|
||
export default {
|
||
data () {
|
||
return {
|
||
colorList: [],
|
||
chartDot: 2,
|
||
isInit: true, // 是否是初始化，初始化时为true，图表初始化结束后设为false
|
||
legends: [], // { name, alias, color, statistics: [{type: min, value: xxx}, ...] }
|
||
toolboxIconColor: {
|
||
active: '#FA901C',
|
||
inactive: '#7e7e7e'
|
||
},
|
||
chartId: '',
|
||
isNoData: true,
|
||
series: [],
|
||
dataLink: [],
|
||
tooltip: {
|
||
x: 0,
|
||
y: 0,
|
||
title: 0,
|
||
value: 0,
|
||
mapping: {},
|
||
show: false
|
||
},
|
||
toolbox: {
|
||
x: 0,
|
||
y: 0,
|
||
title: 0,
|
||
value: 0,
|
||
mapping: {},
|
||
show: false,
|
||
metric: {}
|
||
}
|
||
}
|
||
},
|
||
props: {
|
||
chartInfo: Object,
|
||
chartData: Array,
|
||
chartOption: Object,
|
||
isFullscreen: Boolean,
|
||
showAllData: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
dialogPadding: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
globalVariables: {}
|
||
},
|
||
computed: {
|
||
filterTime () {
|
||
return this.$store.getters.getTimeRange
|
||
},
|
||
nowTimeType () {
|
||
return this.$store.getters.getNowTimeType
|
||
},
|
||
chartListId () {
|
||
return this.$store.getters.getChartListId
|
||
}
|
||
},
|
||
methods: {
|
||
// 十六进制转为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})`
|
||
},
|
||
handleTimeSeries (chartInfo, seriesTemplate, originalDatas) {
|
||
const series = []
|
||
let colorIndex = 0
|
||
this.isNoData = true
|
||
originalDatas.forEach((originalData, expressionIndex) => {
|
||
originalData.forEach((data, dataIndex) => {
|
||
if (colorIndex >= 20 && !this.showAllData) {
|
||
return
|
||
}
|
||
this.isNoData = false
|
||
let s = lodash.cloneDeep(seriesTemplate)
|
||
|
||
// 设置右y轴
|
||
if (chartInfo.param.enable.rightYAxis) {
|
||
if (chartInfo.param.rightYAxis) {
|
||
const findItem = chartInfo.param.rightYAxis.elementNames.find(item => data.elements.name == item)
|
||
if (findItem) {
|
||
s.yAxisIndex = 1
|
||
data.yAxisIndex = 1
|
||
} else {
|
||
s.yAxisIndex = 0
|
||
data.yAxisIndex = 0
|
||
}
|
||
}
|
||
}
|
||
|
||
// 右y轴数据类型
|
||
if (s.yAxisIndex == 1) {
|
||
const style = chartInfo.param.rightYAxis.style
|
||
if (style == 'line') {
|
||
s = lodash.cloneDeep(chartTimeSeriesLineOption.series[0])
|
||
} else if (style == 'area') {
|
||
s = lodash.cloneDeep(chartTimeSeriesAreaOption.series[0])
|
||
} else if (style == 'point') {
|
||
s = lodash.cloneDeep(chartTimeSeriesScatterOption.series[0])
|
||
}
|
||
s.yAxisIndex = 1
|
||
}
|
||
|
||
if (chartInfo.param && chartInfo.param.nullType) {
|
||
s.connectNulls = chartInfo.param.nullType !== 'null'
|
||
} else {
|
||
s.connectNulls = false
|
||
}
|
||
|
||
if (s) {
|
||
s.data = data.values
|
||
const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
|
||
s.name = legend.name
|
||
s.labels = {
|
||
...data.metric,
|
||
legend: legend.alias
|
||
}
|
||
s.expressionIndex = expressionIndex
|
||
if (chartInfo.param.stack) { // 堆叠
|
||
s.stack = 'Total' + s.yAxisIndex
|
||
}
|
||
if (chartInfo.param.enable && chartInfo.param.enable.thresholds && !lodash.isEmpty(chartInfo.param.thresholds) && chartInfo.param.thresholds.length) { // 阈值
|
||
s.markLine = {
|
||
silent: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5
|
||
}
|
||
// Thresholds 只对左Y轴有效
|
||
if (s.yAxisIndex != 1) {
|
||
chartInfo.param.thresholds = chartInfo.param.thresholds.reverse()
|
||
s.markLine.data = chartInfo.param.thresholds.map(threshold => {
|
||
return {
|
||
yAxis: threshold.value || 0,
|
||
label: {
|
||
show: true,
|
||
formatter () {
|
||
if (threshold.label) {
|
||
return threshold.label
|
||
} else {
|
||
return threshold.value || 0
|
||
}
|
||
}
|
||
},
|
||
lineStyle: {
|
||
color: threshold.color,
|
||
width: 2,
|
||
type: 'dotted'
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
// 判断如果是面积图 颜色设为渐变色
|
||
if (s.areaStyle && this.colorList.length) {
|
||
s.areaStyle = {
|
||
opacity: 0.1
|
||
}
|
||
}
|
||
series.push(s)
|
||
colorIndex++
|
||
}
|
||
})
|
||
})
|
||
this.$emit('chartIsNoData', this.isNoData)
|
||
return series
|
||
},
|
||
// 单个legend
|
||
handleLegend (chartInfo, data, expressionIndexs, dataIndex, colorIndex) {
|
||
let expressionIndex = expressionIndexs
|
||
let legend = '' // up
|
||
let alias = ''
|
||
if (chartInfo.elements && (expressionIndex >= chartInfo.elements.length)) {
|
||
expressionIndex -= chartInfo.elements.length
|
||
// legend += 'Previous '
|
||
alias += 'Previous '
|
||
}
|
||
if (!data.metric) {
|
||
data.metric = data.stream
|
||
}
|
||
if (!data.metric) {
|
||
data.metric = {}
|
||
}
|
||
if (data.metric.__name__) {
|
||
legend += `${data.metric.__name__}{`
|
||
}
|
||
const tagKeysArr = Object.keys(data.metric)
|
||
tagKeysArr.forEach(tagKey => {
|
||
if (tagKey !== '__name__' && tagKey !== 'legend' && tagKey !== 'values' && tagKey !== '$value') {
|
||
legend += `${tagKey}="${data.metric[tagKey]}",`
|
||
}
|
||
})
|
||
if (legend.endsWith(',')) {
|
||
legend = legend.substr(0, legend.length - 1)
|
||
}
|
||
if (data.metric.__name__) {
|
||
legend += '}'
|
||
}
|
||
if (!legend && chartInfo.elements) {
|
||
legend = chartInfo.elements[expressionIndex].expression
|
||
// legend = ''
|
||
}
|
||
// 处理legend别名
|
||
if (chartInfo.elements) {
|
||
if (chartInfo.elements[expressionIndex]) {
|
||
alias = alias + this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend, tagKeysArr)
|
||
}
|
||
if (!alias) {
|
||
alias = chartInfo.elements[expressionIndex].expression || ''
|
||
}
|
||
if (alias == 'Previous ') {
|
||
alias += chartInfo.elements[expressionIndex].expression
|
||
}
|
||
}
|
||
// proj_status_
|
||
const legendIndex = expressionIndex + 'and' + dataIndex
|
||
const name = alias + '-' + legendIndex
|
||
|
||
// 若需要统计，处理统计数据
|
||
const statisticsTypes = chartInfo.param.legend ? chartInfo.param.legend.values : ''
|
||
let statistics = []
|
||
if (!lodash.isEmpty(statisticsTypes)) {
|
||
statistics = statisticsTypes.map(type => {
|
||
return { type, value: getMetricTypeValue(data.values, type) }
|
||
})
|
||
}
|
||
if (this.chartInfo.type !== 'line' && this.chartInfo.type !== 'area' && this.chartInfo.type !== 'point') {
|
||
this.legends.push({ name, alias, statistics, color: this.colorList[colorIndex] })
|
||
}
|
||
return {
|
||
name,
|
||
alias
|
||
}
|
||
},
|
||
handleLegendAlias (legend, aliasExpression, params) {
|
||
const self = this
|
||
const myParams = JSON.parse(JSON.stringify(params))
|
||
myParams.$labels = JSON.parse(JSON.stringify(params))
|
||
myParams.$value = myParams.value
|
||
if (this.from !== 'meta2dTooltip') {
|
||
aliasExpression = this.globalVariablesReplace(aliasExpression)
|
||
}
|
||
if (/\{\{.+\}\}/.test(aliasExpression)) {
|
||
const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
|
||
const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
|
||
if (!legend) {
|
||
return label
|
||
}
|
||
let value = null
|
||
if (params && self.$lodash.get(myParams, label)) {
|
||
value = self.$lodash.get(myParams, label)
|
||
}
|
||
if (label) {
|
||
const reg = new RegExp(label + '=".+?"', 'g')
|
||
if (reg.test(legend)) {
|
||
const ans = legend.match(reg)
|
||
let find = ''
|
||
ans.forEach(item => {
|
||
const index = legend.indexOf(item)
|
||
if (legend[index - 1] !== '_') {
|
||
find = item
|
||
}
|
||
})
|
||
value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
|
||
}
|
||
}
|
||
return value || ''
|
||
})
|
||
return labelValue
|
||
} else {
|
||
if (!aliasExpression) {
|
||
return legend
|
||
// let result =legend.substr(legend.indexOf('"') + 1,legend.lastIndexOf('"') - legend.indexOf('"') - 1);
|
||
// return result
|
||
}
|
||
return aliasExpression
|
||
}
|
||
},
|
||
selectMapping (value, valueMapping, show) {
|
||
let mapping = ''
|
||
if (show && valueMapping) {
|
||
valueMapping.forEach(item => {
|
||
if (item.type === 'value') {
|
||
if (value == item.value) {
|
||
mapping = item
|
||
}
|
||
}
|
||
if (item.type === 'range') {
|
||
if (value >= item.from && value < item.to) {
|
||
mapping = item
|
||
}
|
||
}
|
||
if (item.type === 'regx') {
|
||
const reg = new RegExp(item.regx)
|
||
if (reg.test(value)) {
|
||
mapping = item
|
||
}
|
||
}
|
||
})
|
||
}
|
||
return mapping
|
||
},
|
||
mouseEnterChart () {
|
||
const myChart = getChart(this.chartId)
|
||
},
|
||
tooltipPosition (point, params, dom, rect, size) {
|
||
if (this.isConnect === 'tooltip' && this.$store.state.panel.currentMousemove != this.chartId) {
|
||
return
|
||
}
|
||
dom.style.transform = 'translateZ(999999)'
|
||
const windowWidth = window.innerWidth// 窗口宽度
|
||
const windowHeight = window.innerHeight// 窗口高度
|
||
const windowMouse = getMousePoint()
|
||
// 提示框位置
|
||
let x = 0
|
||
let y = 0
|
||
// 当前鼠标位置
|
||
const pointX = point[0]
|
||
const pointY = point[1]
|
||
// 外层div大小
|
||
// const viewWidth = size.viewSize[0]
|
||
// const viewHeight = size.viewSize[1]
|
||
// 提示框大小
|
||
const boxWidth = size.contentSize[0]
|
||
const boxHeight = size.contentSize[1]
|
||
if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
|
||
x = pointX + 15
|
||
} else {
|
||
x = pointX - boxWidth - 15
|
||
}
|
||
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||
y = pointY + 15
|
||
} else {
|
||
y = pointY - boxHeight - 10
|
||
}
|
||
return [x, y]
|
||
},
|
||
mouseLeaveChart () {
|
||
const myChart = getChart(this.chartId)
|
||
},
|
||
getMaxValue (dataArg, chartInfo) {
|
||
let maxValue = 0
|
||
let minValue = 0
|
||
if (dataArg.length > 0) {
|
||
maxValue = 0
|
||
minValue = 0
|
||
for (let j = 0; j < dataArg.length; j++) {
|
||
for (let i = 0; i < dataArg[j].data.length; i++) {
|
||
if (!isNaN(dataArg[j].data[i][1])) {
|
||
maxValue = (maxValue < Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : maxValue)
|
||
minValue = (minValue > Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : minValue)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
const chartUnit = chartInfo.unit ? chartInfo.unit : 2
|
||
const unit = chartDataFormat.getUnit(chartUnit)
|
||
minValue = minValue > 0 ? 0 : minValue
|
||
if (maxValue < 0) {
|
||
maxValue = Math.abs(maxValue)
|
||
}
|
||
if (Math.abs(minValue) > Math.abs(maxValue)) {
|
||
maxValue = Math.abs(minValue)
|
||
}
|
||
maxValue = maxValue - minValue
|
||
maxValue = chartDataFormat.formatDatas(maxValue, unit, 'ceil', unit.ascii)
|
||
let oldValue = maxValue
|
||
if (maxValue < 0) {
|
||
oldValue = Math.abs(maxValue)
|
||
}
|
||
if (minValue < 0) {
|
||
oldValue = Math.abs(maxValue - minValue)
|
||
}
|
||
let dot = 0
|
||
if (maxValue == 1) {
|
||
dot++
|
||
}
|
||
if (oldValue > 10) {
|
||
while (oldValue > 10) {
|
||
oldValue = oldValue / 10
|
||
}
|
||
} else if (oldValue < 1 && maxValue !== 0) {
|
||
while (oldValue < 1 && oldValue > 0) {
|
||
oldValue = oldValue * 10
|
||
dot++
|
||
}
|
||
maxValue = Math.floor(oldValue) / Math.pow(10, dot)
|
||
dot++
|
||
}
|
||
const copies = chartDataFormat.copies(oldValue, unit.type)
|
||
let oldDot = 2
|
||
if (maxValue <= 1) {
|
||
oldDot = dot > 6 ? 6 : dot
|
||
}
|
||
return {
|
||
maxValue,
|
||
dot,
|
||
copies,
|
||
minValue,
|
||
unit,
|
||
oldDot
|
||
}
|
||
},
|
||
resize () {
|
||
setTimeout(() => {
|
||
getChart(this.chartId) && getChart(this.chartId).resize()
|
||
}, 100)
|
||
},
|
||
// 全局变量替换
|
||
globalVariablesReplace (expression) {
|
||
let str = expression
|
||
if (str) {
|
||
this.globalVariables.forEach(item => {
|
||
const reg = new RegExp('{{\\' + item.name + '}}', 'g')
|
||
if (item.value != null) {
|
||
str = str.replace(reg, item.value)
|
||
}
|
||
})
|
||
}
|
||
return str
|
||
},
|
||
// 设置dataLink
|
||
setDataLink () {
|
||
if (this.chartInfo.param.dataLink && this.chartInfo.param.dataLink.length) {
|
||
this.dataLink = this.chartInfo.param.dataLink.map(item => {
|
||
return {
|
||
...item,
|
||
url: this.globalVariablesReplace(item.url)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
linkClick (data) {
|
||
const url = data.url.replace(/(\{\{.+?\}\})/g, (match) => {
|
||
const label = match.substr(match.indexOf('{{') + 2, match.indexOf('}}') - match.indexOf('{{') - 2)
|
||
if (this.toolbox.metric.labels[label]) {
|
||
return this.toolbox.metric.labels[label]
|
||
} else {
|
||
return this.chartInfo.elements[this.toolbox.metric.expressionIndex].expression || ''
|
||
}
|
||
})
|
||
if (data.openIn === 'newTab') {
|
||
window.open(url)
|
||
} else {
|
||
window.location.href = url
|
||
}
|
||
this.clickout()
|
||
},
|
||
copyExpr () {
|
||
const expr = this.chartInfo.elements[this.toolbox.metric.expressionIndex].expression || ''
|
||
const domUrl = document.createElement('input')
|
||
domUrl.value = expr
|
||
domUrl.id = 'creatDom'
|
||
document.body.appendChild(domUrl)
|
||
// 延迟执行选择和复制操作
|
||
setTimeout(() => {
|
||
domUrl.select() // 选择对象
|
||
document.execCommand('Copy') // 执行浏览器复制命令
|
||
// 延迟执行删除操作
|
||
setTimeout(() => {
|
||
const creatDom = document.getElementById('creatDom')
|
||
creatDom.parentNode.removeChild(creatDom)
|
||
})
|
||
})
|
||
this.$message.success({ message: this.$t('overall.copySuccess') })
|
||
this.clickout()
|
||
},
|
||
beforeDownloadCSV (chart) {
|
||
let csv = ''
|
||
switch (chart.type) {
|
||
case 'line' :
|
||
case 'area' :
|
||
case 'point' :
|
||
csv = this.convertTimeSertesToCSV(chart)
|
||
break
|
||
case 'stat' :
|
||
case 'hexagon':
|
||
case 'bar' :
|
||
case 'pie' :
|
||
case 'doughnut' :
|
||
case 'rose' :
|
||
case 'bubble' :
|
||
case 'funnel' :
|
||
case 'rank' :
|
||
case 'sankey' :
|
||
case 'gauge' :
|
||
case 'treemap' :
|
||
// case 'log' :
|
||
// case 'diagram' :
|
||
// case 'url':
|
||
// case 'clock':
|
||
csv = this.convertOtherToCSV(chart)
|
||
break
|
||
case 'table' :
|
||
csv = this.convertTableToCSV(chart)
|
||
break
|
||
default:
|
||
}
|
||
this.downloadCSV(chart, csv)
|
||
},
|
||
downloadCSV (chart, csv) {
|
||
// 首先处理json格式 再根据不同type 导出
|
||
if (window.navigator.msSaveOrOpenBlob) {
|
||
// 兼容ie11
|
||
const blobObject = new Blob([csv])
|
||
window.navigator.msSaveOrOpenBlob(blobObject, chart.name + '.csv')
|
||
this.$message.success(this.$t('tip.downloadSuccess'))
|
||
} else {
|
||
const blob = new Blob([csv])
|
||
const link = document.createElement('a')
|
||
const href = window.URL.createObjectURL(blob) // 下载链接
|
||
link.href = href
|
||
link.download = chart.name + '.csv' // 下载后文件名
|
||
document.body.appendChild(link)
|
||
link.click() // 点击下载
|
||
document.body.removeChild(link) // 下载完成移除元素
|
||
window.URL.revokeObjectURL(href) // 释放blob对象
|
||
this.$message.success(this.$t('tip.downloadSuccess'))
|
||
}
|
||
},
|
||
convertTimeSertesToCSV (chartInfo) {
|
||
const data = this.series
|
||
let csv = '"time","legend","value"\n'
|
||
data.forEach((item, index) => {
|
||
if (this.seriesData[index + 1]) {
|
||
this.seriesData[index].forEach((value, timeIndex) => {
|
||
let val = formatScientificNotation(value, this.$lodash.get(chartInfo, 'param.decimals', 2))
|
||
let unit = ''
|
||
if (item.yAxisIndex) {
|
||
unit = chartDataFormat.getUnit(this.$lodash.get(chartInfo, 'param.rightYAxis.unit', 2))
|
||
} else {
|
||
unit = chartDataFormat.getUnit(this.$lodash.get(chartInfo, 'unit', 2))
|
||
}
|
||
val = unit.compute(val, index, -1, chartInfo.param.decimals || 2)
|
||
let legend = this.yasuo(this.legends[index].alias)
|
||
try {
|
||
val = val.trim()
|
||
legend = legend.trim()
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
csv += `"${this.momentTz(this.seriesData[0][timeIndex] * 1000)}","${legend}","${val}"\n`
|
||
})
|
||
}
|
||
})
|
||
return csv
|
||
},
|
||
yasuo (str) {
|
||
return str.replace(/\"/g, '\"\"')
|
||
},
|
||
convertOtherToCSV (chartInfo) {
|
||
let csv = '"legend","value"\n'
|
||
let keyByData = ''
|
||
let legend = 'legend'
|
||
switch (chartInfo.type) {
|
||
case 'stat' :
|
||
keyByData = 'statData'
|
||
break
|
||
case 'hexagon':
|
||
keyByData = 'HexagonData'
|
||
break
|
||
case 'bar' :
|
||
legend = 'alias'
|
||
keyByData = 'barData'
|
||
break
|
||
case 'pie' :
|
||
legend = 'alias'
|
||
keyByData = 'doughnutData'
|
||
break
|
||
case 'doughnut' :
|
||
legend = 'alias'
|
||
keyByData = 'doughnutData'
|
||
break
|
||
case 'rose' :
|
||
legend = 'alias'
|
||
keyByData = 'roseData'
|
||
break
|
||
case 'bubble' :
|
||
legend = 'alias'
|
||
keyByData = 'bubbleData'
|
||
break
|
||
case 'funnel' :
|
||
legend = 'alias'
|
||
keyByData = 'funnelData'
|
||
break
|
||
case 'rank' :
|
||
legend = 'alias'
|
||
keyByData = 'rankData'
|
||
break
|
||
case 'sankey' :
|
||
legend = 'alias'
|
||
keyByData = 'linksData'
|
||
break
|
||
case 'gauge' :
|
||
legend = 'alias'
|
||
keyByData = 'gaugeData'
|
||
break
|
||
case 'treemap' :
|
||
legend = 'alias'
|
||
keyByData = 'series[0].data'
|
||
break
|
||
}
|
||
if (!keyByData) {
|
||
return
|
||
}
|
||
this.$lodash.get(this, keyByData, []).forEach(item => {
|
||
let val = item.showValue
|
||
let legends = this.yasuo(item[legend] || item.alias)
|
||
try {
|
||
val = val.trim()
|
||
legends = legends.trim()
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
csv += `"${legends}","${val}"\n`
|
||
})
|
||
return csv
|
||
},
|
||
convertTableToCSV (chartInfo) {
|
||
let csv = ''
|
||
csv = this.columns.map(item => '"' + this.yasuo(item.title) + '"').join(',')
|
||
csv += '\n'
|
||
this.oldTableData.forEach(item => {
|
||
let arr = []
|
||
this.columns.forEach(column => {
|
||
let val = this.yasuo(item.display[column.title + 'display'].display)
|
||
try {
|
||
val = val.trim()
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
arr.push(`"${val}"`)
|
||
})
|
||
arr = arr.join(',')
|
||
csv += arr
|
||
csv += '\n'
|
||
})
|
||
return csv
|
||
},
|
||
// 计算最大值向上取整
|
||
calcMax (arr) {
|
||
let maxNum = arr.reduce((maxValue, obj) => {
|
||
return Math.max(maxValue, obj.value)
|
||
}, 0)
|
||
|
||
if (maxNum <= 1) {
|
||
return 1
|
||
}
|
||
|
||
let bite = 1
|
||
while (maxNum >= 10) {
|
||
maxNum /= 10
|
||
if (maxNum > 1) {
|
||
bite += 1
|
||
}
|
||
}
|
||
|
||
return Math.pow(10, bite)
|
||
},
|
||
// 获取值百分比
|
||
getValuePercent (value, minValue, maxValue) {
|
||
// Need special logic for when minValue === maxValue === value to prevent returning NaN
|
||
const valueRatio = Math.min((value - minValue) / (maxValue - minValue), 1)
|
||
return isNaN(valueRatio) ? 0 : valueRatio
|
||
},
|
||
setColorList (arr) {
|
||
this.colorList = []
|
||
const initColorArr = initColor(20)
|
||
const mode = lodash.get(this.chartInfo, 'param.color.mode', 'palette')
|
||
arr.forEach((item, index) => {
|
||
let color = ''
|
||
if (mode === 'palette') {
|
||
color = initColorArr[index] || randomcolor()
|
||
} else if (mode === 'fixed') {
|
||
color = lodash.get(this.chartInfo, 'param.color.fixedColor')
|
||
} else if (mode === 'continuous') {
|
||
const continuousType = lodash.get(this.chartInfo, 'param.color.continuousType')
|
||
const min = lodash.get(this.chartInfo, 'param.min') || 0
|
||
const max = lodash.get(this.chartInfo, 'param.max') || this.calcMax(arr)
|
||
// 获取颜色数组
|
||
const colorArr = this.$CONSTANTS.colorScheme.find(item => item.value == continuousType).color
|
||
const value = parseFloat(item.value)
|
||
const valuePercent = this.getValuePercent(value, min, max)
|
||
// 创建插值函数
|
||
const interpolateColor = interpolateRgbBasis(colorArr)
|
||
color = interpolateColor(valuePercent)
|
||
}
|
||
this.colorList.push(color)
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
chartData: {
|
||
deep: true,
|
||
handler (n) {
|
||
if (!this.isInit) {
|
||
this.initChart(this.chartOption)
|
||
if (this.resize) {
|
||
setTimeout(() => {
|
||
this.resize()
|
||
}, 200)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 'chartInfo.loaded': {
|
||
// immediate: true,
|
||
// deep: true,
|
||
// handler (n) {
|
||
// if (n) {
|
||
// this.initChart && this.initChart(this.chartOption)
|
||
// }
|
||
// }
|
||
// }
|
||
},
|
||
created () {
|
||
this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
|
||
// this.downloadCSV()
|
||
},
|
||
beforeDestroy () {
|
||
try {
|
||
getChart(this.chartId) && getChart(this.chartId).off('click')
|
||
getChart(this.chartId) && getChart(this.chartId).off('mousedown')
|
||
getChart(this.chartId) && getChart(this.chartId).off('mousemove')
|
||
getChart(this.chartId) && getChart(this.chartId).getZr().off('mousemove')
|
||
} catch (error) {}
|
||
getChart(this.chartId) && setChart(this.chartId, null)
|
||
}
|
||
}
|