From e2fc7624f5c627de7f743d9fab3d60917428b839 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Sat, 9 May 2020 20:36:20 +0800
Subject: [PATCH] =?UTF-8?q?test:=20echarts=20topo=E8=AF=95=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/header.vue          |   3 +
 .../page/dashboard/overview/test.vue          | 200 ++++++++++++++++++
 nezha-fronted/src/router/index.js             |   4 +
 3 files changed, 207 insertions(+)
 create mode 100644 nezha-fronted/src/components/page/dashboard/overview/test.vue

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 7321f04a2..4750f75d4 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -45,6 +45,9 @@
         <el-menu-item index="1-2">
           <div @click="jumpTo('explore')" :class="{'menu-item-active' :activeIndex == 'explore'}">{{$t('dashboard.metricPreview.title')}}</div>
         </el-menu-item>
+        <el-menu-item index="1-3">
+          <div @click="jumpTo('test')" :class="{'menu-item-active' :activeIndex == 'test'}">test</div>
+        </el-menu-item>
       </el-submenu>
 
       <el-submenu index="2" popper-class="nz-submenu">
diff --git a/nezha-fronted/src/components/page/dashboard/overview/test.vue b/nezha-fronted/src/components/page/dashboard/overview/test.vue
new file mode 100644
index 000000000..1c7b759df
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/overview/test.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="overview" style="height: 100%;">
+    <!--左侧菜单栏-->
+    <left-menu>
+      <div slot="content-left" class="slot-content">
+        <div class="sidebar-title">{{$t('dashboard.title')}}</div>
+        <div class="sidebar-info">
+          <div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.overview.title')}}</div>
+          <div class="sidebar-info-item sidebar-info-top " @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
+          <div class="sidebar-info-item" @click="jumpTo('explore')">{{$t('dashboard.metricPreview.title')}}</div>
+        </div>
+      </div>
+      <!--右侧内容-->
+      <div class="overview-right slot-content" id="mainDisplay" slot="content-right">
+        <div id="topo" style="width: 75%; display: inline-block; height: 99%"></div>
+        <div style="width: 24%; display: inline-block; height: 99%; background-color: white; vertical-align: top">
+          name: <input id="k1"></input><br/>
+          alerts: <input id="k2"></input><br/>
+          x: <input id="k3"></input>
+        </div>
+      </div>
+    </left-menu>
+    <div class="axis-tooltip el-popover"></div>
+    <!--用于assetType饼图label-->
+    <img src='../../../../assets/img/up.png' id="upPic" style="display: none;">
+    <img src='../../../../assets/img/down.png' id="downPic" style="display: none;">
+  </div>
+</template>
+
+<script>
+  import chart from "./chart";
+  import echarts from 'echarts';
+
+  export default {
+    name: "test",
+    data() {
+      return {
+        chart: '',
+        data: {nodes: [
+            {color: "#4f19c7", label: "jquery", y: -404.26147, x: -739.36383, id: "jquery", size: 54},
+            {color: "#4f19c7", label: "jsdom", y: -404.26147, x: -738.06383, id: "jsdom", size: 13}],
+          edges: [{sourceID: "jquery", targetID: "jsdom", size: 1}]}
+      }
+    },
+    methods: {
+      load() {
+        let myChart = echarts.init(document.getElementById("topo"));
+        var symbolSize = 20;
+
+        //var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
+        var data = [[[15, 0], [-50, 10]], [[-50, 10], [-56.5, 20]], [[-56.5, 20], [-46.5, 30]], [[-46.5, 30], [-22.1, 40]]];
+        var data1 = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
+        var data2 = data.map((d, i) => {
+          return {
+            name: i,
+            coords: d
+          };
+        });
+        myChart.setOption({
+          xAxis: {
+            min: -100,
+            max: 80,
+            type: 'value',
+            axisLine: {onZero: false},
+            show: false
+          },
+          yAxis: {
+            min: -30,
+            max: 60,
+            type: 'value',
+            axisLine: {onZero: false},
+            show: false
+          },
+          series: [
+            {
+              id: 'a',
+              type: 'lines',
+              coordinateSystem: 'cartesian2d',
+              symbol: ['none', 'arrow'],
+              symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。
+              data: data2,
+              lineStyle: {
+                normal: {
+                  color: '#ff0000',
+                  width: 1,
+                  curveness: 0.2
+                }
+              },
+            }, {
+              id: 'b',
+              symbolSize: 20,
+              data: data1,
+              type: 'scatter',
+              label: {
+                show: true,
+              }
+            }
+          ]
+        });
+        /*myChart.setOption({
+          // 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。
+          // 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。
+          // 用 map 方法遍历 data 的每项，为每项生成一个圆点。
+          graphic: echarts.util.map(data, function (dataItem, dataIndex) {
+            let a = {
+              type: 'circle',
+              shape: {
+                r: symbolSize / 2
+              },
+              position: myChart.convertToPixel('grid', dataItem),
+              invisible: true,
+              draggable: true,
+              z: 100,
+              ondrag: echarts.util.curry(onPointDragging, dataIndex)
+            };
+            console.info(a);
+            return a;
+          })
+        });*/
+        setTimeout(() => {
+          myChart.setOption({
+            graphic: echarts.util.map(data1, function (dataItem, dataIndex) {
+              let a = {
+                type: 'circle',
+                shape: {
+                  r: symbolSize / 2
+                },
+                position: myChart.convertToPixel('grid', dataItem),
+                draggable: true,
+                invisible: true,
+                z: 100,
+                info: {name: 'kafka' + dataIndex, alerts: (dataIndex+1)*50},
+                ondrag: echarts.util.curry(onPointDragging, dataIndex),
+                style: {
+                  fill: '#777'
+                }
+              };
+              return a;
+            })
+          });
+        });
+        myChart.on('click', (e) => {
+          if (e.info) {
+            document.getElementById("k1").value = e.info.name;
+            document.getElementById("k2").value = e.info.alerts;
+            document.getElementById("k3").value = e.event.offsetX;
+          }
+        });
+        myChart.on('mousedown', (e) => {
+          if (e.info) {
+            document.getElementById("k1").value = e.info.name;
+            document.getElementById("k2").value = e.info.alerts;
+            document.getElementById("k3").value = e.event.offsetX;
+          }
+        });
+        myChart.on('mousemove', (e) => {
+          if (e.info) {
+            document.getElementById("k3").value = e.event.offsetX;
+          }
+        });
+        function onPointDragging(dataIndex) {
+          for (let k in myChart._componentsMap) {
+            if (k.indexOf("graphic") > -1) {
+              if (dataIndex != 0) {
+                data[dataIndex-1] = [data[dataIndex-1][0], myChart.convertFromPixel('grid', this.position)];
+              }
+              if (dataIndex != data.length) {
+                data[dataIndex] = [myChart.convertFromPixel('grid', this.position), data[dataIndex][1]];
+              }
+              data1[dataIndex] = myChart.convertFromPixel('grid', this.position);
+            }
+          }
+          // 用更新后的 data，重绘折线图。
+          myChart.setOption({
+            series: [{
+              id: 'a',
+              data: data
+            }, {
+              id: 'b',
+              data: data1
+            }]
+          });
+        }
+        window.addEventListener('resize', function () {
+          // 对每个拖拽圆点重新计算位置，并用 setOption 更新。
+          myChart.setOption({
+            graphic: echarts.util.map(data, function (item, dataIndex) {
+              return {
+                position: myChart.convertToPixel('grid', item)
+              };
+            })
+          });
+        });
+      }
+    },
+    mounted() {
+      this.load();
+    }
+  }
+</script>
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 49491c3b1..26cddd21d 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -48,6 +48,10 @@ export default new Router({
           path: 'overview',
           component: resolve => require(['../components/page/dashboard/overview/overview2.vue'],resolve)
         },
+        {
+          path: 'test',
+          component: resolve => require(['../components/page/dashboard/overview/test.vue'],resolve)
+        },
         {
           path: '/project',
           component: resolve => require(['../components/page/project/project.vue'], resolve),