CN-49 feat ： 饼图调整 && 数值过大的单位处理
This commit is contained in:
zhangyu
@@ -44,21 +44,22 @@
|
||||
>
|
||||
<template #title v-if="layout.indexOf(layoutConstant.HEADER) > -1">
|
||||
{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
|
||||
<span v-if="isEchartsWithTable">
|
||||
</template>
|
||||
<template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1">
|
||||
<div class="header__operation header__operation--table">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="table.limit"
|
||||
v-model="orderPieTable"
|
||||
class="option__select select-topn"
|
||||
placeholder=""
|
||||
popper-class="option-popper"
|
||||
@change="orderPieTableChange"
|
||||
>
|
||||
<el-option v-for="item in chartTableTopOptions" :key="item" :value="item">TOP {{item}}</el-option>
|
||||
<el-option v-for="item in chartPieTableTopOptions" :key="item.value" :value="item.value"> {{item.name}}</el-option>
|
||||
<template #prefix>TOP </template>
|
||||
</el-select>
|
||||
</span>
|
||||
</template>
|
||||
<template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1">
|
||||
<i class="cn-icon cn-icon-more-light"></i>
|
||||
</div>
|
||||
<i class="cn-icon cn-icon-more-light margin-l-10"></i>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
|
||||
@@ -66,7 +67,7 @@
|
||||
<template #footer v-if="layout.indexOf(layoutConstant.FOOTER) > -1" :class="{}">
|
||||
<!-- 带Table的饼图，展示Table -->
|
||||
<template v-if="isEchartsWithTable">
|
||||
<pie-table :tableData="pieTableData" ref="pieTable"/>
|
||||
<pie-table :tableData="pieTableData" ref="pieTable" :chartInfo="chartInfo" :start-time="startTime" :end-time="endTime" :order="orderPieTable"/>
|
||||
</template>
|
||||
<template v-else-if="isEchartsWithStatistics">
|
||||
<statistics-legend :data="statisticsData"></statistics-legend>
|
||||
@@ -165,7 +166,7 @@ import ChartMap from '@/components/charts/ChartMap'
|
||||
import PieTable from '@/components/charts/PieTable'
|
||||
import StatisticsLegend from '@/components/charts/StatisticsLegend'
|
||||
import ChartTablePagination from '@/components/charts/ChartTablePagination'
|
||||
import { chartTableDefaultPageSize, chartTableTopOptions } from '@/utils/constants'
|
||||
import { chartTableDefaultPageSize, chartTableTopOptions, chartPieTableTopOptions } from '@/utils/constants'
|
||||
import { get } from '@/utils/http'
|
||||
import { replaceUrlPlaceholder, getCapitalGeo } from '@/utils/tools'
|
||||
|
||||
@@ -202,11 +203,14 @@ export default {
|
||||
pieTableData: [],
|
||||
singleValue: '-',
|
||||
activeTab: '',
|
||||
statisticsData: []
|
||||
statisticsData: [],
|
||||
orderPieTable: chartPieTableTopOptions[0].value,
|
||||
selectPieChartName: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
const self = this
|
||||
const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
|
||||
if (this.isMap) {
|
||||
this.myChart = this.initMap(`chart${this.chartInfo.id}`)
|
||||
@@ -303,41 +307,7 @@ export default {
|
||||
this.myChart = echarts.init(dom)
|
||||
if (chartParams) {
|
||||
if (this.isEchartsWithTable) {
|
||||
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10 } // 统计数据的查询参数
|
||||
const tableQueryParams = { startTime: parseInt(this.startTime / 1000), endTime: this.endTime, limit: 10 } // 统计数据的查询参数
|
||||
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
|
||||
if (response.code === 200) {
|
||||
const data = response.data.result
|
||||
this.chartOption.series[0].data = data.map(d => {
|
||||
return {
|
||||
data: d,
|
||||
name: d[chartParams.nameColumn],
|
||||
value: parseInt(d[chartParams.valueColumn])
|
||||
}
|
||||
})
|
||||
if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
|
||||
this.chartOption.legend.type = 'scroll'
|
||||
}
|
||||
this.myChart.setOption(this.chartOption)
|
||||
this.$nextTick(() => {
|
||||
this.myChart.resize()
|
||||
})
|
||||
tableQueryParams[chartParams.nameColumn] = data[0][chartParams.nameColumn]
|
||||
get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
|
||||
if (response2.code === 200) {
|
||||
this.pieTableData = response2.data.result
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.myChart.on('click', function (echartParams) {
|
||||
get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.pieTableData = response.data.result
|
||||
}
|
||||
})
|
||||
})
|
||||
this.chartWithPieTableInit(chartParams)
|
||||
} else if (this.isEchartsWithStatistics) {
|
||||
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
|
||||
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
|
||||
@@ -443,7 +413,64 @@ export default {
|
||||
},
|
||||
getTargetPageData (pageNum, pageSize, tableData) {
|
||||
return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
|
||||
}
|
||||
},
|
||||
orderPieTableChange () {
|
||||
const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
|
||||
this.myChart.off('click')
|
||||
this.chartWithPieTableInit(chartParams)
|
||||
},
|
||||
chartWithPieTableInit (chartParams) {
|
||||
chartParams.valueColumn = this.orderPieTable
|
||||
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10, order: this.orderPieTable } // 统计数据的查询参数
|
||||
const tableQueryParams = { startTime: parseInt(this.startTime / 1000), endTime: this.endTime, limit: 10, order: this.orderPieTable } // 统计数据的查询参数
|
||||
tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方
|
||||
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
|
||||
if (response.code === 200) {
|
||||
const data = response.data.result
|
||||
this.chartOption.series[0].data = data.map(d => {
|
||||
if (chartParams.nameColumn === 'fqdnCategoryName') {
|
||||
tableQueryParams[chartParams.nameColumn].push(d[chartParams.nameColumn])
|
||||
}
|
||||
return {
|
||||
data: d,
|
||||
name: d[chartParams.nameColumn],
|
||||
value: parseInt(d[chartParams.valueColumn])
|
||||
}
|
||||
})
|
||||
if (tableQueryParams[chartParams.nameColumn].length) {
|
||||
// tableQueryParams[chartParams.nameColumn] = JSON.stringify(tableQueryParams[chartParams.nameColumn])
|
||||
}
|
||||
if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
|
||||
this.chartOption.legend.type = 'scroll'
|
||||
}
|
||||
this.myChart.setOption(this.chartOption)
|
||||
this.$nextTick(() => {
|
||||
this.myChart.resize()
|
||||
})
|
||||
get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
|
||||
if (response2.code === 200) {
|
||||
this.pieTableData = response2.data.result
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.myChart.on('click', function (echartParams) {
|
||||
const childrenParams = { startTime: parseInt(self.startTime / 1000), endTime: parseInt(self.endTime / 1000), limit: 10 }
|
||||
childrenParams[chartParams.nameColumn] = echartParams.name
|
||||
if (self.selectPieChartName === echartParams.name) {
|
||||
self.selectPieChartName = ''
|
||||
childrenParams[chartParams.nameColumn] = tableQueryParams[chartParams.nameColumn]
|
||||
} else {
|
||||
self.selectPieChartName = echartParams.name
|
||||
}
|
||||
get(replaceUrlPlaceholder(chartParams.urlTable, childrenParams)).then(response2 => {
|
||||
if (response2.code === 200) {
|
||||
self.pieTableData = response2.data.result
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
computePosition () {
|
||||
@@ -465,6 +492,7 @@ export default {
|
||||
chartInfo,
|
||||
layoutConstant,
|
||||
chartTableTopOptions,
|
||||
chartPieTableTopOptions,
|
||||
chartOption: getOption(props.chart.type),
|
||||
isEcharts: isEcharts(props.chart.type),
|
||||
isEchartsWithTable: isEchartsWithTable(props.chart.type),
|
||||
|
||||
Reference in New Issue
Block a user