dcim-topology2d 1.1.3 → 1.1.4

package/static/echartsDefaultData.js

@@ -1,95 +1,239 @@
-/**
- * echarts图表默认数据组
- * @type {{displayMode_1: string}}
- */
-export const echartsDefaultDataMap = {
-    displayMode_1: {
-        legend: null,
-        XData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        seriesData: [{
-            type: 'line',
-            data: [820, 932, 901, 934, 1290, 1330, 1320]
-        }]
-    }, // 折线图
-    displayMode_2: {
-        legend: null,
-        XData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        seriesData: [{
-            name: '',
-            data: [20, 60, 110, 220, 80, 100, 180]
-        }]
-    },// 柱状图
-    displayMode_3: {
-        legend: null,
-        seriesData: [{
-            value: 10,
-            name: '机房1'
-        }, {
-            value: 30,
-            name: '机房2'
-        }, {
-            value: 50,
-            name: '机房3'
-        }, {
-            value: 20,
-            name: '机房4'
-        }, {
-            value: 60,
-            name: '机房5'
-        }, {
-            value: 15,
-            name: '机房6'
-        }, {
-            value: 18,
-            name: '机房7'
-        }, {
-            value: 26,
-            name: '机房8'
-        }]
-    },// 环形图
-    displayMode_4: {
-        legend: null,
-        total: 100,
-        XData: ['CA机房', '五层IT', '四层IT', '冷水机组'],
-        seriesData: [{
-            data: [5, 20, 50, 80]
-        }]
-    },// TOP排行榜
-    displayMode_5: {
-        legend: null,
-        seriesData: [{
-            name: '一般',
-            value: 0
-        }, {
-            name: '较大',
-            value: 0
-        }, {
-            name: '重大',
-            value: 0
-        }, {
-            name: '严重',
-            value: 0
-        }, {
-            name: '高级',
-            value: 0
-        }]
-    },// 饼图
-    displayMode_6: {
-        value: 8
-    },// 仪表盘
-}
-// 柱状图和折线图默认标注
-export const echartsLineBarDefaultLegendData = {
-    data: ['标注1'],
-    icon: 'rich',
-    show: true,
-    itemWidth: 14,
-    itemHeight: 14,
-    textStyle: {
-        color: '#C6D1DB',
-        fontSize: '14px',
-    },
-    top: '12%',
-    left: '10%',
-    itemGap: 8
-};
+/**
+ * echarts图表默认数据组
+ * @type {{displayMode_1: string}}
+ */
+export const echartsDefaultDataMap = {
+    displayMode_1: {
+        legend: null,
+        XData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        seriesData: [{
+            type: 'line',
+            data: [820, 932, 901, 934, 1290, 1330, 1320]
+        }]
+    }, // 折线图
+    displayMode_2: {
+        legend: null,
+        XData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        seriesData: [{
+            name: '',
+            data: [20, 60, 110, 220, 80, 100, 180]
+        }]
+    },// 柱状图
+    displayMode_3: {
+        legend: null,
+        seriesData: [{
+            value: 10,
+            name: '机房1'
+        }, {
+            value: 30,
+            name: '机房2'
+        }, {
+            value: 50,
+            name: '机房3'
+        }, {
+            value: 20,
+            name: '机房4'
+        }, {
+            value: 60,
+            name: '机房5'
+        }, {
+            value: 15,
+            name: '机房6'
+        }, {
+            value: 18,
+            name: '机房7'
+        }, {
+            value: 26,
+            name: '机房8'
+        }]
+    },// 环形图
+    displayMode_4: {
+        legend: null,
+        total: 100,
+        XData: ['CA机房', '五层IT', '四层IT', '冷水机组'],
+        seriesData: [{
+            data: [5, 20, 50, 80]
+        }]
+    },// TOP排行榜
+    displayMode_5: {
+        legend: null,
+        seriesData: [{
+            name: '一般',
+            value: 0
+        }, {
+            name: '较大',
+            value: 0
+        }, {
+            name: '重大',
+            value: 0
+        }, {
+            name: '严重',
+            value: 0
+        }, {
+            name: '高级',
+            value: 0
+        }]
+    },// 饼图
+    displayMode_6: {
+        value: 8
+    },// 仪表盘
+    displayMode_1_tem_line_1: {
+      legend: ['温度', '湿度'],
+      XData: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
+      seriesData: [{
+        name: '温度',
+        data: [20,24,20,24,20,24,20,24,20]
+      },{
+        name: '湿度',
+        data: [40,45,40,45,40,45,40,45,40]
+      }]
+    }, // 双轴双曲线
+    displayMode_1_tem_line_2: {
+        legend: null,
+        XData: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
+        seriesData: [{
+            name: '温度',
+            data: [20,24,20,24,20,24,20,24,20]
+        }]
+    }, // 单轴双曲线区域
+    displayMode_2_tem_3dbar_1: {
+      legend: null,
+      XData: ['制冷', '配电制冷', '网络机房制冷', '主机房制冷', '网络机房IT', '主机房IT', 'IT'],
+      seriesData: [{
+        name: '',
+        data: [82, 115, 42, 82, 70, 40, 92]
+      }]
+    }, // 3D柱状图模板-3d柱状图1
+};
+// 图例默认数据
+export const echartsLegendDefaultData = {
+  icon: 'rect', // 图标类型：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+  itemWidth: 12, // 图标宽
+  itemHeight: 12, // 图标高
+  itemGap: 8, // 图例之间的间隔 number
+  top: '0%', // 图例距离容器上边位置
+  right: 'auto', // 图例距离容器右边位置
+  bottom: 'auto', // 图例距离容器下边位置
+  left: '60', // 图例距离容器左边位置
+  padding: [20, 0, 0, 0], // 图例内边距 string
+  color: '#fff', // 文字颜色
+  height: 8, // 文本显示高度 number
+  fontSize: 12 // 文字大小 number
+};
+// 柱状图和折线图默认标注
+export const echartsLineBarDefaultLegendData = {
+    data: ['标注1'],
+    icon: 'rich',
+    show: true,
+    itemWidth: 14,
+    itemHeight: 14,
+    textStyle: {
+        color: '#C6D1DB',
+        fontSize: '14px',
+    },
+    top: '12%',
+    left: '10%',
+    itemGap: 8
+};
+// 曲线默认配置数据
+export const echartsLineSeriesStyleData = {
+  smooth: false,
+  symbol: 'none',
+  symbolSize: 18,
+  itemLineStyle:{
+    color: '#2F86ED', //改变折线颜色
+    type: 'solid',
+    width: 1
+  },
+  area: false, // 是否是区域图
+  linear: false, // 是否是线性渐变
+  areaColor: {
+    type: 'linear',
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    global: false // 缺省为 false
+  },
+  areaColorStops:[{
+    offset: 0,
+    color: 'rgba(49, 144, 255, 0.21)' // 0% 处的颜色
+  }, {
+    offset: 1,
+    color: 'rgba(49, 144, 255, 0)' // 100% 处的颜色
+  }]
+}
+// 图表X轴默认配置数据
+export const echartsXAxisDefaultStyleData = {
+  x1AxisLabel: {
+    color: '#fff',
+    fontSize:"12"
+  }
+}
+// 图表Y轴默认配置数据
+export const echartsYAxisDefaultStyleData = {
+  ySplitLineShow: true, // y轴轴线是否显示
+  //坐标轴线样式
+  ysplitLineLineStyle: {
+    type: 'solid', //solid实线;dashed虚线
+    color: 'rgba(148, 147, 197, 0.5)'
+  },
+  y1axisLabelTextStyle: {
+    //坐标轴颜色
+    color: '#fff',
+    fontSize:"12",
+    padding: 5
+  },
+  // y轴刻度最大最小值和分隔值
+  y1MinMaxData: {
+    min: 0,
+    max: 60,
+    interval: 20
+  },
+  // y轴名称
+  y1NameData: {
+    name: '℃',
+    nameTextStyle: {
+      color: '#FDFDFD',
+      padding: [0, 0, 0, -52],
+    },
+    nameGap: 25
+  },
+  // y轴刻度标签文字样式
+  y2axisLabelTextStyle: {
+    //坐标轴颜色
+    color: '#fff',
+    fontSize:"12",
+    padding: 5
+  },
+  y2MinMaxData: {
+    name: '%',
+    nameTextStyle: {
+      color: '#FDFDFD',
+      padding: [0, -42, 0, 0],
+    },
+    nameGap: 25
+  },
+  y2NameData: {
+    min: 0,
+    max: 90,
+    interval: 30
+  }
+}
+// 图表的数据缩放
+export const echartsDataRoom = [{ //给x轴设置滚动条
+  start: 0, //默认为0
+  end: 50, //默认为100
+  type: 'slider',
+  show: false,
+  xAxisIndex: [0],
+  handleSize: 10, //滑动条的 左右2个滑动条的大小
+  height: 0, //组件高度
+}, { //下面这个属性是里面拖到
+  type: 'inside',
+  show: true,
+  xAxisIndex: [0],
+  start: 0, //默认为1
+  end: 50 // 100 - 1500 / 31, //默认为100
+}];
+

package/static/echartsStore.js

@@ -0,0 +1,14 @@
+export let echartsDataStore = {};
+export let echartsOptionsStore = {};
+export const destroyEcharts = function(){
+  for (let node of Object.values(echartsDataStore)) {
+    if(node) {
+      clearInterval(node.timeTicket);
+      node.chart.off('mouseover');
+      node.chart.off('mouseout');
+      node.chart.dispose();
+    }
+  }
+  echartsDataStore = {};
+  echartsOptionsStore = {};
+};

package/static/index.js

@@ -1 +1,2 @@
-export * from './echartsDefaultData';
+export * from './echartsDefaultData';
+export * from './echartsStore';

package/style/index.css

@@ -7,4 +7,7 @@
 }
 .canvas-point.pointer > div{
     z-index: -2;
+}
+.topology2dConfIfram{
+
 }