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

perf: statisticslegend样式调整

Browse Source
This commit is contained in:
chenjinsong
2021-07-10 11:18:40 +08:00
parent 37c29e02cb
commit 4fbccf55a8
3 changed files with 55 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/charts/StatisticsLegend.vue
View File

@@ -43,7 +43,7 @@ export default {
</script>
<style lang="scss" scoped>
.chart__legend {
width: calc(100% - 60px);
width: calc(100% - 40px);
height: 105px;
border: 1px solid #E7EAED;
color: #5f6368;

5
src/components/charts/chart-options.js
View File

@@ -94,8 +94,9 @@ const lineWithStatistics = {
color: chartColor,
grid: {
left: 55,
bottom: 25,
top: 30
bottom: 30,
top: 20,
right: 20
},
legend: {
show: false

96
src/views/charts/Chart.vue
View File

@@ -30,7 +30,7 @@
<template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
<template #operations>
<i class="cn-icon cn-icon-more-light"></i>
<!-- <i class="cn-icon cn-icon-refresh" @click="mapReload"></i>-->
<!-- <i class="cn-icon cn-icon-refresh" @click="loadMap"></i>-->
</template>
<template #default>
<div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
@@ -220,55 +220,18 @@ export default {
if (this.isMap) {
this.myChart = this.initMap(`chart${this.chartInfo.id}`)
if (chartParams) {
this.mapReload()
this.loadMap()
}
} else if (this.isEcharts) {
const dom = document.getElementById(`chart${this.chartInfo.id}`)
this.myChart = echarts.init(dom)
if (chartParams) {
if (this.isEchartsWithTable) {
this.chartWithPieTableInit(chartParams)
this.initEchartsWithPieTable(chartParams)
} else if (this.isEchartsWithStatistics) {
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) {
this.statisticsData = response.data.result
const seriesTemplate = this.chartOption.series[0]
this.chartOption.series = response.data.result.map((r, i) => {
return {
...seriesTemplate,
name: r.legend,
data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])]),
lineStyle: {
color: getChartColor[i]
}
}
})
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
this.myChart.resize()
})
})
this.initEchartsWithStatistics(chartParams)
} else {
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) {
this.statisticsData = response.data.result
const seriesTemplate = this.chartOption.series[0]
this.chartOption.series = response.data.result.map(r => {
return {
...seriesTemplate,
name: r.legend,
data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])])
}
})
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
this.myChart.resize()
})
})
this.initECharts(chartParams)
}
}
} else if (this.isTable) {
@@ -315,7 +278,7 @@ export default {
hs.properties.fill = am4Core.color('#ccc') */
return chart
},
mapReload () {
loadMap () {
const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), country: '', region: '' } // 统计数据的查询参数
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
@@ -414,10 +377,53 @@ export default {
if (this.chart.type === 31) {
const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
this.myChart.off('click')
this.chartWithPieTableInit(chartParams)
this.initEchartsWithPieTable(chartParams)
}
},
chartWithPieTableInit (chartParams) {
initECharts (chartParams) {
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) {
this.statisticsData = response.data.result
const seriesTemplate = this.chartOption.series[0]
this.chartOption.series = response.data.result.map(r => {
return {
...seriesTemplate,
name: r.legend,
data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])])
}
})
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
this.myChart.resize()
})
})
},
initEchartsWithStatistics (chartParams) {
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) {
this.statisticsData = response.data.result
const seriesTemplate = this.chartOption.series[0]
this.chartOption.series = response.data.result.map((r, i) => {
return {
...seriesTemplate,
name: r.legend,
data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])]),
lineStyle: {
color: getChartColor[i]
}
}
})
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
this.myChart.resize()
})
})
},
initEchartsWithPieTable (chartParams) {
const self = this
chartParams.valueColumn = this.orderPieTable
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10, order: this.orderPieTable } // 统计数据的查询参数