gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-269 图表重构-echarts类型图表重构

Browse Source
This commit is contained in:
hyx
2022-01-26 15:40:10 +08:00
parent 014abba5d1
commit 15a19edddf
13 changed files with 841 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/components/index.scss
View File

@@ -27,6 +27,9 @@
@import './views/charts/chartAppBasicInfo';
@import './views/charts/chartDomainDnsRecord';
@import './views/charts/chartDomainWhois';
@import './views/charts/chartEchartWithTable';
@import './views/charts/ipBasicInfo';
@import './views/charts/chartEchartIpHostedDomain';
@import './views/charts/chartEchartAppRelateDomain';
//@import '../chart';

70
src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss Normal file
View File

@@ -0,0 +1,70 @@
.cn-panel2 {
position: relative;
.chart-list {
.vue-grid-layout > .vue-grid-item {
.cn-chart {
.app-detail__related-domain {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
.related-domain__list {
display: flex;
flex-direction: column;
flex: 0 0 25%;
overflow: auto;
padding-bottom: 20px;
border-bottom: 1px solid $--right-box-border-color;
.related-domain__list-title {
padding: 13px 30px 0;
height: 40px;
color: #6B717B;
}
.related-domain__list-body {
display: flex;
flex-direction: column;
height: calc(100% - 40px);
overflow: hidden auto;
}
.related-domain__list-row {
padding: 5px 30px;
color: #3976CB;
i {
color: #B8C1D1;
}
}
}
.related-domain__chart {
display: flex;
flex-direction: row;
flex: 1;
& > div {
flex: 0 0 50%;
display: flex;
flex-direction: column;
.related-domain__chart-title {
padding-left: 20px;
line-height: 50px;
flex: 0 0 50px;
}
.chart-drawing {
flex: 1;
}
}
}
}
}
}
}
}
.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header {
border-bottom: 1px solid $--right-box-border-color;
}

67
src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss Normal file
View File

@@ -0,0 +1,67 @@
.cn-panel2 {
position: relative;
.chart-list {
.vue-grid-layout > .vue-grid-item {
.cn-chart {
.ip-detail__hosted-domain {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.hosted-domain__list {
display: flex;
flex-direction: column;
flex: 0 0 25%;
overflow: auto;
padding-bottom: 20px;
border-bottom: 1px solid $--right-box-border-color;
.hosted-domain__list-title {
padding: 13px 30px 0;
height: 40px;
color: #6B717B;
}
.hosted-domain__list-body {
display: flex;
flex-direction: column;
height: calc(100% - 40px);
overflow: hidden auto;
}
.hosted-domain__list-row {
padding: 5px 30px;
color: #3976CB;
i {
color: #B8C1D1;
}
}
}
.hosted-domain__chart {
display: flex;
flex-direction: column;
flex: 1;
& > div {
flex: 0 0 50%;
display: flex;
flex-direction: column;
.hosted-domain__chart-title {
padding-left: 20px;
line-height: 50px;
flex: 0 0 50px;
}
.chart-drawing {
flex: 1;
}
}
}
}
}
}
}
}

78
src/assets/css/components/views/charts/chartEchartWithTable.scss Normal file
View File

@@ -0,0 +1,78 @@
.cn-panel2 {
position: relative;
.chart-list {
.vue-grid-layout>.vue-grid-item {
.cn-chart {
height: 100% !important;
.cn-chart__echarts {
display: flex;
flex-direction: column;
height:100%;
.cn-chart__body {
flex: auto;
display: flex;
overflow: hidden auto;
.el-table {
padding: 0 10px;
&:before {
height: 0;
}
thead {
color: #333;
}
th.is-leaf, td {
border-bottom: none;
}
th {
padding-bottom: 5px;
}
td {
padding: 4px 0;
color: #333;
}
}
.chart-drawing{
height: calc(100% - 36px) !important;
}
}
.cn-chart__body.pie-with-table {
flex-basis: 40%;
}
.cn-chart__footer.pie-with-table {
flex-basis: 60%;
padding: 10px 30px 30px;
}
}
.pie-table {
font-size: 14px;
color: #333333;
font-weight: 500;
.el-table__header-wrapper {
.cell {
color: #333;
}
}
.el-table__expanded-cell[class*=cell] {
padding: 0;
}
.expand-table .el-table__body .el-table__row:last-of-type td {
border: none;
}
.expand-table {
font-weight: 400;
color: #606266;
.el-table__body-wrapper {
height: auto !important;
}
}
}
}
}
}
}

