5.5首页风量监测图表修改-提交

src/views/vent/home/colliery/components/wind-monitor.vue

@@ -8,271 +8,292 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
-  import * as echarts from 'echarts';
-  const emit = defineEmits(['goDetail']);
+import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
+import * as echarts from 'echarts';
+const emit = defineEmits(['goDetail']);
 
-  let props = defineProps({
-    flList: Array,
-  });
+let props = defineProps({
+  flList: Array,
+});
 
-  //获取dom节点
-  let windBar = ref<any>();
-  //坐标轴最大值
-  let maxY = ref(0);
-  //echart数据
-  let echartData = reactive<any>({ ydata: [], xdata: [] });
-  //跳转详情
-  function getDetail() {
-    emit('goDetail', 'windrect');
-  }
-  function getOption() {
-    nextTick(() => {
-      const color = '#66ffff';
-      let barWidth = echartData.ydata.length > 0 && echartData.ydata.length <= 1 ? 0.03 : 0.1; // 柱条占比
-      function renderItem(params, api) {
-        const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心
-        const width = api.size([0, 1])[0] * barWidth; // 宽度
-        let ballRadius = width * 0.55;
-        if (topCenter[0] == 0 && topCenter[1] == 0) {
-          ballRadius = 0;
-        }
-        return {
-          type: 'group',
-          children: [
-            {
-              // 圆形装饰
-              type: 'circle',
-              shape: {
-                cx: topCenter[0],
-                cy: topCenter[1],
-                r: ballRadius,
-              },
-              style: api.style({
-                fill: '#66ffff',
-                stroke: color,
-                lineWidth: 2,
-              }),
-            },
-          ],
-        };
-      }
-
-      const myChart = echarts.init(windBar.value);
-      let option = {
-        color: [color],
-        tooltip: {
-          trigger: 'item',
-          show: true,
-          formatter: function (p) {
-            // console.info(p);
-            return p.marker + p.name + ' : ' + p.value;
-          },
-        },
+//获取dom节点
+let windBar = ref<any>();
+//坐标轴最大值
+let maxY = ref(0);
+//echart数据
+let echartData = reactive<any>({ ydata: [], xdata: [] });
+//跳转详情
+function getDetail() {
+  emit('goDetail', 'windrect');
+}
+function getOption() {
+  nextTick(() => {
+    const myChart = echarts.init(windBar.value);
+    let option = {
+      color: [
+        '#63caff',
+        '#49beff',
+        'rgba(74, 205, 255,.1)',
+        '#03387a',
+        '#03387a',
+        '#6c93ee',
+        '#a9abff',
+        '#f7a23f',
+        '#27bae7',
+        '#ff6d9d',
+        '#cb79ff',
+        '#f95b5a',
+        '#ccaf27',
+        '#38b99c',
+        '#93d0ff',
+        '#bd74e0',
+        '#fd77da',
+        '#dea700',
+      ],
+      grid: {
+        containLabel: true,
+        left: 30,
+        right: 30,
+        bottom: 10,
+        top: 40,
+      },
 
-        grid: {
-          left: '8%',
-          top: '15%',
-          bottom: '32%',
-          right: '8%',
-          // containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          data: echartData.xdata,
-          axisLabel: {
-            formatter: function (params) {
-              var newParamsName = ''; // 最终拼接成的字符串
-              var paramsNameNumber = params.length; // 实际标签的个数
-              var provideNumber = 6; // 每行能显示的字的个数
-              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
-              /**
-               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-               */
-              // 条件等同于rowNumber>1
-              if (paramsNameNumber > provideNumber) {
-                /** 循环每一行,p表示行 */
-                for (var p = 0; p < rowNumber; p++) {
-                  var tempStr = ''; // 表示每一次截取的字符串
-                  var start = p * provideNumber; // 开始截取的位置
-                  var end = start + provideNumber; // 结束截取的位置
-                  // 此处特殊处理最后一行的索引值
-                  if (p == rowNumber - 1) {
-                    // 最后一次不换行
-                    tempStr = params.substring(start, paramsNameNumber);
-                  } else {
-                    // 每一次拼接字符串并换行
-                    tempStr = params.substring(start, end) + '\n';
-                  }
-                  newParamsName += tempStr; // 最终拼成的字符串
+      xAxis: {
+        type: 'category',
+        data: echartData.xdata,
+        axisLabel: {
+          formatter: function (params) {
+            var newParamsName = ''; // 最终拼接成的字符串
+            var paramsNameNumber = params.length; // 实际标签的个数
+            var provideNumber = 6; // 每行能显示的字的个数
+            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
+            /**
+             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+             */
+            // 条件等同于rowNumber>1
+            if (paramsNameNumber > provideNumber) {
+              /** 循环每一行,p表示行 */
+              for (var p = 0; p < rowNumber; p++) {
+                var tempStr = ''; // 表示每一次截取的字符串
+                var start = p * provideNumber; // 开始截取的位置
+                var end = start + provideNumber; // 结束截取的位置
+                // 此处特殊处理最后一行的索引值
+                if (p == rowNumber - 1) {
+                  // 最后一次不换行
+                  tempStr = params.substring(start, paramsNameNumber);
+                } else {
+                  // 每一次拼接字符串并换行
+                  tempStr = params.substring(start, end) + '\n';
                 }
-              } else {
-                // 将旧标签的值赋给新标签
-                newParamsName = params;
+                newParamsName += tempStr; // 最终拼成的字符串
               }
-              //将最终的字符串返回
-              return newParamsName;
-            },
-            fontSize: 14,
-            margin: 10,
-            interval: 0,
-            textStyle: {
-              color: '#b3b8cc',
-            },
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(62, 103, 164)',
-            },
-          },
-          splitLine: {
-            show: false,
+            } else {
+              // 将旧标签的值赋给新标签
+              newParamsName = params;
+            }
+            //将最终的字符串返回
+            return newParamsName;
           },
-          axisTick: {
-            show: false,
+          fontSize: 14,
+          margin: 15,
+          interval: 0,
+          textStyle: {
+            color: '#b3b8cc',
           },
         },
-        yAxis: {
-          type: 'value',
-          name: '(m³/min)',
-          max: maxY.value,
-          axisLabel: {
-            textStyle: {
-              fontSize: 14,
-              color: '#b3b8cc',
-            },
-          },
-          nameTextStyle: {
-            color: '#fff',
-            fontSize: 12,
-            lineHeight: 10,
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(62, 103, 164)',
           },
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(62, 103, 164,.4)',
-            },
-          },
-          axisLine: {
-            show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+
+      yAxis: {
+        type: 'value',
+        name: '(m³/min)',
+        // max: maxY.value,
+        axisLabel: {
+          textStyle: {
+            fontSize: 14,
+            color: '#b3b8cc',
           },
-          axisTick: {
-            show: false,
+        },
+        nameTextStyle: {
+          color: '#fff',
+          fontSize: 12,
+          lineHeight: 10,
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(62, 103, 164,.4)',
           },
         },
-        series: [
-          {
-            data: echartData.ydata,
-            type: 'bar',
-            barWidth: barWidth * 100 + '%',
-            itemStyle: {
-              color: {
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(85, 255, 237, 1)', // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(66, 142, 255, 0.1)', // 100% 处的颜色
-                  },
-                ],
-              },
-            },
-            label: {
-              normal: {
-                show: true,
-                position: echartData.ydata.length > 0 && echartData.ydata.length <= 1 ? ['-17', '-30'] : ['-16', '-30'],
-                formatter: [' {a|{c}}'].join(','),
-                rich: {
-                  a: {
-                    color: '#fff',
-                    align: 'center',
-                  },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          data:echartData.ydata,
+          type: 'bar',
+          barMaxWidth: 'auto',
+          barWidth: 25,
+          itemStyle: {
+            color: {
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              type: 'linear',
+              global: false,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#0b9eff',
                 },
-              },
+                {
+                  offset: 1,
+                  color: '#63caff',
+                },
+              ],
             },
           },
-          {
-            data: echartData.ydata,
-            type: 'custom',
-            renderItem: renderItem,
-            zlevel: 2,
+          label: {
+            show: true,
+            position: 'top',
+            distance: 10,
+            color: '#fff',
           },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
+        },
+        {
+          data: [1, 1, 1, 1, 1, 1, 1, 1],
+          type: 'pictorialBar',
+          barMaxWidth: '25',
+          symbol: 'diamond',
+          symbolOffset: [0, '50%'],
+          symbolSize: [25, 15],
+        },
+        {
+          data: echartData.ydata,
+          type: 'pictorialBar',
+          barMaxWidth: '25',
+          symbolPosition: 'end',
+          symbol: 'diamond',
+          symbolOffset: [0, '-50%'],
+          symbolSize: [25, 12],
+          zlevel: 2,
+        },
+        {
+          data: [741, 741, 741, 741, 741, 741, 741, 741],
+          type: 'bar',
+          barMaxWidth: 'auto',
+          barWidth: 25,
+          barGap: '-100%',
+          zlevel: -1,
+        },
+        {
+          data: [1, 1, 1, 1, 1, 1, 1, 1],
+          type: 'pictorialBar',
+          barMaxWidth: '25',
+          symbol: 'diamond',
+          symbolOffset: [0, '50%'],
+          symbolSize: [25, 15],
+          zlevel: -2,
+        },
+        {
+          data: [741, 741, 741, 741, 741, 741, 741, 741],
+          type: 'pictorialBar',
+          barMaxWidth: '25',
+          symbolPosition: 'end',
+          symbol: 'diamond',
+          symbolOffset: [0, '-50%'],
+          symbolSize: [25, 12],
+          zlevel: -1,
+        },
+      ],
+      tooltip: {
+        trigger: 'axis',
+        show: false,
+      },
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
 
-  function formatRoundNum(num) {
-    let interger = Math.ceil(num);
-    let leng = String(interger).length;
-    return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1);
-  }
+function formatRoundNum(num) {
+  let interger = Math.ceil(num);
+  let leng = String(interger).length;
+  return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1);
+}
 
-  watch(
-    () => props.flList,
-    (val) => {
-      echartData.xdata.length = 0;
-      echartData.ydata.length = 0;
-      val.forEach((el: any) => {
-        if (el.readData.m3) {
-          echartData.xdata.push(el.strinstallpos);
-          echartData.ydata.push(el.readData.m3);
-        }
-      });
-      let max = echartData.ydata.reduce((acr, cur) => {
-        return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur);
-      });
-      maxY.value = formatRoundNum(max * 1.5);
-      getOption();
-    },
-    {
-      deep: true,
-    }
-  );
+watch(
+  () => props.flList,
+  (val) => {
+    echartData.xdata.length = 0;
+    echartData.ydata.length = 0;
+    val.forEach((el: any) => {
+      if (el.readData.m3) {
+        echartData.xdata.push(el.strinstallpos);
+        echartData.ydata.push(el.readData.m3);
+      }
+    });
+    let max = echartData.ydata.reduce((acr, cur) => {
+      return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur);
+    });
+    maxY.value = formatRoundNum(max * 1.5);
+    getOption();
+  },
+  {
+    deep: true,
+  }
+);
 
-  onMounted(() => {});
+onMounted(() => { });
 </script>
 
 <style lang="less" scoped>
-  .windMonitor {
-    width: 100%;
-    height: 100%;
-    position: relative;
+.windMonitor {
+  width: 100%;
+  height: 100%;
+  position: relative;
 
-    .title-top {
-      position: absolute;
-      top: 9px;
-      left: 46px;
-      color: #fff;
-      font-size: 16px;
-      font-family: 'douyuFont';
-      cursor: pointer;
+  .title-top {
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    color: #fff;
+    font-size: 16px;
+    font-family: 'douyuFont';
+    cursor: pointer;
 
-      &:hover {
-        color: #66ffff;
-      }
+    &:hover {
+      color: #66ffff;
     }
+  }
 
-    .wind-contents {
-      position: absolute;
-      left: 0;
-      top: 36px;
-      width: 100%;
-      height: calc(100% - 36px);
+  .wind-contents {
+    position: absolute;
+    left: 0;
+    top: 36px;
+    width: 100%;
+    height: calc(100% - 36px);
 
-      .wind-bar {
-        width: 100%;
-        height: 100%;
-      }
+    .wind-bar {
+      width: 100%;
+      height: 100%;
     }
   }
+}
 </style>