From 05fe6d6abfd6d119e5a40f663619c08f1bc1e150 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Sat, 18 Mar 2023 11:44:28 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=BA=BF=E7=8A=B6=E5=9B=BE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/visual/cpts/line-chart.vue | 308 +++++++------------
 1 file changed, 107 insertions(+), 201 deletions(-)

diff --git a/src/views/modules/visual/cpts/line-chart.vue b/src/views/modules/visual/cpts/line-chart.vue
index 7ffa77f5d..a94449882 100644
--- a/src/views/modules/visual/cpts/line-chart.vue
+++ b/src/views/modules/visual/cpts/line-chart.vue
@@ -1,13 +1,12 @@
 <template>
   <div class="m-chart">
-    <canvas :id="id" :width="width" :height="height" />
+    <div :id="id" style="width: 400px; height: 200px"></div>
   </div>
 </template>
 
 <script>
 import nextTick from "dai-js/tools/nextTick";
-import F2 from "@antv/f2/lib/index-all";
-
+import * as echarts from "echarts";
 // ios下字体渲染有bug
 const fontFamily = "PingFang SC";
 const fontSize = 14;
@@ -16,195 +15,6 @@ let id = "myChart" + new Date().getDate();
 let chart;
 let srcData = [];
 
-let textShapeList = [];
-const addTextShape = () => {
-  if (textShapeList.length > 0) {
-    textShapeList.forEach((item) => {
-      item.remove(true);
-    });
-    textShapeList = [];
-  }
-  // 添加折线上文本
-  const canvas = chart.get("canvas");
-  const group = canvas.addGroup();
-  const shapes = {};
-
-  function addFn(list) {
-    const listLength = list.length;
-    list.forEach(function (obj, index) {
-      // 避免显示太多，乱七八糟
-      if (listLength > 7 && index > 0 && index < listLength - 1) {
-        if (index % Math.ceil(listLength / 5) != 0) {
-          return;
-        }
-      }
-
-      const offsetX = 6;
-      const offsetY = 1;
-      const point = chart.getPosition(obj);
-      const text = group.addShape("text", {
-        attrs: {
-          x: obj.type === "支持" ? point.x + 2 * offsetX : point.x - offsetX,
-          y: point.y + offsetY,
-          text: obj.value,
-          textAlign: "center",
-          textBaseline: "bottom",
-          fill: "#333",
-          fontWeight: 500,
-          fontFamily,
-          fontSize,
-        },
-      });
-
-      textShapeList.push(text); // 缓存该 shape, 便于后续查找
-    });
-  }
-  srcData.sort((a, b) => {
-    return new Date(a.date).getTime() - new Date(b.date).getTime();
-  });
-  let supData = srcData.filter((item) => item.type == "支持");
-  let oppData = srcData.filter((item) => item.type == "反对");
-  addFn(supData);
-  addFn(oppData);
-};
-
-const iniChart = function (config, srcData) {
-  chart = new F2.Chart({
-    id,
-    ...config,
-  });
-
-  const supColor = "#FFDA0E";
-  const oppColor = "#00E5ED";
-
-  chart.source(srcData, {
-    date: {
-      range: [0, 1],
-      type: "timeCat",
-      mask: "MM-DD",
-    },
-    value: {
-      // type: "linear",
-    },
-  });
- 
-  // 设置坐标轴
-  chart.axis("date", {
-    line: {
-      lineWidth: 1,
-      stroke: "#E7EEEE",
-    },
-    label: {
-      fontWeight: 500,
-      fontSize,
-      fill: "#B5B7BF",
-      textBaseline: "middle",
-    },
-    labelOffset: 25,
-    country: {
-      range: [0.1, 0.9], // 配置 range 范围，使左右两边不留边距
-    },
-    grid: null,
-  });
-  chart.axis("value", {
-    line: {
-      lineWidth: 1,
-      stroke: "#E7EEEE",
-    },
-    labelOffset: 20,
-    label: {
-      fontWeight: 500,
-      fontSize,
-      fill: "#B5B7BF",
-    },
-  });
-  chart.tooltip({
-    custom: true, // 是否自定义 tooltip 提示框
-    showXTip: true, // 是否展示 X 轴的辅助信息
-    showYTip: true, // 是否展示 Y 轴的辅助信息
-    snap: true, // 是否将辅助线准确定位至数据点
-    crosshairsType: "xy", // 辅助线的种类
-    crosshairsStyle: {
-      // 配置辅助线的样式
-      lineDash: [2], // 点线的密度
-      stroke: "rgba(255, 0, 0, 0.25)",
-      lineWidth: 20,
-    },
-  });
-  // 类别标识区
-  chart.legend({
-    position: "bottom",
-    align: "center",
-    offsetY: -30,
-    custom: true,
-    nameStyle: {
-      fill: "#999",
-      fontWeight: 500,
-      fontSize,
-    },
-    itemWidth: 150,
-    wordSpace: 25,
-    items: [
-      {
-        name: "支持",
-        marker(x, y, r, ctx) {
-          ctx.lineWidth = 10;
-          ctx.strokeStyle = supColor;
-          ctx.moveTo(x - r - 15, y);
-          ctx.lineTo(x + r + 15, y);
-          ctx.stroke();
-          ctx.fill();
-        },
-      },
-      {
-        name: "反对",
-        marker(x, y, r, ctx) {
-          ctx.lineWidth = 10;
-          ctx.strokeStyle = oppColor;
-          ctx.moveTo(x - r - 15, y);
-          ctx.lineTo(x + r + 15, y);
-          ctx.stroke();
-          ctx.fill();
-        },
-      },
-    ],
-  });
-  // 添加折线
-  //   chart.tooltip({
-  //   showCrosshairs: true, // 展示 Tooltip 辅助线
-  //   shared: true,
-  // });
-  // // new Add -- 监听 tooltip:change 事件
-  // chart.on('tooltip:change', ev => {
-  //   // 自己可以在控制台打印一下ev，看下里面的结构，找到自己所需要的信息
-  //   hoverData = ev.data.items[0].data;
-  // })
-  // // new Add -- 监听绘图区plot的点击事件
-  // chart.on('plot:click', ev => {
-  //   // 当用户在画布上点击时，这个时候用户看到tooltip上的数据其实已经被存在了hoverData里。拿到hoverData，相当于你拿到了折线上相关点的数据，之后再有什么需求都可以实现啦！
-  //   console.log(JSON.stringify(hoverData));
-  // })
-
-  chart
-    .line()
-    .position("date*value")
-    .color("type", (type) => {
-      if (type === "支持") {
-        return supColor;
-      }
-      return oppColor;
-    })
-    .style("type", {
-      lineWidth: 1,
-    })
-    .animate();
-  chart.render();
-  addTextShape();
-
-  // 注意：需要把chart return 出来
-  return chart;
-};
-
 export default {
   name: "chart",
   props: {
@@ -237,25 +47,121 @@ export default {
   },
   watch: {
     list(data) {
-      chart.changeData(data);
+      this.initCharts();
       srcData = data;
       addTextShape();
     },
   },
   async created() {
     await nextTick(200);
-    console.log(this.config, "config");
-    console.log(this.list, "list");
-    iniChart(this.config, this.list);
+
+    //在这里调用初始化图表的方法
     await nextTick(200);
     this.iniLoading = true;
   },
-
+  mounted() {
+    console.log(this.config, "config");
+    console.log(this.list, "list");
+    let date = this.list
+      .filter((item) => item.type == "支持")
+      .map((item) => item.date);
+    let data = this.list
+      .filter((item) => item.type == "支持")
+      .map((item) => item.value);
+    let data1 = this.list
+      .filter((item) => item.type == "反对")
+      .map((item) => item.value);
+    console.log(data);
+    nextTick(1000);
+    this.initCharts(date, data, data1);
+  },
   methods: {
-    setList(data) {
-      chart.changeData(data);
-      srcData = data;
-      addTextShape();
+    // date x轴时间  data支持人数  data1 反对人数
+    initCharts(date, data, data1) {
+      console.log(this.id);
+      let div = document.getElementById(this.id);
+      let myChart = echarts.init(div);
+      var option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["支持", "反对"],
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        dataZoom: [
+                        {
+                            type: 'slider',
+                            realtime: true,
+                            start: 0,
+                            // end: 20,  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
+                            height: 5, //组件高度
+                            left: '25%', //左边的距离
+                            right: '25%', //右边的距离
+                            bottom: '12%', //下边的距离
+                            show: true,  // 是否展示
+                            fillerColor: "rgba(2,110,252,1)", // 滚动条颜色
+                            borderColor: "rgba(17, 100, 210, 0.12)",
+                            backgroundColor: 'rgba(232,244,255,0.51)',//两边未选中的滑动条区域的颜色
+                            handleSize: 0,      //两边手柄尺寸
+                            showDetail: false, //拖拽时是否展示滚动条两侧的文字
+                            zoomLock: true,         //是否只平移不缩放
+                            moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
+                            //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
+
+                            //下面是自己发现的一个问题，当点击滚动条横向拖拽拉长滚动条时，会出现文字重叠，导致效果很不好，以此用下面四个属性进行设置，当拖拽时，始终保持显示六个柱状图，可结合自己情况进行设置。添加这个属性前后的对比见**图二**
+                            startValue: 0, // 从头开始。
+                            endValue: 3,  // 最多5个
+                            // minValueSpan: 5,  // 放大到最少几个
+                            // maxValueSpan: 5,  //  缩小到最多几个
+                        },
+                        {
+                            type: "inside",  // 支持内部鼠标滚动平移
+                            start: 0,
+                            // end: 20,
+                            startValue: 0, // 从头开始。
+                            endValue: 5,  // 最多5个
+                            zoomOnMouseWheel: false,  // 关闭滚轮缩放
+                            moveOnMouseWheel: true, // 开启滚轮平移
+                            moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
+                        }
+                    ],
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: date,
+        },
+        yAxis: {
+          type: "value",
+          minInterval: "1",
+        },
+        series: [
+          {
+            name: "支持",
+            type: "line",
+
+            data: data,
+          },
+          {
+            name: "反对",
+            type: "line",
+
+            data: data1,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
     },
   },
 };

From 25a16f75e6620838b12c5d4831a07eaf185423a6 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Sat, 18 Mar 2023 20:21:27 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=97=A5=E6=9C=9F=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/shequzhili/xiangmu/index.vue      | 68 +++++++++----------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/views/modules/shequzhili/xiangmu/index.vue b/src/views/modules/shequzhili/xiangmu/index.vue
index 21eff606b..49ffb192e 100644
--- a/src/views/modules/shequzhili/xiangmu/index.vue
+++ b/src/views/modules/shequzhili/xiangmu/index.vue
@@ -19,30 +19,31 @@
             >
             </el-input>
           </el-form-item>
-
-          <el-form-item label="转项目时间" prop="date">
-            <el-date-picker
-              v-model="fmData.startDate"
-              size="small"
-              :picker-options="startPickerOptions"
-              class="u-item-width-daterange"
-              type="date"
-              value-format="yyyy-MM-dd"
-              placeholder="开始时间"
-            >
-            </el-date-picker>
-            <span class="u-data-tag">至</span>
-            <el-date-picker
-              v-model="fmData.endDate"
-              :picker-options="endPickerOptions"
-              size="small"
-              type="date"
-              class="u-item-width-daterange u-data-tag"
-              value-format="yyyy-MM-dd"
-              placeholder="结束时间"
-            >
-            </el-date-picker>
-          </el-form-item>
+          <el-form-item label="转项目时间" prop="startDate">
+              <el-date-picker
+                v-model="fmData.startDate"
+                :picker-options="startPickerOptions"
+                class="u-item-width-daterange"
+                size="small"
+                type="date"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                value="yyyy-MM-dd"
+                placeholder="开始时间"
+              >
+              </el-date-picker>
+              <span class="u-data-tag">至</span>
+              <el-date-picker
+                v-model="fmData.endDate"
+                :picker-options="endPickerOptions"
+                class="u-item-width-daterange u-data-tag"
+                size="small"
+                type="date"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                value="yyyy-MM-dd"
+                placeholder="结束时间"
+              >
+              </el-date-picker>
+            </el-form-item>
 
           <el-form-item label="状态" prop="status">
             <el-select
@@ -288,11 +289,11 @@ export default {
       //这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
       let nowData = Date.now();
       if (this.fmData.startDate) {
-        let startDate = new Date(this.fmData.startDate);
+        let startTime = new Date(this.fmData.startDate);
         return (
           time.getTime() > nowData ||
-          time.getTime() < startDate ||
-          time.getTime() === startDate
+          time.getTime() < startTime ||
+          time.getTime() === startTime
         );
       } else {
         return time.getTime() > nowData;
@@ -328,7 +329,6 @@ export default {
         status: "",
         startDate: "",
         endDate: "",
-        date: ["", ""],
       },
 
       importBtnTitle: "导入",
@@ -357,13 +357,11 @@ export default {
     ...mapGetters(["clientHeight", "iframeHeight"]),
   },
   watch: {
-    "fmData.date": function (val) {
-      if (Array.isArray(val) && val.length == 2) {
-        this.fmData.startDate = val[0].split("-").join("");
-        this.fmData.endDate = val[1].split("-").join("");
-      } else {
-        this.fmData.startDate = "";
-        this.fmData.endDate = "";
+    "fmData.endDate": function (val) {
+      if (val && val != "") {
+        console.log(val);
+        let arrayTemp = val.split(" ");
+        this.fmData.endDate = arrayTemp[0] + " 23:59:59";
       }
     },
   },