feat: map初始化
This commit is contained in:
chenjinsong
@@ -8,6 +8,8 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@amcharts/amcharts4": "^4.10.20",
|
||||
"@amcharts/amcharts4-geodata": "^4.1.20",
|
||||
"axios": "^0.21.1",
|
||||
"babel-plugin-lodash": "^3.3.4",
|
||||
"core-js": "^3.6.5",
|
||||
|
||||
29
src/components/charts/ChartMap.vue
Normal file
29
src/components/charts/ChartMap.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="cn-chart cn-chart__map">
|
||||
<div class="cn-chart__header">
|
||||
<div class="header__title">
|
||||
<slot name="title"></slot>
|
||||
</div>
|
||||
<div class="header__operations">
|
||||
<slot name="operations"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cn-chart__body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="cn-chart__footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'ChartMap'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -23,7 +23,7 @@ export default {
|
||||
name: 'EchartsFrame',
|
||||
props: {
|
||||
layout: Array,
|
||||
chartInfo: {}
|
||||
chartInfo: Object
|
||||
},
|
||||
setup (props) {
|
||||
return {
|
||||
|
||||
@@ -7,7 +7,6 @@ import { calculateTextWidth } from '@/utils/tools'
|
||||
const timeData = [['1988/10/4', 89], ['1988/10/5', 95], ['1988/10/6', 94], ['1988/10/7', 86], ['1988/10/8', 95], ['1988/10/9', 93], ['1988/10/10', 88], ['1988/10/11', 80], ['1988/10/12', 89], ['1988/10/13', 83], ['1988/10/14', 85], ['1988/10/15', 83], ['1988/10/16', 73], ['1988/10/17', 79], ['1988/10/18', 82], ['1988/10/19', 77], ['1988/10/20', 80], ['1988/10/21', 75], ['1988/10/22', 79], ['1988/10/23', 75], ['1988/10/24', 83], ['1988/10/25', 85], ['1988/10/26', 77], ['1988/10/27', 74], ['1988/10/28', 70], ['1988/10/29', 80], ['1988/10/30', 71], ['1988/10/31', 73], ['1988/11/1', 77], ['1988/11/2', 78], ['1988/11/3', 81], ['1988/11/4', 89], ['1988/11/5', 79], ['1988/11/6', 76], ['1988/11/7', 80], ['1988/11/8', 77], ['1988/11/9', 72], ['1988/11/10', 68], ['1988/11/11', 58], ['1988/11/12', 54], ['1988/11/13', 50], ['1988/11/14', 41], ['1988/11/15', 36], ['1988/11/16', 43], ['1988/11/17', 45], ['1988/11/18', 54], ['1988/11/19', 49], ['1988/11/20', 45], ['1988/11/21', 42], ['1988/11/22', 41], ['1988/11/23', 33], ['1988/11/24', 23], ['1988/11/25', 19], ['1988/11/26', 18], ['1988/11/27', 13], ['1988/11/28', 4], ['1988/11/29', 4], ['1988/11/30', -4], ['1988/12/1', -4], ['1988/12/2', 0], ['1988/12/3', 4], ['1988/12/4', -2], ['1988/12/5', -11], ['1988/12/6', -2], ['1988/12/7', -1], ['1988/12/8', 3], ['1988/12/9', 6], ['1988/12/10', 10], ['1988/12/11', 10], ['1988/12/12', 14], ['1988/12/13', 10], ['1988/12/14', 7], ['1988/12/15', 1], ['1988/12/16', 0], ['1988/12/17', 1], ['1988/12/18', 2], ['1988/12/19', -6], ['1988/12/20', 3], ['1988/12/21', 9], ['1988/12/22', 3], ['1988/12/23', 4], ['1988/12/24', 12], ['1988/12/25', 8], ['1988/12/26', 0], ['1988/12/27', -8], ['1988/12/28', -10], ['1988/12/29', -13], ['1988/12/30', -10], ['1988/12/31', -13], ['1989/1/1', -3], ['1989/1/2', 5], ['1989/1/3', -5], ['1989/1/4', -9], ['1989/1/5', 1], ['1989/1/6', 5], ['1989/1/7', -1], ['1989/1/8', 4], ['1989/1/9', 9], ['1989/1/10', -1], ['1989/1/11', 6], ['1989/1/12', 1], ['1989/1/13', 11], ['1989/1/14', 11], ['1989/1/15', 7], ['1989/1/16', 1], ['1989/1/17', 0], ['1989/1/18', -5], ['1989/1/19', -9], ['1989/1/20', -8], ['1989/1/21', -12], ['1989/1/22', -6], ['1989/1/23', -6], ['1989/1/24', -9], ['1989/1/25', -13], ['1989/1/26', -23], ['1989/1/27', -25], ['1989/1/28', -21], ['1989/1/29', -21], ['1989/1/30', -22], ['1989/1/31', -31], ['1989/2/1', -23], ['1989/2/2', -17], ['1989/2/3', -19], ['1989/2/4', -26], ['1989/2/5', -28], ['1989/2/6', -24], ['1989/2/7', -26], ['1989/2/8', -33], ['1989/2/9', -30], ['1989/2/10', -39], ['1989/2/11', -37], ['1989/2/12', -36], ['1989/2/13', -32], ['1989/2/14', -39], ['1989/2/15', -30], ['1989/2/16', -28], ['1989/2/17', -19], ['1989/2/18', -19], ['1989/2/19', -20], ['1989/2/20', -17], ['1989/2/21', -26], ['1989/2/22', -26], ['1989/2/23', -32], ['1989/2/24', -35], ['1989/2/25', -44], ['1989/2/26', -44], ['1989/2/27', -48], ['1989/2/28', -46], ['1989/3/1', -53], ['1989/3/2', -57], ['1989/3/3', -50], ['1989/3/4', -44], ['1989/3/5', -43], ['1989/3/6', -48], ['1989/3/7', -58], ['1989/3/8', -67], ['1989/3/9', -58], ['1989/3/10', -53], ['1989/3/11', -52], ['1989/3/12', -59], ['1989/3/13', -67], ['1989/3/14', -59], ['1989/3/15', -51], ['1989/3/16', -49], ['1989/3/17', -40], ['1989/3/18', -39], ['1989/3/19', -48], ['1989/3/20', -48], ['1989/3/21', -52], ['1989/3/22', -47], ['1989/3/23', -53], ['1989/3/24', -46], ['1989/3/25', -53], ['1989/3/26', -57], ['1989/3/27', -67], ['1989/3/28', -65], ['1989/3/29', -68], ['1989/3/30', -62], ['1989/3/31', -53], ['1989/4/1', -46], ['1989/4/2', -42], ['1989/4/3', -40], ['1989/4/4', -45], ['1989/4/5', -42], ['1989/4/6', -47], ['1989/4/7', -46], ['1989/4/8', -55], ['1989/4/9', -60], ['1989/4/10', -55], ['1989/4/11', -45], ['1989/4/12', -50], ['1989/4/13', -40], ['1989/4/14', -48], ['1989/4/15', -53], ['1989/4/16', -51], ['1989/4/17', -46], ['1989/4/18', -43], ['1989/4/19', -38], ['1989/4/20', -44]]
|
||||
const timeData2 = [['1988/10/4', 69], ['1988/10/5', 65], ['1988/10/6', 64], ['1988/10/7', 66], ['1988/10/8', 65], ['1988/10/9', 63], ['1988/10/10', 68], ['1988/10/11', 60], ['1988/10/12', 69], ['1988/10/13', 63], ['1988/10/14', 65], ['1988/10/15', 63], ['1988/10/16', 73], ['1988/10/17', 79], ['1988/10/18', 62], ['1988/10/19', 77], ['1988/10/20', 60], ['1988/10/21', 75], ['1988/10/22', 79], ['1988/10/23', 75], ['1988/10/24', 63], ['1988/10/25', 65], ['1988/10/26', 77], ['1988/10/27', 74], ['1988/10/28', 70], ['1988/10/29', 60], ['1988/10/30', 71], ['1988/10/31', 73], ['1988/11/1', 77], ['1988/11/2', 78], ['1988/11/3', 61], ['1988/11/4', 69], ['1988/11/5', 79], ['1988/11/6', 76], ['1988/11/7', 60], ['1988/11/8', 77], ['1988/11/9', 72], ['1988/11/10', 68], ['1988/11/11', 58], ['1988/11/12', 54], ['1988/11/13', 50], ['1988/11/14', 41], ['1988/11/15', 36], ['1988/11/16', 43], ['1988/11/17', 45], ['1988/11/18', 54], ['1988/11/19', 49], ['1988/11/20', 45], ['1988/11/21', 42], ['1988/11/22', 41], ['1988/11/23', 33], ['1988/11/24', 23], ['1988/11/25', 19], ['1988/11/26', 18], ['1988/11/27', 13], ['1988/11/28', 4], ['1988/11/29', 4], ['1988/11/30', -4], ['1988/12/1', -4], ['1988/12/2', 0], ['1988/12/3', 4], ['1988/12/4', -2], ['1988/12/5', -11], ['1988/12/6', -2], ['1988/12/7', -1], ['1988/12/8', 3], ['1988/12/9', 6], ['1988/12/10', 10], ['1988/12/11', 10], ['1988/12/12', 14], ['1988/12/13', 10], ['1988/12/14', 7], ['1988/12/15', 1], ['1988/12/16', 0], ['1988/12/17', 1], ['1988/12/18', 2], ['1988/12/19', -6], ['1988/12/20', 3], ['1988/12/21', 9], ['1988/12/22', 3], ['1988/12/23', 4], ['1988/12/24', 12], ['1988/12/25', 6], ['1988/12/26', 0], ['1988/12/27', -8], ['1988/12/28', -10], ['1988/12/29', -13], ['1988/12/30', -10], ['1988/12/31', -13], ['1989/1/1', -3], ['1989/1/2', 5], ['1989/1/3', -5], ['1989/1/4', -9], ['1989/1/5', 1], ['1989/1/6', 5], ['1989/1/7', -1], ['1989/1/8', 4], ['1989/1/9', 9], ['1989/1/10', -1], ['1989/1/11', 6], ['1989/1/12', 1], ['1989/1/13', 11], ['1989/1/14', 11], ['1989/1/15', 7], ['1989/1/16', 1], ['1989/1/17', 0], ['1989/1/18', -5], ['1989/1/19', -9], ['1989/1/20', -8], ['1989/1/21', -12], ['1989/1/22', -6], ['1989/1/23', -6], ['1989/1/24', -9], ['1989/1/25', -13], ['1989/1/26', -23], ['1989/1/27', -25], ['1989/1/28', -21], ['1989/1/29', -21], ['1989/1/30', -22], ['1989/1/31', -31], ['1989/2/1', -23], ['1989/2/2', -17], ['1989/2/3', -19], ['1989/2/4', -26], ['1989/2/5', -28], ['1989/2/6', -24], ['1989/2/7', -26], ['1989/2/8', -33], ['1989/2/9', -30], ['1989/2/10', -39], ['1989/2/11', -37], ['1989/2/12', -36], ['1989/2/13', -32], ['1989/2/14', -39], ['1989/2/15', -30], ['1989/2/16', -28], ['1989/2/17', -19], ['1989/2/18', -19], ['1989/2/19', -20], ['1989/2/20', -17], ['1989/2/21', -26], ['1989/2/22', -26], ['1989/2/23', -32], ['1989/2/24', -35], ['1989/2/25', -44], ['1989/2/26', -44], ['1989/2/27', -48], ['1989/2/28', -46], ['1989/3/1', -53], ['1989/3/2', -57], ['1989/3/3', -50], ['1989/3/4', -44], ['1989/3/5', -43], ['1989/3/6', -48], ['1989/3/7', -58], ['1989/3/8', -67], ['1989/3/9', -58], ['1989/3/10', -53], ['1989/3/11', -52], ['1989/3/12', -59], ['1989/3/13', -67], ['1989/3/14', -59], ['1989/3/15', -51], ['1989/3/16', -49], ['1989/3/17', -40], ['1989/3/18', -39], ['1989/3/19', -48], ['1989/3/20', -48], ['1989/3/21', -52], ['1989/3/22', -47], ['1989/3/23', -53], ['1989/3/24', -46], ['1989/3/25', -53], ['1989/3/26', -57], ['1989/3/27', -67], ['1989/3/28', -65], ['1989/3/29', -68], ['1989/3/30', -62], ['1989/3/31', -53], ['1989/4/1', -46], ['1989/4/2', -42], ['1989/4/3', -40], ['1989/4/4', -45], ['1989/4/5', -42], ['1989/4/6', -47], ['1989/4/7', -46], ['1989/4/8', -55], ['1989/4/9', -60], ['1989/4/10', -55], ['1989/4/11', -45], ['1989/4/12', -50], ['1989/4/13', -40], ['1989/4/14', -48], ['1989/4/15', -53], ['1989/4/16', -51], ['1989/4/17', -46], ['1989/4/18', -43], ['1989/4/19', -38], ['1989/4/20', -44]]
|
||||
const timeData3 = [['1988/10/4', 49], ['1988/10/5', 45], ['1988/10/6', 44], ['1988/10/7', 46], ['1988/10/8', 45], ['1988/10/9', 43], ['1988/10/10', 48], ['1988/10/11', 40], ['1988/10/12', 49], ['1988/10/13', 43], ['1988/10/14', 45], ['1988/10/15', 43], ['1988/10/16', 73], ['1988/10/17', 79], ['1988/10/18', 42], ['1988/10/19', 77], ['1988/10/20', 40], ['1988/10/21', 75], ['1988/10/22', 79], ['1988/10/23', 75], ['1988/10/24', 63], ['1988/10/25', 65], ['1988/10/26', 77], ['1988/10/27', 74], ['1988/10/28', 70], ['1988/10/29', 60], ['1988/10/30', 71], ['1988/10/31', 73], ['1988/11/1', 77], ['1988/11/2', 78], ['1988/11/3', 61], ['1988/11/4', 69], ['1988/11/5', 79], ['1988/11/6', 76], ['1988/11/7', 60], ['1988/11/8', 77], ['1988/11/9', 72], ['1988/11/10', 68], ['1988/11/11', 58], ['1988/11/12', 54], ['1988/11/13', 50], ['1988/11/14', 41], ['1988/11/15', 36], ['1988/11/16', 43], ['1988/11/17', 45], ['1988/11/18', 54], ['1988/11/19', 49], ['1988/11/20', 45], ['1988/11/21', 42], ['1988/11/22', 41], ['1988/11/23', 33], ['1988/11/24', 23], ['1988/11/25', 19], ['1988/11/26', 18], ['1988/11/27', 13], ['1988/11/28', 4], ['1988/11/29', 4], ['1988/11/30', -4], ['1988/12/1', -4], ['1988/12/2', 0], ['1988/12/3', 4], ['1988/12/4', -2], ['1988/12/5', -11], ['1988/12/6', -2], ['1988/12/7', -1], ['1988/12/8', 3], ['1988/12/9', 6], ['1988/12/10', 10], ['1988/12/11', 10], ['1988/12/12', 14], ['1988/12/13', 10], ['1988/12/14', 7], ['1988/12/15', 1], ['1988/12/16', 0], ['1988/12/17', 1], ['1988/12/18', 2], ['1988/12/19', -6], ['1988/12/20', 3], ['1988/12/21', 9], ['1988/12/22', 3], ['1988/12/23', 4], ['1988/12/24', 12], ['1988/12/25', 6], ['1988/12/26', 0], ['1988/12/27', -8], ['1988/12/28', -10], ['1988/12/29', -13], ['1988/12/30', -10], ['1988/12/31', -13], ['1989/1/1', -3], ['1989/1/2', 5], ['1989/1/3', -5], ['1989/1/4', -9], ['1989/1/5', 1], ['1989/1/6', 5], ['1989/1/7', -1], ['1989/1/8', 4], ['1989/1/9', 9], ['1989/1/10', -1], ['1989/1/11', 6], ['1989/1/12', 1], ['1989/1/13', 11], ['1989/1/14', 11], ['1989/1/15', 7], ['1989/1/16', 1], ['1989/1/17', 0], ['1989/1/18', -5], ['1989/1/19', -9], ['1989/1/20', -8], ['1989/1/21', -12], ['1989/1/22', -6], ['1989/1/23', -6], ['1989/1/24', -9], ['1989/1/25', -13], ['1989/1/26', -23], ['1989/1/27', -25], ['1989/1/28', -21], ['1989/1/29', -21], ['1989/1/30', -22], ['1989/1/31', -31], ['1989/2/1', -23], ['1989/2/2', -17], ['1989/2/3', -19], ['1989/2/4', -26], ['1989/2/5', -28], ['1989/2/6', -24], ['1989/2/7', -26], ['1989/2/8', -33], ['1989/2/9', -30], ['1989/2/10', -39], ['1989/2/11', -37], ['1989/2/12', -36], ['1989/2/13', -32], ['1989/2/14', -39], ['1989/2/15', -30], ['1989/2/16', -28], ['1989/2/17', -19], ['1989/2/18', -19], ['1989/2/19', -20], ['1989/2/20', -17], ['1989/2/21', -26], ['1989/2/22', -26], ['1989/2/23', -32], ['1989/2/24', -35], ['1989/2/25', -44], ['1989/2/26', -44], ['1989/2/27', -48], ['1989/2/28', -46], ['1989/3/1', -53], ['1989/3/2', -57], ['1989/3/3', -50], ['1989/3/4', -44], ['1989/3/5', -43], ['1989/3/6', -48], ['1989/3/7', -58], ['1989/3/8', -67], ['1989/3/9', -58], ['1989/3/10', -53], ['1989/3/11', -52], ['1989/3/12', -59], ['1989/3/13', -67], ['1989/3/14', -59], ['1989/3/15', -51], ['1989/3/16', -49], ['1989/3/17', -40], ['1989/3/18', -39], ['1989/3/19', -48], ['1989/3/20', -48], ['1989/3/21', -52], ['1989/3/22', -47], ['1989/3/23', -53], ['1989/3/24', -46], ['1989/3/25', -53], ['1989/3/26', -57], ['1989/3/27', -67], ['1989/3/28', -65], ['1989/3/29', -68], ['1989/3/30', -62], ['1989/3/31', -53], ['1989/4/1', -46], ['1989/4/2', -42], ['1989/4/3', -40], ['1989/4/4', -45], ['1989/4/5', -42], ['1989/4/6', -47], ['1989/4/7', -46], ['1989/4/8', -55], ['1989/4/9', -60], ['1989/4/10', -55], ['1989/4/11', -45], ['1989/4/12', -50], ['1989/4/13', -40], ['1989/4/14', -48], ['1989/4/15', -53], ['1989/4/16', -51], ['1989/4/17', -46], ['1989/4/18', -43], ['1989/4/19', -38], ['1989/4/20', -44]]
|
||||
const mapLine = {}
|
||||
const pieData = [
|
||||
{ value: 1, name: 'uniq_domain' },
|
||||
{ value: 2, name: 'bytes' },
|
||||
@@ -257,7 +256,6 @@ const pieWithTable = {
|
||||
]
|
||||
}
|
||||
const typeOptionMappings = [
|
||||
{ value: 1, option: mapLine }, // 连线地图
|
||||
{ value: 11, option: line }, // 常规折线图
|
||||
{ value: 13, option: lineStack }, // 常规折线图
|
||||
{ value: 31, option: pieWithTable }, // 常规折线图
|
||||
@@ -266,13 +264,16 @@ const typeOptionMappings = [
|
||||
{ value: 93, option: line } // 大标题
|
||||
]
|
||||
const typeCategory = {
|
||||
MAP: 'map',
|
||||
TABLE: 'table',
|
||||
ECHARTS: 'echarts',
|
||||
TITLE: 'title',
|
||||
SINGLE: 'singleValue'
|
||||
}
|
||||
export function getTypeCategory (type) {
|
||||
if (isEcharts(type)) {
|
||||
if (isMap(type)) {
|
||||
return typeCategory.MAP
|
||||
} else if (isEcharts(type)) {
|
||||
return typeCategory.ECHARTS
|
||||
} else if (isTable(type)) {
|
||||
return typeCategory.TABLE
|
||||
@@ -284,7 +285,15 @@ export function getTypeCategory (type) {
|
||||
}
|
||||
/* 饼图柱状图等 */
|
||||
export function isEcharts (type) {
|
||||
return type <= 50
|
||||
return type >= 11 && type <= 50
|
||||
}
|
||||
/* 地图 */
|
||||
export function isMap (type) {
|
||||
return type >= 1 && type <= 10
|
||||
}
|
||||
/* 连线地图 */
|
||||
export function isMapLine (type) {
|
||||
return type === 1
|
||||
}
|
||||
/* 带统计的折线图 */
|
||||
export function isEchartsWithStatistics (type) {
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.cn-chart__echarts, .cn-chart__table {
|
||||
.cn-chart__echarts, .cn-chart__table, .cn-chart__map {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.cn-chart__header {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import i18n from '@/i18n'
|
||||
import _ from 'lodash'
|
||||
|
||||
export const tableSort = {
|
||||
// 是否需要排序
|
||||
@@ -376,3 +377,11 @@ export function calculateTextWidth (text, fontSize = 14) {
|
||||
html.innerText = text
|
||||
return html.offsetWidth
|
||||
}
|
||||
|
||||
/* url占位符处理 */
|
||||
export function replaceUrlPlaceholder (url, params) {
|
||||
_.forIn(params, (value, key) => {
|
||||
url = url.replace('{{' + key + '}}', value)
|
||||
})
|
||||
return url
|
||||
}
|
||||
|
||||
@@ -1,7 +1,20 @@
|
||||
<template>
|
||||
<!-- echarts类的图标，如饼图、柱状图、折线图等 -->
|
||||
<!-- 地图 -->
|
||||
<chart-map
|
||||
v-if="isMap"
|
||||
:style="computePosition"
|
||||
>
|
||||
<template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
|
||||
<template #operations>
|
||||
<i class="cn-icon cn-icon-more-light"></i>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
|
||||
</template>
|
||||
</chart-map>
|
||||
<!-- echarts类的图，如饼图、柱状图、折线图等 -->
|
||||
<echarts-frame
|
||||
v-if="isEcharts"
|
||||
v-else-if="isEcharts"
|
||||
:layout="layout"
|
||||
:style="computePosition"
|
||||
:chartInfo="chartInfo"
|
||||
@@ -84,16 +97,35 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { isEcharts, isSingleValue, isTable, getOption, getTypeCategory, getLayout, layoutConstant, heightUnit, isEchartsWithTable, pieTableDatas } from '@/components/charts/chart-options'
|
||||
import * as am4Core from '@amcharts/amcharts4/core'
|
||||
import * as am4Maps from '@amcharts/amcharts4/maps'
|
||||
import am4GeoDataWorldLow from '@amcharts/amcharts4-geodata/worldChinaLow'
|
||||
|
||||
import {
|
||||
isEcharts,
|
||||
isSingleValue,
|
||||
isTable,
|
||||
isMap,
|
||||
getOption,
|
||||
getTypeCategory,
|
||||
getLayout,
|
||||
layoutConstant,
|
||||
heightUnit,
|
||||
isEchartsWithTable,
|
||||
pieTableDatas,
|
||||
isMapLine
|
||||
} from '@/components/charts/chart-options'
|
||||
import EchartsFrame from '@/components/charts/EchartsFrame'
|
||||
import SingleValue from '@/components/charts/ChartSingleValue'
|
||||
import Table from '@/components/charts/ChartTable'
|
||||
import ChartTable from '@/components/charts/ChartTable'
|
||||
import ChartMap from '@/components/charts/ChartMap'
|
||||
import PieTable from '@/components/charts/PieTable'
|
||||
import ChartTablePagination from '@/components/charts/ChartTablePagination'
|
||||
import { chartTableDefaultPageSize, chartTableTopOptions } from '@/utils/constants'
|
||||
import { get } from '@/utils/http'
|
||||
import { replaceUrlPlaceholder } from '@/utils/tools'
|
||||
|
||||
let myChart // echarts实例
|
||||
let myChart // echarts或amcharts实例
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
@@ -110,8 +142,9 @@ export default {
|
||||
EchartsFrame,
|
||||
SingleValue,
|
||||
ChartTablePagination,
|
||||
'chart-table': Table,
|
||||
PieTable
|
||||
ChartTable,
|
||||
PieTable,
|
||||
ChartMap
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -129,9 +162,26 @@ export default {
|
||||
methods: {
|
||||
initChart () {
|
||||
const self = this
|
||||
const now = this.dayJs.tz().valueOf()
|
||||
const params = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null
|
||||
if (this.isEcharts) {
|
||||
const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
|
||||
if (this.isMap) {
|
||||
myChart = this.initMap(`chart${this.chartInfo.id}`)
|
||||
/* const queryParams = { startTime: this.startTime, endTime: this.endTime } // 统计数据的查询参数
|
||||
if (chartParams) {
|
||||
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
|
||||
console.info(response)
|
||||
})
|
||||
} */
|
||||
if (this.isMapLine) {
|
||||
const lineSeries = myChart.series.push(new am4Maps.MapLineSeries())
|
||||
lineSeries.data = [
|
||||
{
|
||||
multiGeoLine: mapResponse.data.map(d => {
|
||||
return [{ latitude: d.server_latitude, longitude: d.server_longitude }, { latitude: d.client_latitude, longitude: d.client_longitude }]
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
} else if (this.isEcharts) {
|
||||
myChart = echarts.init(document.getElementById(`chart${this.chartInfo.id}`))
|
||||
myChart.setOption(this.chartOption)
|
||||
if (this.isEchartsWithTable) {
|
||||
@@ -139,32 +189,32 @@ export default {
|
||||
this.chartOption.legend.type = 'scroll'
|
||||
myChart.setOption(this.chartOption)
|
||||
}
|
||||
if (params.url.split('?').length > 1) {
|
||||
params.url = params.url.split('?')[0]
|
||||
if (chartParams.url.split('?').length > 1) {
|
||||
chartParams.url = chartParams.url.split('?')[0]
|
||||
}
|
||||
if (params.urlTable.split('?').length > 1) {
|
||||
params.urlTable = params.urlTable.split('?')[0]
|
||||
if (chartParams.urlTable.split('?').length > 1) {
|
||||
chartParams.urlTable = chartParams.urlTable.split('?')[0]
|
||||
}
|
||||
/* get(params.url, { startTime: now - 3600000, endTime: now, order: params.order ? params.order : null, limit: params.limit ? params.limit : '20' }).then(response => {
|
||||
/* get(chartParams.url, { startTime: now - 3600000, endTime: now, order: chartParams.order ? chartParams.order : null, limit: chartParams.limit ? chartParams.limit : '20' }).then(response => {
|
||||
console.log(response)
|
||||
}) */
|
||||
// 获取pieTable的 table数据
|
||||
/* get(params.urlTable, { startTime: this.startTime, endTime: this.endTime, fqdnCategoryName: echartParams.name }).then(response => {
|
||||
/* get(chartParams.urlTable, { startTime: this.startTime, endTime: this.endTime, fqdnCategoryName: echartParams.name }).then(response => {
|
||||
console.log(response)
|
||||
}) */
|
||||
self.pieTableData = pieTableDatas
|
||||
myChart.on('click', function (echartParams) {
|
||||
/* get(params.urlTable, { startTime: this.startTime, endTime: this.endTime, fqdnCategoryName: echartParams.name }).then(response => {
|
||||
/* get(chartParams.urlTable, { startTime: this.startTime, endTime: this.endTime, fqdnCategoryName: echartParams.name }).then(response => {
|
||||
console.log(response)
|
||||
}) */
|
||||
self.pieTableData = pieTableDatas
|
||||
})
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
myChart.resize()
|
||||
})
|
||||
/*this.$nextTick(() => {
|
||||
myChart.doLayout()
|
||||
})*/
|
||||
} else if (this.isTable) {
|
||||
if (params) {
|
||||
if (chartParams) {
|
||||
const tableColumns = new Set()
|
||||
tableResponse.data.forEach(d => {
|
||||
Object.keys(d).forEach(k => {
|
||||
@@ -175,7 +225,7 @@ export default {
|
||||
this.table.orderBy = this.table.tableColumns[0]
|
||||
this.table.tableData = tableResponse.data
|
||||
this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
|
||||
/* get(params.url, { startTime: now - 3600000, endTime: now, order: params.order ? params.order : null, limit: params.limit ? params.limit : null }).then(response => {
|
||||
/* get(chartParams.url, { startTime: now - 3600000, endTime: now, order: chartParams.order ? chartParams.order : null, limit: chartParams.limit ? chartParams.limit : null }).then(response => {
|
||||
if (response.code === 200) {
|
||||
const tableColumns = new Set()
|
||||
response.data.forEach(d => {
|
||||
@@ -190,6 +240,20 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
initMap (id) {
|
||||
const myChart = am4Core.create(id, am4Maps.MapChart)
|
||||
myChart.geodata = am4GeoDataWorldLow
|
||||
myChart.projection = new am4Maps.projections.Miller()
|
||||
const polygonSeries = myChart.series.push(new am4Maps.MapPolygonSeries())
|
||||
polygonSeries.useGeodata = true
|
||||
polygonSeries.exclude = ['AQ'] // 移除南极洲
|
||||
const polygonTemplate = polygonSeries.mapPolygons.template
|
||||
polygonTemplate.tooltipText = '{name}'
|
||||
polygonTemplate.fill = am4Core.color('#E7EDF6')
|
||||
/* const hs = polygonTemplate.states.create('hover') // 添加hover事件
|
||||
hs.properties.fill = am4Core.color('#B7BDC6') */
|
||||
return myChart
|
||||
},
|
||||
pageJump (val) {
|
||||
this.table.currentPageData = this.getTargetPageData(val, this.table.pageSize, this.table.tableData)
|
||||
},
|
||||
@@ -222,11 +286,46 @@ export default {
|
||||
isEchartsWithTable: isEchartsWithTable(props.chart.type),
|
||||
isSingleValue: isSingleValue(props.chart.type),
|
||||
isTable: isTable(props.chart.type),
|
||||
isMap: isMap(props.chart.type),
|
||||
isMapLine: isMapLine(props.chart.type),
|
||||
layout: getLayout(props.chart.type)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const mapResponse = JSON.parse(`{
|
||||
"code": "200666",
|
||||
"data": [{
|
||||
"server_longitude": "110.290534",
|
||||
"server_latitude": "30.816222",
|
||||
"server_country": "America",
|
||||
"server_region": "Washington",
|
||||
"client_longitude": "116.352963",
|
||||
"client_latitude": "40.409079",
|
||||
"client_country": "China",
|
||||
"client_region": "Beijing",
|
||||
"bytes": 27010,
|
||||
"sessions": 40
|
||||
}, {
|
||||
"server_longitude": "2.352222",
|
||||
"server_latitude": "48.856614",
|
||||
"server_country": "America",
|
||||
"server_region": "Washington",
|
||||
"client_longitude": "-74.005973",
|
||||
"client_latitude": "40.712775",
|
||||
"client_country": "China",
|
||||
"client_region": "Beijing",
|
||||
"bytes": 67010,
|
||||
"sessions": 30
|
||||
}],
|
||||
"status": 200,
|
||||
"statistics": {
|
||||
"result_rows": 0,
|
||||
"elapsed": 0,
|
||||
"rows_read": 0,
|
||||
"result_size": 0
|
||||
}
|
||||
}`)
|
||||
const tableResponse = JSON.parse(`{
|
||||
"status": 200,
|
||||
"success": true,
|
||||
|
||||
Reference in New Issue
Block a user