diff options
Diffstat (limited to 'src/views/fx/index.vue')
| -rw-r--r-- | src/views/fx/index.vue | 295 |
1 files changed, 295 insertions, 0 deletions
diff --git a/src/views/fx/index.vue b/src/views/fx/index.vue new file mode 100644 index 0000000..5d97ce7 --- /dev/null +++ b/src/views/fx/index.vue @@ -0,0 +1,295 @@ +<!-- 分析统计页面 --> +<script lang="ts" setup> +import { ref, onMounted } from "vue" +import { use } from "echarts/core" +import { BarChart, PieChart } from "echarts/charts" +import { + DatasetComponent, + TransformComponent, + TooltipComponent, + GridComponent, + ToolboxComponent, + LegendComponent +} from "echarts/components" +import { SVGRenderer } from "echarts/renderers" +import VChart from "vue-echarts" +import { SuitcaseLine, Histogram, MapLocation } from "@element-plus/icons-vue" +import { Choropleth } from "@antv/l7plot" + +// echart 图表 +use([ + PieChart, + BarChart, + DatasetComponent, + ToolboxComponent, + TransformComponent, + GridComponent, + TooltipComponent, + SVGRenderer, + LegendComponent +]) +const ispoption = ref({ + tooltip: [ + { + trigger: "item", + formatter: "<b>{a}</b> </br> {c} (<b>{d}%</b>)" + } + ], + toolbox: [ + { + feature: { + saveAsImage: { show: true } // 保存图表 + } + } + ], + legend: [ + { + orient: "vertical", + x: "left" + } + ], + dataset: [ + { + dimensions: ["name", "count"], + source: [ + ["Hannah Krause", 41], + ["Zhao Qian", 20], + ["Jasmin Krause ", 52], + ["Li Lei", 37], + ["Karle Neumann", 25], + ["Adrian Groß", 19], + ["Mia Neumann", 71], + ["Böhm Fuchs", 36], + ["Han Meimei", 67] + ] + } + ], + series: [ + { + name: "IPv6 DNS数量统计", + type: "pie", + // 最小显示角度 + minShowLabelAngle: 1, + encode: { itemName: "name", value: "count" } + } + ] +}) + +const asnoption = ref({ + toolbox: [ + { + feature: { + saveAsImage: { show: true } // 保存图表 + } + } + ], + dataset: [ + { + dimensions: ["name", "count"], + source: [ + ["Hannah Krause", 41], + ["Zhao Qian", 20], + ["Jasmin Krause ", 52], + ["Li Lei", 37], + ["Karle Neumann", 25], + ["Adrian Groß", 19], + ["Mia Neumann", 71], + ["Böhm Fuchs", 36], + ["Han Meimei", 67] + ] + }, + { + transform: { + type: "sort", + config: { dimension: "count", order: "desc" } + } + } + ], + xAxis: { + type: "category", + axisLabel: { interval: 0, rotate: 30 } + }, + yAxis: {}, + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow" + } + }, + series: [ + { + name: "IPv6 DNS数量统计", + type: "bar", + encode: { x: "name", y: "count" }, + datasetIndex: 1 + } + ] +}) + +// L7Plot +onMounted(() => { + new Choropleth("mapcontainer", { + map: { + type: "map", + // style: 'blank', + center: [120.19382669582967, 30.258134], + zoom: 3, + pitch: 0 + }, + source: { + //"Russian Federation", + data: [ + { name: "China", value: 200 }, + { name: "Colombia", value: 250 }, + { name: "United States", value: 180 }, + { name: "Germany", value: 120 }, + + { name: "Russia", value: 130 }, + { name: "澳大利亚", value: 130 }, + { name: "新加坡", value: 170 }, + { name: "巴西", value: 80 } + ], + joinBy: { + sourceField: "name", + geoField: "english" + } + }, + viewLevel: { + level: "world", + adcode: "all" + }, + autoFit: true, + color: { + field: "value", + value: ["#B8E1FF", "#7DAAFF", "#3D76DD", "#0047A5", "#001D70"], + scale: { type: "quantize" } + }, + style: { + opacity: 1, + stroke: "#ccc", + lineWidth: 0.6, + lineOpacity: 1 + }, + chinaBorder: false, + label: { + visible: true, + field: "value", + style: { + fill: "#000", + opacity: 0.8, + fontSize: 10, + stroke: "#fff", + strokeWidth: 1.5, + textAllowOverlap: false, + padding: [5, 5] + } + }, + state: { + active: true, + select: { + stroke: "black", + lineWidth: 1.5, + lineOpacity: 0.8 + } + }, + tooltip: { + items: ["name", "value"], + trigger: "mousemove" + }, + zoom: { + position: "bottomright" + }, + legend: { + position: "bottomleft" + } + }) +}) +</script> + +<template> + <div class="app-container"> + <!-- Top 10厂商 --> + <el-row justify="center"> + <el-col class="icenter"> + <el-card class="box-card" style="width: 92%" shadow="hover"> + <template #header> + <div class="fig-title"> + <SuitcaseLine style="width: 2em; height: 2em; margin-right: 8px" /> + <div style="font-size: 24px; font-weight: 900">IPv6 DNS分布厂商统计</div> + </div> + </template> + <!-- 饼图展示厂商 --> + <v-chart class="chart" :option="ispoption" autoresize /> + </el-card> + </el-col> + </el-row> + <el-row justify="center"> + <el-col class="icenter"> + <el-card class="box-card" style="width: 92%" shadow="hover"> + <template #header> + <div class="fig-title"> + <Histogram style="width: 2em; height: 2em; margin-right: 8px" /> + <div style="font-size: 24px; font-weight: 900">IPv6 DNS分布自治域统计</div> + </div> + </template> + <!-- 柱状图展示ASN --> + <v-chart class="chart" :option="asnoption" autoresize /> + </el-card> + </el-col> + </el-row> + <!-- 地理可视化 --> + <el-row justify="center"> + <el-col class="icenter"> + <el-card class="box-card" style="width: 92%" shadow="hover"> + <template #header> + <div class="fig-title"> + <MapLocation style="width: 2em; height: 2em; margin-right: 8px" /> + <div style="font-size: 24px; font-weight: 900">IPv6 DNS分布国家统计</div> + </div> + </template> + <!-- 地理 --> + <div id="mapcontainer" style="position: relative; height: 100%; min-height: 500px" /> + </el-card> + </el-col> + </el-row> + </div> +</template> + +<style lang="scss" scoped> +.chart { + height: 60vh; +} +.el-row { + margin-bottom: 20px; +} +.card-title { + font-size: 24px; + margin: 10px; + font-weight: 900; + color: aliceblue; +} +.count-num { + font-size: 36px; + font-weight: 900; + color: azure; +} + +.icenter { + display: flex; + justify-content: center; + align-items: center; +} + +.fig-title { + margin-top: 13px; + line-height: 12px; + display: flex; + justify-content: start; + align-items: center; +} + +.box-card { + height: auto; + width: 80%; +} +</style> |