feat: 单值图 显示颜色

This commit is contained in:
zhangyu
2021-12-23 19:00:13 +08:00
parent 8128de517f
commit 59d35b2ea5
4 changed files with 24 additions and 8 deletions

View File

@@ -175,7 +175,23 @@ export default {
if (item.mapping) {
showValue = self.handleDisplay(item.mapping.display, { ...item.label, value: showValue })
}
return showValue
let str = ''
if (this.chartInfo.param.text === 'all') {
str += item.alias
str += '\n'
str += showValue
}
if (this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) {
str += showValue
}
if (this.chartInfo.param.text === 'legend') {
str += item.alias
}
if (this.chartInfo.param.text === 'none') {
str += ''
}
str += ''
return str
},
color: lodash.get(item, 'mapping.color.text', 'auto')
}

View File

@@ -1,6 +1,6 @@
<template>
<div class="chart-stat" ref="chart-stat-box">
<div class="chart-stat-item" :style="{background:item.mapping ? item.mapping.color.bac : false,height:item.height+'px',width:item.width + 'px'}" v-for="(item,index) in statData" :key="index">
<div class="chart-stat-item" v-for="(item,index) in statData" :key="index" :style="{background:item.mapping ? item.mapping.color.bac : (index >= 20 ? randomcolor() : colorList[index]),height:item.height+'px',width:item.width + 'px'}">
<span v-if="chartInfo.param.text==='all'">
<span v-if="item.mapping" :style="{color:item.mapping.color.text}">
{{item.legend}}<br/><span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
@@ -31,6 +31,8 @@ import chartMixin from '@/components/chart/chartMixin'
import chartFormat from '@/components/chart/chartFormat'
import { getMetricTypeValue } from '@/components/common/js/tools'
import chartDataFormat from '@/components/charts/chartDataFormat'
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
import {initColor} from "@/components/chart/chart/tools";
export default {
name: 'chart-stat',
@@ -44,6 +46,7 @@ export default {
}
},
methods: {
randomcolor,
initChart () {
this.initStatData(this.chartInfo, this.chartData).then(() => {
if (this.isNoData) {
@@ -142,6 +145,7 @@ export default {
}
},
mounted () {
this.colorList = initColor(20)
this.chartInfo.loaded && this.initChart()
}
}

View File

@@ -38,11 +38,6 @@ export default {
const obj = lodash.cloneDeep(val.defaultJson)
obj[val.jsonKey] = qv
console.log(obj[val.jsonKey])
if (val.strKey) {
this.$refs[dataList].$refs.searchInput[val.listStr].map((e) => {
obj[val.strKey] = e.name
})
}
this.$refs[dataList].$refs.searchInput.select_list.push(obj)
this.$refs[dataList].$refs.searchInput.sreach_num++
// this.$refs[dataList].$refs.searchInput.searchLabelList = this.$refs[dataList].$refs.searchInput.searchLabelList.filter(item => item.label !== 'projectIds')

View File

@@ -1480,7 +1480,8 @@ export default {
if (this.$route.path === '/exprTemp') {
this.getGnameList()
}
}, 1000)
console.log(this.select_list, this.searchLabelList)
}, 100)
JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => {
if (val.prop == 'common_action') {
this.actionSelect = val.doc.data