57
src/views/charts/Chart2.vue
View File

@@ -153,6 +153,42 @@
@showLoading="showLoading"
></chart-echart-with-statistics>
<chart-echart-pie
v-else-if="isEchartsPie"
:chart-info="chartInfo"
:chart-data="chartData"
:result-type="resultType"
@showLoading="showLoading"
></chart-echart-pie>
<chart-echart-with-table
v-else-if="isEchartsWithTable"
:chart-info="chartInfo"
:chart-data="chartData"
:query-params="queryParams"
:result-type="resultType"
:order-pie-table="orderPieTable"
@showLoading="showLoading"
></chart-echart-with-table>
<chart-echart-ip-hosted-domain
v-else-if="isIpHostedDomain"
:chart-info="chartInfo"
:chart-data="chartData"
:query-params="queryParams"
@showLoading="showLoading"
:entity="entity"
></chart-echart-ip-hosted-domain>
<chart-echart-app-relate-domain
v-else-if="isAppRelatedDomain"
:chart-info="chartInfo"
:chart-data="chartData"
:query-params="queryParams"
@showLoading="showLoading"
:entity="entity"
></chart-echart-app-relate-domain>
</template>
</div>
</template>
@@ -168,6 +204,10 @@ import ChartGroup from '@/views/charts/charts/ChartGroup'
import IpBasicInfo from '@/views/charts/charts/IpBasicInfo'
import ChartEchartLine from '@/views/charts/charts/ChartEchartLine'
import ChartEchartWithStatistics from '@/views/charts/charts/ChartEchartWithStatistics'
import ChartEchartPie from '@/views/charts/charts/ChartEchartPie'
import ChartEchartWithTable from '@/views/charts/charts/ChartEchartWithTable'
import ChartEchartIpHostedDomain from '@/views/charts/charts/ChartEchartIpHostedDomain'
import ChartEchartAppRelateDomain from '@/views/charts/charts/ChartEchartAppRelateDomain'
import ChartActiveIpTable from '@/views/charts/charts/ChartActiveIpTable'
import ChartTimeBar from './charts/ChartTimeBar'
import ChartCategoryBar from './charts/ChartCategoryBar'
@@ -189,6 +229,7 @@ import {
isTitle,
isMap,
getOption,
isEchartsPie,
isEchartsWithTable,
isEchartsWithStatistics,
isEchartsTimeBar,
@@ -230,14 +271,18 @@ export default {
ChartNoData,
ChartTabs,
ChartMap,
ChartEchartLine,
ChartBlock,
ChartTimeBar,
ChartCategoryBar,
ChartIpOpenPortBar,
ChartRelationShip,
ChartGroup,
ChartEchartWithStatistics
ChartEchartLine,
ChartEchartWithStatistics,
ChartEchartPie,
ChartEchartWithTable,
ChartEchartIpHostedDomain,
ChartEchartAppRelateDomain
},
props: {
chartInfo: Object,
@@ -250,7 +295,8 @@ export default {
panelLock: Boolean,
entity: Object,
isError: Boolean,
table: Object
table: Object,
orderPieTable: Object
},
computed: {
isNoData () {
@@ -270,7 +316,11 @@ export default {
},
showLoading (show) {
this.$emit('showLoading', show)
},
initEchartsWithTable () {
this.$refs['chart' + this.chartInfo.id] && this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(`chart${this.chartInfo.id}`)
}
},
watch: {
chartData: {
@@ -286,6 +336,7 @@ export default {
isEchartsTimeBar: isEchartsTimeBar(props.chartInfo.type),
isEchartsCategoryBar: isEchartsCategoryBar(props.chartInfo.type),
isIpOpenPortBar: isIpOpenPortBar(props.chartInfo.type),
isEchartsPie: isEchartsPie(props.chartInfo.type),
isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
isEchartsWithStatistics: isEchartsWithStatistics(props.chartInfo.type),
isSingleValue: isSingleValue(props.chartInfo.type),

32
src/views/charts/ChartHeader.vue
View File

@@ -71,8 +71,26 @@
</div>
</template>
<template v-else-if="isEchartsWithTable">
<div class="header__operations">
<div class="header__operation header__operation--table" >
<el-select
size="mini"
v-model="orderPieTable"
class="option__select select-column"
placeholder=""
popper-class="option-popper"
@change="orderPieTableChange"
>
<el-option v-for="item in chartPieTableTopOptions" :key="item.value" :value="item.value">&nbsp{{item.name}}</el-option>
</el-select>
</div>
<span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
</div>
</template>
<chart-error :isError="isError" :errorInfo="errorInfo"></chart-error>
<div class="chart-header__tools" v-if="!isTitle && !isTabs && !isCurrentTable && !isActiveIpTable">
<div class="chart-header__tools" v-if="!isTitle && !isTabs && !isCurrentTable && !isActiveIpTable && !isEchartsWithTable">
<div class="panel__time" v-if="chartInfo.params && chartInfo.params.showTimeTool">
<date-time-range class="date-time-range" :start-time="chartTimeFilter.startTime" :end-time="chartTimeFilter.endTime" ref="dateTimeRange" @change="reload"/>
<time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="chartTimeFilter.endTime"/>
@@ -90,11 +108,11 @@
</template>
<script>
import { isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable, isGroup } from './charts/tools'
import { isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable, isGroup, isEchartsWithTable } from './charts/tools'
import ChartError from '@/components/charts/ChartError'
import { getNowTime } from '@/utils/date-util'
import { ref } from 'vue'
import { chartTableTopOptions, chartActiveIpTableOrderOptions } from '@/utils/constants'
import { chartTableTopOptions, chartActiveIpTableOrderOptions, chartPieTableTopOptions } from '@/utils/constants'
export default {
name: 'ChartHeader',
@@ -108,7 +126,8 @@ export default {
type: Boolean,
default: false
},
table: Object
table: Object,
orderPieTable: Object
},
components: {
ChartError
@@ -171,6 +190,9 @@ export default {
},
activeIpTableLimitChange () {
this.$emit('tableChange')
},
orderPieTableChange () {
this.$emit('orderPieTableChange', this.orderPieTable)
}
},
setup (props) {
@@ -182,12 +204,14 @@ export default {
chartTimeFilter,
chartTableTopOptions,
chartActiveIpTableOrderOptions,
chartPieTableTopOptions,
isTitle: isTitle(props.chartInfo.type),
isBlock: isBlock(props.chartInfo.type),
isTabs: isTabs(props.chartInfo.type),
isTable: isTable(props.chartInfo.type),
isCurrentTable: isCurrentTable(props.chartInfo.type),
isActiveIpTable: isActiveIpTable(props.chartInfo.type),
isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
isGroup: isGroup(props.chartInfo.type)
}
}

10
src/views/charts/PanelChart.vue
View File

@@ -13,11 +13,13 @@
:chart-data="chartData"
:chart-info="chartInfo"
:table="table"
:order-pie-table="orderPieTable"
@loadMore="loadMore"
@refresh="refresh"
@groupShow="groupShow"
@showFullscreen="showFullscreen"
@tableChange="tableChange"
@orderPieTableChange="orderPieTableChange"
></chart-header>
<!-- chart -->
<!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
@@ -34,6 +36,7 @@
:entity="entity"
:table="table"
:is-fullscreen="isFullscreen"
:order-pie-table="orderPieTable"
@showLoading="showLoading"
></chart>
</div>
@@ -322,8 +325,13 @@ export default {
return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
},
groupShow (chartInfo) {
this.$emit('groupShow',chartInfo)
this.$emit('groupShow', chartInfo)
},
orderPieTableChange (orderPieTable) {
this.orderPieTable = orderPieTable
this.getChartData()
this.$refs.chart.initEchartsWithTable()
}
},
mounted () {
this.showLoading(true)

111
src/views/charts/charts/ChartEchartAppRelateDomain.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<div class="app-detail__related-domain">
<div class="related-domain__list">
<div class="related-domain__list-title">{{$t('overall.domain')}}</div>
<div class="related-domain__list-body">
<div class="related-domain__list-row" v-for="(data, i) in chartData" :key="i"><i class="cn-icon cn-icon-domain"></i>&nbsp;{{data}}</div>
</div>
</div>
<div class="related-domain__chart">
<div>
<div class="related-domain__chart-title">{{$t('entities.byCategory')}}</div>
<div class="chart-drawing" :id="`chart${chartInfo.id}-0`"></div>
</div>
<div>
<div class="related-domain__chart-title">{{$t('entities.byCredit')}}</div>
<div class="chart-drawing" :id="`chart${chartInfo.id}-1`"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import {
ipHostedDomain
} from '@/views/charts/charts/options/pie'
import { replaceUrlPlaceholder, lineToSpace } from '@/utils/tools'
import { get } from '@/utils/http'
export default {
name: 'ChartEchartAppRelateDomain',
data () {
return {
myChart: null,
myChart2: null,
chartOption: null
}
},
props: {
chartInfo: Object,
chartData: [Array, Object],
entity: Object
},
methods: {
initAppRelatedDomain (id) {
const chartParams = this.chartInfo.params
const dom = document.getElementById(`chart${this.chartInfo.id}-0`)
const dom2 = document.getElementById(`chart${this.chartInfo.id}-1`)
!this.myChart && (this.myChart = echarts.init(dom))
!this.myChart2 && (this.myChart2 = echarts.init(dom2))
this.chartOption = this.$_.cloneDeep(ipHostedDomain)
this.$emit('showLoading', true)
this.chartOption.series[0].data = [
{
name: 'test1',
value: 32
},
{
name: 'test2',
value: 21
},
{
name: 'test3',
value: 20
},
{
name: 'test4',
value: 7
}
]
this.loadEchartPie()
/*
get(replaceUrlPlaceholder(chartParams.url, { appName: this.entity.appName })).then(response => {
if (response.code === 200) {
if (this.$_.isEmpty(response.data.result)) {
this.noData = true
} else {
this.detailData = response.data.result
this.noData = false
}
}
}).finally(() => {
setTimeout(() => {
this.$emit('showLoading', false)
}, 250)
})
*/
},
loadEchartPie () {
this.$emit('showLoading', true)
try {
this.myChart.setOption(this.chartOption)
this.myChart2.setOption(this.chartOption)
} finally {
setTimeout(() => {
this.$emit('showLoading', false)
}, 200)
}
}
},
watch: {
chartData: {
deep: true,
handler (n) {
this.initAppRelatedDomain(`chart${this.chartInfo.id}`)
}
}
}
}
</script>

116
src/views/charts/charts/ChartEchartIpHostedDomain.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<!-- IP详情 托管域名 -->
<div class="ip-detail__hosted-domain">
<div class="hosted-domain__list">
<div class="hosted-domain__list-title">{{$t('overall.domain')}}</div>
<div class="hosted-domain__list-body">
<div class="hosted-domain__list-row" v-for="(data, i) in chartData" :key="i">{{data}}</div>
</div>
</div>
<div class="hosted-domain__chart">
<div>
<div class="hosted-domain__chart-title">{{$t('entities.byCategory')}}</div>
<div class="chart-drawing" :id="`chart${chartInfo.id}-0`"></div>
</div>
<div>
<div class="hosted-domain__chart-title">{{$t('entities.byCredit')}}</div>
<div class="chart-drawing" :id="`chart${chartInfo.id}-1`"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import {
ipHostedDomain
} from '@/views/charts/charts/options/pie'
import { replaceUrlPlaceholder } from '@/utils/tools'
import { get } from '@/utils/http'
export default {
name: 'ChartEchartIpHostedDomain',
data () {
return {
myChart: null,
myChart2: null,
chartOption: null
}
},
props: {
chartInfo: Object,
chartData: [Array, Object],
entity: Object
},
methods: {
initIpHostedDomain (id) {
const chartParams = this.chartInfo.params
const dom = document.getElementById(id + '-0')
const dom2 = document.getElementById(id + '-1')
!this.myChart && (this.myChart = echarts.init(dom))
!this.myChart2 && (this.myChart2 = echarts.init(dom2))
this.chartOption = this.$_.cloneDeep(ipHostedDomain)
this.$emit('showLoading', true)
const byType = new Promise(resolve => {
get(replaceUrlPlaceholder(chartParams.byTypeUrl, { ip: this.entity.ip })).then(response => {
if (response.code === 200) {
if (this.$_.isEmpty(response.data.result)) {
// this.noData0 = true
} else {
// this.noData0 = false
const chartOption = this.$_.cloneDeep(this.chartOption)
const data = response.data.result.map(d => {
return {
data: d,
name: d.category,
value: parseInt(d.count),
unitType: chartParams.unitType
}
})
chartOption.series[0].data = data
this.myChart.setOption(chartOption)
}
}
resolve()
})
})
const byCredit = new Promise(resolve => {
get(replaceUrlPlaceholder(chartParams.byCreditUrl, { ip: this.entity.ip })).then(response => {
if (response.code === 200) {
if (this.$_.isEmpty(response.data.result)) {
// this.noData1 = true
} else {
// this.noData1 = false
const chartOption = this.$_.cloneDeep(this.chartOption)
const data = response.data.result.map(d => {
return {
data: d,
name: d.reputation,
value: parseInt(d.count),
unitType: chartParams.unitType
}
})
chartOption.series[0].data = data
this.myChart2.setOption(chartOption)
}
}
resolve()
})
})
Promise.all([byType, byCredit]).finally(response => {
setTimeout(() => {
this.$emit('showLoading', false)
}, 1000)
})
}
},
watch: {
chartData: {
deep: true,
handler (n) {
this.initIpHostedDomain(`chart${this.chartInfo.id}`)
}
}
}
}
</script>

107
src/views/charts/charts/ChartEchartPie.vue Normal file
View File

@@ -0,0 +1,107 @@
<template>
<div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
</template>
<script>
import unitConvert from '@/utils/unit-convert'
import * as echarts from 'echarts'
import { lineToSpace } from '@/utils/tools'
import { unitTypes } from '@/utils/constants'
import {
pieWithTable
} from '@/views/charts/charts/options/pie'
export default {
name: 'ChartEchartPie',
data () {
return {
myChart: null,
chartOption: null
}
},
props: {
chartInfo: Object,
chartData: [Array, Object],
resultType: Object
},
methods: {
initPie (id) {
const chartParams = this.chartInfo.params
const dom = document.getElementById(id)
!this.myChart && (this.myChart = echarts.init(dom))
this.chartOption = this.$_.cloneDeep(pieWithTable)
if (chartParams.showLegend === false) {
this.chartOption.legend.show = false
}
const allZero = this.timeLineIsAllZero(this.chartData)
if (allZero) {
this.chartOption.yAxis = {
...this.chartOption.yAxis,
min: 0,
max: 5,
interval: 1
}
}
this.chartOption.series[0].data = this.chartData.map(d => {
return {
data: d,
name: lineToSpace(d.name),
value: parseInt(d.num),
unitType: chartParams.unitType
}
})
const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
const gridTop = 10 + 27 * rows
if (chartParams.unitType === unitTypes.byte) {
this.chartOption.yAxis.axisLabel.formatter = function (value, index, a, b) {
return unitConvert(value, unitTypes.byte).join(' ')
}
this.chartOption.grid = {
top: gridTop,
left: 75
}
} else {
this.chartOption.grid = {
top: gridTop
}
}
this.loadEchartPie()
},
loadEchartPie () {
this.$emit('showLoading', true)
try {
this.myChart.setOption(this.chartOption)
} finally {
setTimeout(() => {
this.$emit('showLoading', false)
}, 200)
}
},
timeLineIsAllZero (data) {
if (this.resultType === 'matrix') {
let allZero = true
try {
data.forEach(d => {
d.values.forEach(r => {
if (r[1] && r[1] !== '0') {
allZero = false
throw new Error('break')
}
})
})
} catch (e) {}
return allZero
}
}
},
watch: {
chartData: {
deep: true,
handler (n) {
this.initPie(`chart${this.chartInfo.id}`)
}
}
}
}
</script>

190
src/views/charts/charts/ChartEchartWithTable.vue Normal file
View File

@@ -0,0 +1,190 @@
<template>
<div class="cn-chart__echarts" >
<div class="cn-chart__body pie-with-table" >
<div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
</div>
<div class="cn-chart__footer pie-with-table" >
<pie-table :tableData="pieTableData" ref="pieTable" :chartInfo="chartInfo" :time-filter="queryParams" :order="orderPieTable"/>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import PieTable from '@/components/charts/PieTable'
import {
pieWithTable
} from '@/views/charts/charts/options/pie'
import { getUnitType } from '@/utils/unit-convert'
import { replaceUrlPlaceholder } from '@/utils/tools'
import { get } from '@/utils/http'
export default {
name: 'ChartEchartWithTable',
data () {
return {
myChart: null,
chartOption: null,
pieTableData: [],
selectPieChartName: '',
allSelectPieChartName: []
}
},
props: {
chartInfo: Object,
chartData: [Array, Object],
resultType: Object,
queryParams: Object,
orderPieTable: Object
},
components: {
PieTable
},
mounted () {
},
methods: {
initEchartsWithTable (id) {
const chartParams = this.chartInfo.params
const dom = document.getElementById(id)
!this.myChart && (this.myChart = echarts.init(dom))
this.chartOption = this.$_.cloneDeep(pieWithTable)
chartParams.valueColumn = this.orderPieTable
const unitType = getUnitType(chartParams.valueColumn)
const tableQueryParams = this.$_.cloneDeep(this.queryParams)
tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方)
const allZero = this.timeLineIsAllZero(this.chartData)
if (allZero) {
this.chartOption.yAxis = {
...this.chartOption.yAxis,
min: 0,
max: 5,
interval: 1
}
}
const data = this.chartData.map(d => {
if (d[chartParams.nameColumn]) {
this.allSelectPieChartName.push(d[chartParams.nameColumn])
}
return {
data: d,
name: d[chartParams.nameColumn],
value: parseInt(d[chartParams.valueColumn]),
unitType: unitType
}
})
this.allSelectPieChartName = tableQueryParams[chartParams.nameColumn]
this.chartOption.series[0].data = data
if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
this.chartOption.legend.type = 'scroll'
}
console.log('table===' + JSON.stringify(this.chartOption))
this.loadEchartWithTable()
if (!this.$_.isEmpty(data)) {
get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response => {
if (response.code === 200) {
this.pieTableData = response.data.result
} else {
// this.isError = true
this.noData = true
// this.errorInfo = response.msg || response.message || 'Unknown'
}
})
}
const self = this
// legend点击事件
this.myChart.off('legendselectchanged')
this.myChart.on('legendselectchanged', function (params) {
self.myChart.setOption({
legend: { selected: { [params.name]: true } }
})
const index = self.chartOption.series[0].data.findIndex(d => d.name === params.name)
if (self.selectPieChartName !== params.name) {
self.myChart.dispatchAction({
type: 'select',
seriesIndex: 0,
dataIndex: index
})
self.selectPieChartName = params.name
self.loadPieTableData(params.name)
} else {
self.myChart.dispatchAction({
type: 'unselect',
seriesIndex: 0,
dataIndex: index
})
self.selectPieChartName = ''
self.loadPieTableData(this.allSelectPieChartName)
}
})
// 饼图色块点击事件
this.myChart.off('click')
this.myChart.on('click', function (echartParams) {
console.log(echartParams)
console.log(self.selectPieChartName)
// 若是已选，则点击后取消选择，并查询全部数据
if (echartParams.name === self.selectPieChartName) {
console.log(1)
self.selectPieChartName = ''
self.loadPieTableData(this.allSelectPieChartName)
} else { // 否则查询当前name数据
self.selectPieChartName = echartParams.name
self.loadPieTableData(echartParams.name)
}
})
},
loadPieTableData (name = '') {
const childrenParams = this.$_.cloneDeep(this.queryParams)
childrenParams[this.chartInfo.params.nameColumn] = name
get(replaceUrlPlaceholder(this.chartInfo.params.urlTable, childrenParams)).then(response => {
if (response.code === 200) {
this.pieTableData = response.data.result
}
})
},
loadEchartWithTable () {
this.$emit('showLoading', true)
try {
this.myChart.setOption(this.chartOption)
} finally {
setTimeout(() => {
this.$emit('showLoading', false)
}, 200)
}
},
timeLineIsAllZero (data) {
if (this.resultType === 'matrix') {
let allZero = true
try {
data.forEach(d => {
d.values.forEach(r => {
if (r[1] && r[1] !== '0') {
allZero = false
throw new Error('break')
}
})
})
} catch (e) {}
return allZero
}
}
},
watch: {
chartData: {
deep: true,
handler (n) {
this.initEchartsWithTable(`chart${this.chartInfo.id}`)
}
}
}
}
</script>

4
src/views/charts/charts/chart-options.js
View File

@@ -664,6 +664,10 @@ export function isSingleValueWithEchartsTemp (type) {
export function isEchartsWithTable (type) {
return type === 31
}
/* 普通饼图 */
export function isEchartsPie (type) {
return type === 32
}
/* table */
export function isTable (type) {
return type >= 61 && type <= 70

4
src/views/charts/charts/tools.js
View File

@@ -69,6 +69,10 @@ export function isMapBlock (type) {
export function isEchartsLine (type) {
return type === 11
}
/* 普通饼图 */
export function isEchartsPie (type) {
return type === 32
}
/* 带统计的折线图 */
export function isEchartsWithStatistics (type) {
return type === 12