679 lines
27 KiB
Vue
679 lines
27 KiB
Vue
<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">
|
||
<!-- <span class="chart-title-text">{{chartData.name}}</span>-->
|
||
<span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
|
||
<transition name="el-fade-in-linear">
|
||
<span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
|
||
</transition>
|
||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||
<span v-if="chartData.remark">
|
||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||
<i class="nz-icon nz-icon-info-normal"></i>
|
||
</el-tooltip>
|
||
</span>
|
||
<span v-has="'panel_chart_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
|
||
<i class="nz-icon nz-icon-replay"></i>
|
||
</span>
|
||
<span @click="showAllScreen" v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
|
||
<i class="nz-icon nz-icon-maxview"></i>
|
||
</span>
|
||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||
</span>
|
||
</span>
|
||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||
<li @click="editChart" class="el-dropdown-menu__item">
|
||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||
<li v-has="'panel_chart_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||
<li v-has="'panel_chart_add'" class="el-dropdown-menu__item" @click="duplicate">
|
||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||
<li v-has="'panel_chart_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
||
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
||
</ul>
|
||
</el-dropdown>
|
||
</div>
|
||
<div :id="'pie-chart-local-'+chartIndex" ref="pieChartLocal" style="display: flex;justify-content: center"></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.name}}</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 * as echarts from 'echarts'
|
||
import { getChart, setChart, getMousePoint } from '../common/js/common'
|
||
import chartConfig from '../page/dashboard/overview/chartConfig'
|
||
import { randomcolor } from '../common/js/radomcolor/randomcolor'
|
||
import chartDataList from '@/components/common/mixin/chartDataList'
|
||
export default {
|
||
name: 'pieChart',
|
||
components: {
|
||
loading: loading
|
||
},
|
||
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 }
|
||
},
|
||
mixins: [chartDataList],
|
||
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: [],
|
||
stableFilter: {},
|
||
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'
|
||
},
|
||
axisPointer: {
|
||
snap: false,
|
||
animation: false
|
||
},
|
||
extraCssText: 'z-index:1000;'
|
||
},
|
||
series: null,
|
||
stepWidth: null
|
||
}
|
||
}
|
||
},
|
||
created () {
|
||
},
|
||
computed: {},
|
||
watch: {
|
||
dropdownMenuShow (n) {
|
||
this.$emit('dropmenu-change', n)
|
||
}
|
||
},
|
||
methods: {
|
||
startResize (e) {
|
||
const 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
|
||
const 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.$emit('on-duplicate-chart-block', this.data.id)
|
||
},
|
||
// 全屏查看
|
||
showAllScreen () {
|
||
this.dropdownMenuShow = false
|
||
this.searchTime = []
|
||
this.$set(this.searchTime, 0, this.oldSearchTime[0])
|
||
this.$set(this.searchTime, 1, this.oldSearchTime[1])
|
||
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
|
||
this.screenModal = true
|
||
},
|
||
resize (chartItem) {
|
||
if (getChart(this.chartIndex)) {
|
||
getChart(this.chartIndex).resize()
|
||
}
|
||
},
|
||
// 设置数据, filter区分
|
||
setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
|
||
if (filter) {
|
||
this.stableFilter = filter
|
||
}
|
||
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)
|
||
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 ''
|
||
}
|
||
// 计算宽度
|
||
const span = document.querySelector('.temp-dom')
|
||
span.textContent = name
|
||
const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
|
||
if (txtWidth < chartWidth) {
|
||
return name
|
||
} else {
|
||
const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
|
||
return name.slice(0, charNum) + '...'
|
||
}
|
||
},
|
||
initChart: function (type) {
|
||
this.option.series = this.pieData
|
||
this.stepWidth = document.getElementById('listContainer').offsetWidth / 12
|
||
if (type == 'local') {
|
||
this.initLocal()
|
||
} else {
|
||
this.initScreen()
|
||
}
|
||
},
|
||
initLocal: function () {
|
||
const self = this
|
||
const 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(() => {
|
||
const vm = this
|
||
setTimeout(function () {
|
||
const 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 * vm.stepWidth - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
|
||
}
|
||
self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
|
||
self.$set(self.option.tooltip, 'position', function (point, params, dom, rect, size) {
|
||
dom.style.transform = 'translateZ(0)'
|
||
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 (!self.screenModal) { // 本地显示
|
||
const chartDom = document.getElementById(self.chartData.name + '_' + self.chartData.id)
|
||
if (chartDom) {
|
||
// const parTop = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetTop
|
||
const parleft = document.getElementById(self.chartData.name + '_' + self.chartData.id).offsetLeft
|
||
|
||
const parent = document.getElementById('tableList')
|
||
// const parClientHeight = parent.clientHeight// 可视高度
|
||
const parClientWidth = parent.clientWidth// 可视宽度
|
||
// const parScrollTop = parent.scrollTop
|
||
if ((parClientWidth - pointX - parleft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
|
||
x = pointX + 10
|
||
} else {
|
||
x = pointX - boxWidth
|
||
}
|
||
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||
y = pointY + 15
|
||
} else {
|
||
y = pointY - boxHeight - 10
|
||
}
|
||
return [x, y]
|
||
} else { // preview page
|
||
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]
|
||
}
|
||
} else {
|
||
if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
|
||
x = pointX + 10
|
||
} else {
|
||
x = pointX - boxWidth
|
||
}
|
||
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||
y = pointY + 15
|
||
} else {
|
||
y = pointY - boxHeight - 10
|
||
}
|
||
return [x, y]
|
||
}
|
||
})
|
||
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 () {
|
||
const self = this
|
||
const 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(() => {
|
||
const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
|
||
const divHeight = legendDiv.offsetHeight
|
||
const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
|
||
const 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) {
|
||
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 () {
|
||
const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
|
||
const divHeight = legendDiv.offsetHeight
|
||
const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
|
||
const 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)) {
|
||
const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
|
||
const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
|
||
const reg = new RegExp(label + '=".+?"')
|
||
let value = null
|
||
if (reg.test(legend)) {
|
||
const find = legend.match(reg)[0]
|
||
value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
|
||
}
|
||
return 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++
|
||
}
|
||
})
|
||
const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的
|
||
const curIsGrey = this.isGrey[index] // 当前legend的状态
|
||
const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
|
||
|
||
const 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 {
|
||
const 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++
|
||
}
|
||
})
|
||
const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
|
||
const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
|
||
const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
|
||
|
||
const 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 {
|
||
const 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) {
|
||
const chartInfo = this.chartData
|
||
return `
|
||
<div>
|
||
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
|
||
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.dataIndex].alias}</div>
|
||
<div style="font-size:12px;display:flex;justify-content: space-between;">
|
||
<div>value</div>
|
||
<div>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value, null, -1, 2)}</div>
|
||
</div>
|
||
<div style="font-size:12px;display:flex;justify-content: space-between;">
|
||
<div>percent</div>
|
||
<div>${params.percent}%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`
|
||
}
|
||
},
|
||
mounted () {
|
||
this.firstLoad = false
|
||
},
|
||
beforeDestroy () {
|
||
this.clearChart()
|
||
}
|
||
}
|
||
</script>
|