提交

package.json

@@ -9,13 +9,11 @@
     "preinstall": "npx pm-keeper yarn@1.22.10"
   },
   "dependencies": {
-    "@antv/f2": "^4.0.29",
     "@vant/touch-emulator": "^1.3.2",
     "core-js": "^3.6.5",
     "dayjs": "^1.11.2",
     "echarts": "^5.3.2",
     "element-ui": "^2.15.6",
-    "lodash": "^4.17.21",
     "sha256": "^0.2.0",
     "vant": "^2.12.37",
     "vue": "^2.6.11",

pnpm-lock.yaml

@@ -1,7 +1,6 @@
 lockfileVersion: 5.3
 
 specifiers:
-  '@antv/f2': ^4.0.29
   '@babel/plugin-transform-react-jsx': ^7.19.0
   '@vant/touch-emulator': ^1.3.2
   '@vue/cli-plugin-babel': ~4.5.0
@@ -15,7 +14,6 @@ specifiers:
   element-ui: ^2.15.6
   eslint: ^6.7.2
   eslint-plugin-vue: ^6.2.2
-  lodash: ^4.17.21
   sha256: ^0.2.0
   vant: ^2.12.37
   vue: ^2.6.11
@@ -24,13 +22,11 @@ specifiers:
   watermark-package: ^2.1.0
 
 dependencies:
-  '@antv/f2': 4.0.29
   '@vant/touch-emulator': 1.3.2
   core-js: 3.23.2
   dayjs: 1.11.3
   echarts: 5.3.3
   element-ui: 2.15.9_vue@2.6.14
-  lodash: 4.17.21
   sha256: 0.2.0
   vant: 2.12.47_vue@2.6.14
   vue: 2.6.14
@@ -67,51 +63,6 @@ packages:
       '@jridgewell/trace-mapping': 0.3.13
     dev: true
 
-  /@antv/adjust/0.2.5:
-    resolution: {integrity: sha512-MfWZOkD9CqXRES6MBGRNe27Q577a72EIwyMnE29wIlPliFvJfWwsrONddpGU7lilMpVKecS3WAzOoip3RfPTRQ==}
-    dependencies:
-      '@antv/util': 2.0.17
-      tslib: 1.14.1
-    dev: false
-
-  /@antv/event-emitter/0.1.3:
-    resolution: {integrity: sha512-4ddpsiHN9Pd4UIlWuKVK1C4IiZIdbwQvy9i7DUSI3xNJ89FPUFt8lxDYj8GzzfdllV0NkJTRxnG+FvLk0llidg==}
-    dev: false
-
-  /@antv/f2-graphic/0.0.8:
-    resolution: {integrity: sha512-grJftwBg9mhFOwhhwaZ8SgUkad5ejj0DtMwu8jFBjMxiLsY1mji88Vc/Zc1Je6qw3UdlMRZ62tubaEQHCD8nLQ==}
-    dependencies:
-      '@antv/util': 2.0.17
-      '@babel/runtime': 7.18.3
-    dev: false
-
-  /@antv/f2/4.0.29:
-    resolution: {integrity: sha512-siYZnajKJcbMY+Yv8q/pvYwFBEkXGSFJZN/PJJlTRvA1cI1fXT+yh8J57x2KY3Ysywq8Z4Mt1YiR3NSNVVryfA==}
-    dependencies:
-      '@antv/adjust': 0.2.5
-      '@antv/event-emitter': 0.1.3
-      '@antv/f2-graphic': 0.0.8
-      '@antv/scale': 0.3.18
-      '@antv/util': 2.0.17
-      '@babel/runtime': 7.18.3
-      d3-cloud: 1.2.5
-    dev: false
-
-  /@antv/scale/0.3.18:
-    resolution: {integrity: sha512-GHwE6Lo7S/Q5fgaLPaCsW+CH+3zl4aXpnN1skOiEY0Ue9/u+s2EySv6aDXYkAqs//i0uilMDD/0/4n8caX9U9w==}
-    dependencies:
-      '@antv/util': 2.0.17
-      fecha: 4.2.3
-      tslib: 2.3.0
-    dev: false
-
-  /@antv/util/2.0.17:
-    resolution: {integrity: sha512-o6I9hi5CIUvLGDhth0RxNSFDRwXeywmt6ExR4+RmVAzIi48ps6HUy+svxOCayvrPBN37uE6TAc2KDofRo0nK9Q==}
-    dependencies:
-      csstype: 3.1.0
-      tslib: 2.3.0
-    dev: false
-
   /@babel/code-frame/7.16.7:
     resolution: {integrity: sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==}
     engines: {node: '>=6.9.0'}
@@ -3521,24 +3472,10 @@ packages:
       css-tree: 1.1.3
     dev: true
 
-  /csstype/3.1.0:
-    resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
-    dev: false
-
   /cyclist/1.0.1:
     resolution: {integrity: sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A==}
     dev: true
 
-  /d3-cloud/1.2.5:
-    resolution: {integrity: sha512-4s2hXZgvs0CoUIw31oBAGrHt9Kt/7P9Ik5HIVzISFiWkD0Ga2VLAuO/emO/z1tYIpE7KG2smB4PhMPfFMJpahw==}
-    dependencies:
-      d3-dispatch: 1.0.6
-    dev: false
-
-  /d3-dispatch/1.0.6:
-    resolution: {integrity: sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==}
-    dev: false
-
   /dashdash/1.14.1:
     resolution: {integrity: sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==}
     engines: {node: '>=0.10'}
@@ -4364,10 +4301,6 @@ packages:
       websocket-driver: 0.7.4
     dev: true
 
-  /fecha/4.2.3:
-    resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
-    dev: false
-
   /figgy-pudding/3.5.2:
     resolution: {integrity: sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==}
     dev: true
@@ -5802,6 +5735,7 @@ packages:
 
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: true
 
   /log-symbols/2.2.0:
     resolution: {integrity: sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==}
@@ -8316,6 +8250,7 @@ packages:
 
   /tslib/1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+    dev: true
 
   /tslib/2.3.0:
     resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}

src/api/index.js

@@ -277,4 +277,12 @@ export function jsonZhou(data) {
   });
 }
 
+export function jsonAdvertisement(data) {
+  return ajax({
+    urlType: "cxzx",
+    url: `/zhoubao/data/ad-${data.date}.json`,
+    method: "GET",
+  });
+}
+
 export default {};

src/utils/echarts.js

@@ -1,5 +1,5 @@
 import * as echarts from "echarts/core";
-import { RadarChart, LineChart  } from "echarts/charts";
+import { RadarChart, LineChart,BarChart   } from "echarts/charts";
 import { TitleComponent } from "echarts/components";
 import {
   TooltipComponent,
@@ -7,6 +7,8 @@ import {
   LegendComponent,
   DatasetComponent,
   TransformComponent,
+  ToolboxComponent,
+  BrushComponent
 } from "echarts/components";
 import { LabelLayout, UniversalTransition } from "echarts/features";
 import { SVGRenderer } from "echarts/renderers";
@@ -22,7 +24,10 @@ echarts.use([
   UniversalTransition,
   RadarChart,
   SVGRenderer,
-  LineChart 
+  LineChart,
+  ToolboxComponent,
+  BrushComponent,
+  BarChart 
 ]);
 
 export default echarts;

src/views/report/Advertisement/Charts.js

@@ -0,0 +1,161 @@
+import echarts from "../../../utils/echarts";
+
+let ringEcharts = undefined;
+let barEcharts = undefined;
+
+export function advertisementSpendInit(ele, list) {
+  // 柱图
+  barEcharts && barEcharts.clear && barEcharts.clear();
+  if (!barEcharts) barEcharts = echarts.init(ele);
+  barEcharts.setOption({
+    title: {
+      text: list.name || "",
+      left: "center",
+      top: "3px",
+      textStyle: {
+        fontSize: 17,
+      },
+    },
+    tooltip: {
+      valueFormatter: e => {
+        return "环比：" + (e.toFixed(2) - 0) + "%";
+      },
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+      },
+    },
+    grid: {
+      top: "60px",
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: {
+      data: list.L.map(v => v.date),
+      axisLine: { onZero: true },
+      splitLine: { show: false },
+      splitArea: { show: false },
+    },
+    legend: {
+      data: [list.L[0].type],
+      top: "30px",
+    },
+    yAxis: {
+      axisLabel: {
+        formatter: e => {
+          let N = e || 0;
+          return N + '%'
+        },
+      },
+    },
+    series: [
+      {
+        name: list.L[0].type,
+        type: "bar",
+        stack: list.L[0].type,
+        itemStyle: {
+          color: "#91cc75",
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: "rgba(0,0,0,0.3)",
+          },
+        },
+        data: list.L.map(v => v.value),
+      },
+    ],
+  });
+  barEcharts.on("brushSelected", function (params) {
+    var brushed = [];
+    var brushComponent = params.batch[0];
+    for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
+      var rawIndices = brushComponent.selected[sIdx].dataIndex;
+      brushed.push("[Series " + sIdx + "] " + rawIndices.join(", "));
+    }
+    barEcharts.setOption({
+      title: {
+        backgroundColor: "#333",
+        text: "SELECTED DATA INDICES: \n" + brushed.join("\n"),
+        bottom: 0,
+        right: "10%",
+        width: 100,
+        textStyle: {
+          fontSize: 12,
+          color: "#fff",
+        },
+      },
+    });
+  });
+}
+
+export function advertisementRingRatioInit(ele, list) {
+  // 折线图
+  ringEcharts && ringEcharts.clear && ringEcharts.clear();
+  if (!ringEcharts) ringEcharts = echarts.init(ele);
+  let keys = list.F.length > list.L.length ? list.F : list.L;
+  ringEcharts.setOption({
+    title: {
+      text: list.name || "",
+      left: "center",
+      top: "3px",
+      textStyle: {
+        fontSize: 17,
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    legend: {
+      data: [list.F[0].type, list.L[0].type],
+      top: "30px",
+    },
+    grid: {
+      top: "60px",
+      left: "3%",
+      right: "6%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+      },
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: keys.map(v => v.date),
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        formatter: e => {
+          let N = e || 0;
+          if (N >= 100000000) N = (N / 100000000).toFixed(2) - 0 + "亿";
+          else if (N >= 10000) N = (N / 10000).toFixed(2) - 0 + "万";
+          return N
+        },
+      },
+    },
+    series: [
+      {
+        name: list.F[0].type,
+        type: "line",
+        stack: "Total",
+        showSymbol: false,
+        data: list.F.map(v => v.value),
+      },
+      {
+        name: list.L[0].type,
+        type: "line",
+        stack: "Total",
+        showSymbol: false,
+        data: list.L.map(v => v.value),
+      },
+    ],
+  });
+}

src/views/report/Advertisement/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Advertisement">
+  <div v-if="orgin.html" class="Advertisement">
     <div class="item">
       <section class="title">
         <section>电视广告投放简析</section>
@@ -10,30 +10,7 @@
         />
       </section>
       <br />
-      <div class="article">
-        <section
-          style="
-            line-height: 1.75em;
-            margin-bottom: 8px;
-            margin-left: 8px;
-            margin-right: 8px;
-            visibility: visible;
-            text-indent: 2em;
-          "
-        >
-          <span
-            style="color: rgb(84, 84, 84); font-size: 15px; visibility: visible"
-            >根据CTR媒介智讯的数据显示，
-          </span>
-          <span
-            style="font-size: 15px; color: rgb(255, 88, 0); visibility: visible"
-          >
-            <strong style="visibility: visible">
-              2022年上半年电视广告刊例花费同比下跌14.7%。电视广告自3月份开始环比持续提升，至6月环比上涨2.2%。
-            </strong>
-          </span>
-        </section>
-      </div>
+      <div class="article" v-html="orgin.html"></div>
     </div>
     <div class="item">
       <section class="title">
@@ -49,38 +26,69 @@
           <div class="right"></div>
           <div class="left">
             电视：
-            <span> 广告花费品牌榜单 </span>
+            <span> 2022年8月广告花费环比 </span>
+            上涨 2.2%
           </div>
         </h4>
         <br />
-        <h4 style="text-align: center">2022年8月电视广告花费TOP10</h4>
-        <br />
-        <van-row class="tableHead">
-          <van-col span="3">排名</van-col>
-          <van-col span="7">品牌</van-col>
-          <van-col span="7">费用(万元)</van-col>
-          <van-col span="7">同比增量</van-col>
-        </van-row>
-        <van-row class="tableBody">
-          <van-col span="3">1</van-col>
-          <van-col span="7">陈李济</van-col>
-          <van-col span="7">76246.93</van-col>
-          <van-col span="7">12.5%</van-col>
-        </van-row>
+        <div ref="adRingRatioCanvas"></div>
       </div>
       <div class="card">
         <h4 class="xifenxinxiTitle">
           <div class="right"></div>
           <div class="left">
             电视：
-            <span> 行业(大类)广告花费变化 </span>
+            <span> 广告花费品牌榜单 </span>
           </div>
         </h4>
-        <br />
-        <h4 style="text-align: center">2022年8月电视广告TOP10行业(大类)</h4>
-        <br />
-        <div ref="adTop10" class="">
-          <canvas ref="adTop10Canvas"></canvas>
+        <h4
+          v-if="orgin.brand_top"
+          style="text-align: center; margin: 1em 0"
+          v-text="orgin.brand_top.name"
+        ></h4>
+        <van-row v-if="orgin.brand_top" class="tableHead">
+          <van-col span="3">排名</van-col>
+          <van-col span="7">品牌</van-col>
+          <van-col span="7">费用(万元)</van-col>
+          <van-col span="7">环比</van-col>
+        </van-row>
+        <div v-if="orgin.brand_top">
+          <van-row
+            class="tableBody"
+            v-for="(item, i) in orgin.brand_top.list || []"
+            :key="item.name + i"
+          >
+            <van-col span="3" v-text="i + 1"></van-col>
+            <van-col span="7" v-text="item.name"></van-col>
+            <van-col span="7">
+              <counto
+                :startVal="0"
+                :endVal="item.fee.N || 0"
+                :duration="1000"
+              ></counto>
+              <span v-if="item.fee.P">.</span>
+              <counto
+                :startVal="0"
+                :endVal="item.fee.P || 0"
+                :duration="1000"
+              ></counto
+              >{{ item.fee.wei }}
+            </van-col>
+            <van-col span="7">
+              <counto
+                :startVal="0"
+                :endVal="item.huanbi.N || 0"
+                :duration="1000"
+              ></counto>
+              <span v-if="item.huanbi.P">.</span>
+              <counto
+                :startVal="0"
+                :endVal="item.huanbi.P || 0"
+                :duration="1000"
+              ></counto
+              >{{ item.huanbi.wei }}%
+            </van-col>
+          </van-row>
         </div>
       </div>
       <div class="card">
@@ -88,57 +96,157 @@
           <div class="right"></div>
           <div class="left">
             电视：
-            <span> 2022年8月广告花费环比 </span>
-            上涨 2.2%
+            <span> 行业(大类)广告花费变化 </span>
           </div>
         </h4>
         <br />
-        <h4 style="text-align: center">
-          2022年1月-2022年6月电视广告月度花费变化
-        </h4>
-        <br />
-        <canvas ref="adRingRatioCanvas"></canvas>
+        <div ref="adTop10" class="">
+          <div ref="adTop10Canvas"></div>
+        </div>
       </div>
     </div>
+    <div style="text-align: center; height: 1.5em;font-size: 16px ; line-height: 1.5em">
+      技术支持 汪朝涵：17302954998
+    </div>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
+import counto from "@/components/counto/vue-countTo.vue";
+import watermark from "watermark-package";
 import { Col as vanCol, Row as vanRow } from "vant";
 import "vant/lib/col/style/index";
 import "vant/lib/row/style/index";
 
-import { advertisementSpendInit, advertisementRingRatioInit } from "./jsx/F2";
+import dayJs from "dayjs";
+
+import { advertisementSpendInit, advertisementRingRatioInit } from "./Charts";
+import { jsonAdvertisement } from "@/api/index";
 
 export default {
   name: "Advertisement",
   data() {
-    return {};
+    return {
+      orgin: {},
+    };
   },
   mounted() {
-    this.createChart();
+    if (!this.$route.query.auto) return;
+    const time = new dayJs(this.$route.query.date);
+    watermark.setWaterMark({
+      w_texts: ["数据来自大数据平台"],
+      w_options: {
+        w_opacity: "0.3",
+      },
+    });
+    jsonAdvertisement({
+      date: time.format("YYYY-MM"),
+    }).then(r => {
+      const Res = r || {};
+      const brand_top = Res.brand_top || { list: [] };
+      for (let i = 0; i < brand_top.list.length; i++) {
+        brand_top.list[i].fee = this.formatType(brand_top.list[i].fee, 2);
+        brand_top.list[i].huanbi = this.formatType(
+          brand_top.list[i].huanbi * 100,
+          2
+        );
+      }
+      Res.brand_top = brand_top;
+      this.orgin = Res;
+      this.$nextTick(() => {
+        this.createChart();
+        window.onresize = () => {
+          watermark.setWaterMark({
+            w_texts: ["数据来自大数据平台"],
+            w_options: {
+              w_opacity: "0.3",
+            },
+          });
+        };
+      });
+    });
   },
   computed: {},
   methods: {
+    formatNum(num, w) {
+      if (isNaN(num)) return 0;
+      return Number(num).toFixed(w || 4) - 0;
+    },
+    formatType(num, W) {
+      let N = this.formatNum(num, 2);
+      let wei = "";
+      if (N >= 100000000) {
+        N = (N / 100000000).toFixed(W || 2);
+        wei = "亿";
+      } else if (N >= 10000) {
+        N = (N / 10000).toFixed(W || 2);
+        wei = "万";
+      }
+      N = N.toString().split(".");
+      return {
+        N: (N[0] || 0) * 1,
+        P: (N[1] || 0) * 1,
+        wei,
+      };
+    },
     createChart() {
       let width = this.$refs.adTop10.offsetWidth,
-        height = (width / 16) * 9,
-        devicePixelRatio = window.devicePixelRatio;
-      this.$refs.adTop10Canvas.width = width;
-      this.$refs.adTop10Canvas.height = height;
-      this.$refs.adRingRatioCanvas.width = width;
-      this.$refs.adRingRatioCanvas.height = height;
+        height = (width / 16) * 9;
+      this.$refs.adTop10Canvas.style = `width:${width}px;height:${height}px`;
+      this.$refs.adRingRatioCanvas.style = `width:${width}px;height:${height}px`;
 
-      advertisementSpendInit(this.$refs.adTop10Canvas, devicePixelRatio);
-      advertisementRingRatioInit(
-        this.$refs.adRingRatioCanvas,
-        devicePixelRatio
-      );
+      const ringRatioF = [];
+      const ringRatioL = [];
+      const day_hb = this.orgin.day_hb ? this.orgin.day_hb.list : [];
+      for (let i = 0; i < day_hb.length; i++) {
+        const v = day_hb[i];
+        const type = (v.pdt || "").split("-");
+        const type1 = (v.dt || "").split("-");
+        ringRatioF.push({
+          date: v.pdt || "",
+          type: [type[0], type[1]].join("-"),
+          value: v.pfee * 1,
+        });
+        ringRatioL.push({
+          date: v.dt || "",
+          type: [type1[0], type1[1]].join("-"),
+          value: v.fee * 1,
+        });
+      }
+      const lineF = [];
+      const lineL = [];
+      const brand_hb = this.orgin.brand_hb ? this.orgin.brand_hb.list : [];
+      for (let i = 0; i < brand_hb.length; i++) {
+        const v = brand_hb[i];
+        // lineF.push({
+        //   date: v.industry_name || "",
+        //   type: v.pstart_time,
+        //   value: v.pfee * 1,
+        // });
+        lineL.push({
+          date: v.industry_name || "",
+          type: "环比" + v.start_time + " vs " + v.pstart_time,
+          value: v.huanbi * 100,
+        });
+      }
+      lineL.length &&
+        advertisementSpendInit(this.$refs.adTop10Canvas, {
+          L: lineL,
+          F: lineF,
+          name: this.orgin.brand_hb.name,
+        });
+      ringRatioF.length &&
+        ringRatioL.length &&
+        advertisementRingRatioInit(this.$refs.adRingRatioCanvas, {
+          L: ringRatioL,
+          F: ringRatioF,
+          name: this.orgin.day_hb.name,
+        });
     },
   },
   beforeUnmount: function () {},
-  components: { vanCol, vanRow },
+  components: { vanCol, vanRow, counto },
 };
 </script>
 

src/views/report/Advertisement/jsx/F2.jsx

@@ -1,1117 +0,0 @@
-import { Canvas, Chart, Interval, Axis, Legend, Line, Tooltip } from "@antv/f2";
-import _ from 'lodash';
-
-export function advertisementSpendInit(ele, devicePixelRatio) {
-    const data = [
-        {
-            time: '周一',
-            tem: 6.9,
-            city: 'tokyo',
-        },
-        {
-            time: '周二',
-            tem: 9.5,
-            city: 'tokyo',
-        },
-        {
-            time: '周三',
-            tem: 14.5,
-            city: 'tokyo',
-        },
-        {
-            time: '周四',
-            tem: 18.2,
-            city: 'tokyo',
-        },
-        {
-            time: '周五',
-            tem: 21.5,
-            city: 'tokyo',
-        },
-        {
-            time: '周六',
-            tem: 25.2,
-            city: 'tokyo',
-        },
-        {
-            time: '周日',
-            tem: 26.5,
-            city: 'tokyo',
-        },
-        {
-            time: '周一',
-            tem: -10.8,
-            city: 'newYork',
-        },
-        {
-            time: '周二',
-            tem: -5.7,
-            city: 'newYork',
-        },
-        {
-            time: '周三',
-            tem: -11.3,
-            city: 'newYork',
-        },
-        {
-            time: '周四',
-            tem: -17,
-            city: 'newYork',
-        },
-        {
-            time: '周五',
-            tem: -22,
-            city: 'newYork',
-        },
-        {
-            time: '周六',
-            tem: -24.8,
-            city: 'newYork',
-        },
-        {
-            time: '周日',
-            tem: -24.1,
-            city: 'newYork',
-        },
-        {
-            time: '周一',
-            tem: 2.6,
-            city: 'berlin',
-        },
-        {
-            time: '周二',
-            tem: 3.5,
-            city: 'berlin',
-        },
-        {
-            time: '周三',
-            tem: 8.4,
-            city: 'berlin',
-        },
-        {
-            time: '周四',
-            tem: 13.5,
-            city: 'berlin',
-        },
-        {
-            time: '周五',
-            tem: 17,
-            city: 'berlin',
-        },
-        {
-            time: '周六',
-            tem: -18.6,
-            city: 'berlin',
-        },
-        {
-            time: '周日',
-            tem: 17.9,
-            city: 'berlin',
-        },
-    ];
-    // 获取 canvas context
-    const context = ele.getContext("2d");
-    const { props } = (
-        <Canvas context={context} pixelRatio={devicePixelRatio}>
-            <Chart
-                data={data}
-                scale={{
-                    tem: {
-                        tickCount: 5,
-                    },
-                }}
-            >
-                <Axis field="time" />
-                <Axis field="tem" />
-                <Interval
-                    x="time"
-                    y="tem"
-                    color="city"
-                    adjust="dodge"
-                    style={{
-                        field: 'tem',
-                        radius: (val) => {
-                            return val > 0 ? [4, 4, 0, 0] : [0, 0, 4, 4];
-                        },
-                    }}
-                />
-                <Tooltip />
-            </Chart>
-        </Canvas>
-    );
-    const canvas = new Canvas(props);
-    canvas.render();
-}
-
-export function advertisementRingRatioInit(ele, devicePixelRatio) {
-    const context = ele.getContext('2d');
-    const data = [
-        {
-            "date": "2010-01-10",
-            "type": "能源",
-            "value": 99.9
-        },
-        {
-            "date": "2010-01-10",
-            "type": "金属",
-            "value": 96.6
-        },
-        {
-            "date": "2010-02-10",
-            "type": "能源",
-            "value": 96.7
-        },
-        {
-            "date": "2010-02-10",
-            "type": "金属",
-            "value": 91.1
-        },
-        {
-            "date": "2010-03-10",
-            "type": "能源",
-            "value": 100.2
-        },
-        {
-            "date": "2010-03-10",
-            "type": "金属",
-            "value": 99.4
-        },
-        {
-            "date": "2010-04-10",
-            "type": "能源",
-            "value": 104.7
-        },
-        {
-            "date": "2010-04-10",
-            "type": "金属",
-            "value": 108.1
-        },
-        {
-            "date": "2010-05-10",
-            "type": "能源",
-            "value": 95.6
-        },
-        {
-            "date": "2010-05-10",
-            "type": "金属",
-            "value": 96
-        },
-        {
-            "date": "2010-06-10",
-            "type": "能源",
-            "value": 95.6
-        },
-        {
-            "date": "2010-06-10",
-            "type": "金属",
-            "value": 89.1
-        },
-        {
-            "date": "2010-07-10",
-            "type": "能源",
-            "value": 95.3
-        },
-        {
-            "date": "2010-07-10",
-            "type": "金属",
-            "value": 89.2
-        },
-        {
-            "date": "2010-08-10",
-            "type": "能源",
-            "value": 96.1
-        },
-        {
-            "date": "2010-08-10",
-            "type": "金属",
-            "value": 97.6
-        },
-        {
-            "date": "2010-09-10",
-            "type": "能源",
-            "value": 96.1
-        },
-        {
-            "date": "2010-09-10",
-            "type": "金属",
-            "value": 100.6
-        },
-        {
-            "date": "2010-10-10",
-            "type": "能源",
-            "value": 101.6
-        },
-        {
-            "date": "2010-10-10",
-            "type": "金属",
-            "value": 108.3
-        },
-        {
-            "date": "2010-11-10",
-            "type": "能源",
-            "value": 105.6
-        },
-        {
-            "date": "2010-11-10",
-            "type": "金属",
-            "value": 109.4
-        },
-        {
-            "date": "2010-12-10",
-            "type": "能源",
-            "value": 112.7
-        },
-        {
-            "date": "2010-12-10",
-            "type": "金属",
-            "value": 114.5
-        },
-        {
-            "date": "2011-01-11",
-            "type": "能源",
-            "value": 117
-        },
-        {
-            "date": "2011-01-11",
-            "type": "金属",
-            "value": 120.8
-        },
-        {
-            "date": "2011-02-11",
-            "type": "能源",
-            "value": 121.8
-        },
-        {
-            "date": "2011-02-11",
-            "type": "金属",
-            "value": 125.8
-        },
-        {
-            "date": "2011-03-11",
-            "type": "能源",
-            "value": 133.1
-        },
-        {
-            "date": "2011-03-11",
-            "type": "金属",
-            "value": 121.4
-        },
-        {
-            "date": "2011-04-11",
-            "type": "能源",
-            "value": 141.9
-        },
-        {
-            "date": "2011-04-11",
-            "type": "金属",
-            "value": 124.3
-        },
-        {
-            "date": "2011-05-11",
-            "type": "能源",
-            "value": 133.1
-        },
-        {
-            "date": "2011-05-11",
-            "type": "金属",
-            "value": 118.5
-        },
-        {
-            "date": "2011-06-11",
-            "type": "能源",
-            "value": 131.2
-        },
-        {
-            "date": "2011-06-11",
-            "type": "金属",
-            "value": 117
-        },
-        {
-            "date": "2011-07-11",
-            "type": "能源",
-            "value": 133.7
-        },
-        {
-            "date": "2011-07-11",
-            "type": "金属",
-            "value": 121
-        },
-        {
-            "date": "2011-08-11",
-            "type": "能源",
-            "value": 125.2
-        },
-        {
-            "date": "2011-08-11",
-            "type": "金属",
-            "value": 114.8
-        },
-        {
-            "date": "2011-09-11",
-            "type": "能源",
-            "value": 125.5
-        },
-        {
-            "date": "2011-09-11",
-            "type": "金属",
-            "value": 109.1
-        },
-        {
-            "date": "2011-10-11",
-            "type": "能源",
-            "value": 124.2
-        },
-        {
-            "date": "2011-10-11",
-            "type": "金属",
-            "value": 98.4
-        },
-        {
-            "date": "2011-11-11",
-            "type": "能源",
-            "value": 129.4
-        },
-        {
-            "date": "2011-11-11",
-            "type": "金属",
-            "value": 95.8
-        },
-        {
-            "date": "2011-12-11",
-            "type": "能源",
-            "value": 128
-        },
-        {
-            "date": "2011-12-11",
-            "type": "金属",
-            "value": 95.1
-        },
-        {
-            "date": "2012-01-12",
-            "type": "能源",
-            "value": 130.6
-        },
-        {
-            "date": "2012-01-12",
-            "type": "金属",
-            "value": 100.5
-        },
-        {
-            "date": "2012-02-12",
-            "type": "能源",
-            "value": 136.2
-        },
-        {
-            "date": "2012-02-12",
-            "type": "金属",
-            "value": 104
-        },
-        {
-            "date": "2012-03-12",
-            "type": "能源",
-            "value": 141.2
-        },
-        {
-            "date": "2012-03-12",
-            "type": "金属",
-            "value": 103.5
-        },
-        {
-            "date": "2012-04-12",
-            "type": "能源",
-            "value": 136.1
-        },
-        {
-            "date": "2012-04-12",
-            "type": "金属",
-            "value": 101
-        },
-        {
-            "date": "2012-05-12",
-            "type": "能源",
-            "value": 126.3
-        },
-        {
-            "date": "2012-05-12",
-            "type": "金属",
-            "value": 96.6
-        },
-        {
-            "date": "2012-06-12",
-            "type": "能源",
-            "value": 111.5
-        },
-        {
-            "date": "2012-06-12",
-            "type": "金属",
-            "value": 91.6
-        },
-        {
-            "date": "2012-07-12",
-            "type": "能源",
-            "value": 118.6
-        },
-        {
-            "date": "2012-07-12",
-            "type": "金属",
-            "value": 91.2
-        },
-        {
-            "date": "2012-08-12",
-            "type": "能源",
-            "value": 127.7
-        },
-        {
-            "date": "2012-08-12",
-            "type": "金属",
-            "value": 87.7
-        },
-        {
-            "date": "2012-09-12",
-            "type": "能源",
-            "value": 128.5
-        },
-        {
-            "date": "2012-09-12",
-            "type": "金属",
-            "value": 93.6
-        },
-        {
-            "date": "2012-10-12",
-            "type": "能源",
-            "value": 125.9
-        },
-        {
-            "date": "2012-10-12",
-            "type": "金属",
-            "value": 94
-        },
-        {
-            "date": "2012-11-12",
-            "type": "能源",
-            "value": 124.1
-        },
-        {
-            "date": "2012-11-12",
-            "type": "金属",
-            "value": 92.4
-        },
-        {
-            "date": "2012-12-12",
-            "type": "能源",
-            "value": 124.2
-        },
-        {
-            "date": "2012-12-12",
-            "type": "金属",
-            "value": 97.4
-        },
-        {
-            "date": "2013-01-13",
-            "type": "能源",
-            "value": 128.4
-        },
-        {
-            "date": "2013-01-13",
-            "type": "金属",
-            "value": 100.3
-        },
-        {
-            "date": "2013-02-13",
-            "type": "能源",
-            "value": 131.2
-        },
-        {
-            "date": "2013-02-13",
-            "type": "金属",
-            "value": 101.3
-        },
-        {
-            "date": "2013-03-13",
-            "type": "能源",
-            "value": 126.2
-        },
-        {
-            "date": "2013-03-13",
-            "type": "金属",
-            "value": 94.5
-        },
-        {
-            "date": "2013-04-13",
-            "type": "能源",
-            "value": 123.1
-        },
-        {
-            "date": "2013-04-13",
-            "type": "金属",
-            "value": 90.7
-        },
-        {
-            "date": "2013-05-13",
-            "type": "能源",
-            "value": 123.2
-        },
-        {
-            "date": "2013-05-13",
-            "type": "金属",
-            "value": 88.3
-        },
-        {
-            "date": "2013-06-13",
-            "type": "能源",
-            "value": 122.9
-        },
-        {
-            "date": "2013-06-13",
-            "type": "金属",
-            "value": 85.4
-        },
-        {
-            "date": "2013-07-13",
-            "type": "能源",
-            "value": 128.1
-        },
-        {
-            "date": "2013-07-13",
-            "type": "金属",
-            "value": 85.7
-        },
-        {
-            "date": "2013-08-13",
-            "type": "能源",
-            "value": 130.9
-        },
-        {
-            "date": "2013-08-13",
-            "type": "金属",
-            "value": 89.6
-        },
-        {
-            "date": "2013-09-13",
-            "type": "能源",
-            "value": 131.6
-        },
-        {
-            "date": "2013-09-13",
-            "type": "金属",
-            "value": 88.2
-        },
-        {
-            "date": "2013-10-13",
-            "type": "能源",
-            "value": 128.3
-        },
-        {
-            "date": "2013-10-13",
-            "type": "金属",
-            "value": 89.1
-        },
-        {
-            "date": "2013-11-13",
-            "type": "能源",
-            "value": 125.4
-        },
-        {
-            "date": "2013-11-13",
-            "type": "金属",
-            "value": 87.8
-        },
-        {
-            "date": "2013-12-13",
-            "type": "能源",
-            "value": 129.5
-        },
-        {
-            "date": "2013-12-13",
-            "type": "金属",
-            "value": 88.7
-        },
-        {
-            "date": "2014-01-14",
-            "type": "能源",
-            "value": 126.4
-        },
-        {
-            "date": "2014-01-14",
-            "type": "金属",
-            "value": 88.1
-        },
-        {
-            "date": "2014-02-14",
-            "type": "能源",
-            "value": 130.6
-        },
-        {
-            "date": "2014-02-14",
-            "type": "金属",
-            "value": 86.2
-        },
-        {
-            "date": "2014-03-14",
-            "type": "能源",
-            "value": 127.9
-        },
-        {
-            "date": "2014-03-14",
-            "type": "金属",
-            "value": 83
-        },
-        {
-            "date": "2014-04-14",
-            "type": "能源",
-            "value": 128.4
-        },
-        {
-            "date": "2014-04-14",
-            "type": "金属",
-            "value": 85.5
-        },
-        {
-            "date": "2014-05-14",
-            "type": "能源",
-            "value": 129
-        },
-        {
-            "date": "2014-05-14",
-            "type": "金属",
-            "value": 84.8
-        },
-        {
-            "date": "2014-06-14",
-            "type": "能源",
-            "value": 131.5
-        },
-        {
-            "date": "2014-06-14",
-            "type": "金属",
-            "value": 84.4
-        },
-        {
-            "date": "2014-07-14",
-            "type": "能源",
-            "value": 126.9
-        },
-        {
-            "date": "2014-07-14",
-            "type": "金属",
-            "value": 88.2
-        },
-        {
-            "date": "2014-08-14",
-            "type": "能源",
-            "value": 121.2
-        },
-        {
-            "date": "2014-08-14",
-            "type": "金属",
-            "value": 88
-        },
-        {
-            "date": "2014-09-14",
-            "type": "能源",
-            "value": 116.6
-        },
-        {
-            "date": "2014-09-14",
-            "type": "金属",
-            "value": 85.1
-        },
-        {
-            "date": "2014-10-14",
-            "type": "能源",
-            "value": 106.2
-        },
-        {
-            "date": "2014-10-14",
-            "type": "金属",
-            "value": 82.6
-        },
-        {
-            "date": "2014-11-14",
-            "type": "能源",
-            "value": 96.4
-        },
-        {
-            "date": "2014-11-14",
-            "type": "金属",
-            "value": 82.9
-        },
-        {
-            "date": "2014-12-14",
-            "type": "能源",
-            "value": 78.6
-        },
-        {
-            "date": "2014-12-14",
-            "type": "金属",
-            "value": 78.8
-        },
-        {
-            "date": "2015-01-15",
-            "type": "能源",
-            "value": 63.1
-        },
-        {
-            "date": "2015-01-15",
-            "type": "金属",
-            "value": 73.9
-        },
-        {
-            "date": "2015-02-15",
-            "type": "能源",
-            "value": 70.4
-        },
-        {
-            "date": "2015-02-15",
-            "type": "金属",
-            "value": 72.4
-        },
-        {
-            "date": "2015-03-15",
-            "type": "能源",
-            "value": 68.1
-        },
-        {
-            "date": "2015-03-15",
-            "type": "金属",
-            "value": 71.8
-        },
-        {
-            "date": "2015-04-15",
-            "type": "能源",
-            "value": 72.2
-        },
-        {
-            "date": "2015-04-15",
-            "type": "金属",
-            "value": 72.1
-        },
-        {
-            "date": "2015-05-15",
-            "type": "能源",
-            "value": 77.8
-        },
-        {
-            "date": "2015-05-15",
-            "type": "金属",
-            "value": 74.6
-        },
-        {
-            "date": "2015-06-15",
-            "type": "能源",
-            "value": 76.3
-        },
-        {
-            "date": "2015-06-15",
-            "type": "金属",
-            "value": 70.3
-        },
-        {
-            "date": "2015-07-15",
-            "type": "能源",
-            "value": 68.8
-        },
-        {
-            "date": "2015-07-15",
-            "type": "金属",
-            "value": 65.7
-        },
-        {
-            "date": "2015-08-15",
-            "type": "能源",
-            "value": 59.5
-        },
-        {
-            "date": "2015-08-15",
-            "type": "金属",
-            "value": 62.7
-        },
-        {
-            "date": "2015-09-15",
-            "type": "能源",
-            "value": 59.7
-        },
-        {
-            "date": "2015-09-15",
-            "type": "金属",
-            "value": 63.4
-        },
-        {
-            "date": "2015-10-15",
-            "type": "能源",
-            "value": 59.7
-        },
-        {
-            "date": "2015-10-15",
-            "type": "金属",
-            "value": 62.2
-        },
-        {
-            "date": "2015-11-15",
-            "type": "能源",
-            "value": 55.2
-        },
-        {
-            "date": "2015-11-15",
-            "type": "金属",
-            "value": 57.8
-        },
-        {
-            "date": "2015-12-15",
-            "type": "能源",
-            "value": 47.8
-        },
-        {
-            "date": "2015-12-15",
-            "type": "金属",
-            "value": 56.3
-        },
-        {
-            "date": "2016-01-16",
-            "type": "能源",
-            "value": 40.5
-        },
-        {
-            "date": "2016-01-16",
-            "type": "金属",
-            "value": 55.2
-        },
-        {
-            "date": "2016-02-16",
-            "type": "能源",
-            "value": 41.2
-        },
-        {
-            "date": "2016-02-16",
-            "type": "金属",
-            "value": 57.7
-        },
-        {
-            "date": "2016-03-16",
-            "type": "能源",
-            "value": 47.3
-        },
-        {
-            "date": "2016-03-16",
-            "type": "金属",
-            "value": 61.2
-        },
-        {
-            "date": "2016-04-16",
-            "type": "能源",
-            "value": 51.1
-        },
-        {
-            "date": "2016-04-16",
-            "type": "金属",
-            "value": 62
-        },
-        {
-            "date": "2016-05-16",
-            "type": "能源",
-            "value": 56.6
-        },
-        {
-            "date": "2016-05-16",
-            "type": "金属",
-            "value": 60
-        },
-        {
-            "date": "2016-06-16",
-            "type": "能源",
-            "value": 59.4
-        },
-        {
-            "date": "2016-06-16",
-            "type": "金属",
-            "value": 60.3
-        },
-        {
-            "date": "2016-07-16",
-            "type": "能源",
-            "value": 56.6
-        },
-        {
-            "date": "2016-07-16",
-            "type": "金属",
-            "value": 63.5
-        },
-        {
-            "date": "2016-08-16",
-            "type": "能源",
-            "value": 57.6
-        },
-        {
-            "date": "2016-08-16",
-            "type": "金属",
-            "value": 63.8
-        },
-        {
-            "date": "2016-09-16",
-            "type": "能源",
-            "value": 58.2
-        },
-        {
-            "date": "2016-09-16",
-            "type": "金属",
-            "value": 62.8
-        },
-        {
-            "date": "2016-10-16",
-            "type": "能源",
-            "value": 63.7
-        },
-        {
-            "date": "2016-10-16",
-            "type": "金属",
-            "value": 64.1
-        },
-        {
-            "date": "2016-11-16",
-            "type": "能源",
-            "value": 59.4
-        },
-        {
-            "date": "2016-11-16",
-            "type": "金属",
-            "value": 71.5
-        },
-        {
-            "date": "2016-12-16",
-            "type": "能源",
-            "value": 68.4
-        },
-        {
-            "date": "2016-12-16",
-            "type": "金属",
-            "value": 73.5
-        },
-        {
-            "date": "2017-01-17",
-            "type": "能源",
-            "value": 68.9
-        },
-        {
-            "date": "2017-01-17",
-            "type": "金属",
-            "value": 74.5
-        },
-        {
-            "date": "2017-02-17",
-            "type": "能源",
-            "value": 69.4
-        },
-        {
-            "date": "2017-02-17",
-            "type": "金属",
-            "value": 77.9
-        },
-        {
-            "date": "2017-03-17",
-            "type": "能源",
-            "value": 65.3
-        },
-        {
-            "date": "2017-03-17",
-            "type": "金属",
-            "value": 77.3
-        },
-        {
-            "date": "2017-04-17",
-            "type": "能源",
-            "value": 67.1
-        },
-        {
-            "date": "2017-04-17",
-            "type": "金属",
-            "value": 74
-        },
-        {
-            "date": "2017-05-17",
-            "type": "能源",
-            "value": 64.3
-        },
-        {
-            "date": "2017-05-17",
-            "type": "金属",
-            "value": 72.2
-        },
-        {
-            "date": "2017-06-17",
-            "type": "能源",
-            "value": 60.4
-        },
-        {
-            "date": "2017-06-17",
-            "type": "金属",
-            "value": 71.7
-        },
-        {
-            "date": "2017-07-17",
-            "type": "能源",
-            "value": 62.3
-        },
-        {
-            "date": "2017-07-17",
-            "type": "金属",
-            "value": 75.4
-        },
-        {
-            "date": "2017-08-17",
-            "type": "能源",
-            "value": 65
-        },
-        {
-            "date": "2017-08-17",
-            "type": "金属",
-            "value": 81.6
-        },
-        {
-            "date": "2017-09-17",
-            "type": "能源",
-            "value": 68.5
-        },
-        {
-            "date": "2017-09-17",
-            "type": "金属",
-            "value": 82.7
-        }
-    ];
-    const { props } = (
-        <Canvas context={context} pixelRatio={devicePixelRatio}>
-            <Chart data={data}>
-                <Axis
-                    field="date"
-                    tickCount={3}
-                    style={{
-                        label: { align: 'between' },
-                    }}
-                />
-                <Axis field="value" tickCount={5} />
-                <Line x="date" y="value" lineWidth="4px" color="type" />
-                <Legend
-                    position="top"
-                    style={{
-                        justifyContent: 'space-around',
-                    }}
-                    triggerMap={{
-                        press: (items, records, legend) => {
-                            const map = {};
-                            items.forEach((item) => (map[item.name] = _.clone(item)));
-                            records.forEach((record) => {
-                                map[record.type].value = record.value;
-                            });
-                            legend.setItems(_.values(map));
-                        },
-                        pressend: (items, records, legend) => {
-                            legend.setItems(items);
-                        },
-                    }}
-                />
-                <Tooltip />
-            </Chart>
-        </Canvas>
-    )
-    const chart = new Canvas(props);
-    chart.render();
-}

src/views/report/Traditional/index.vue

@@ -159,12 +159,24 @@
         </div>
       </van-popup>
     </div>
+
+    <div
+      style="
+        text-align: center;
+        height: 1.5em;
+        font-size: 16px;
+        line-height: 1.5em;
+      "
+    >
+      技术支持 汪朝涵：17302954998
+    </div>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
 import counto from "@/components/counto/vue-countTo.vue";
+import watermark from "watermark-package";
 import {
   Col as vanCol,
   Row as vanRow,
@@ -199,7 +211,14 @@ export default {
   },
   watch: {},
   mounted() {
-    let D = new Date();
+    watermark.setWaterMark({
+      w_texts: ["数据来自大数据平台"],
+      w_options: {
+        w_opacity: "0.3",
+      },
+    });
+    const time = new Date(this.$route.query.date);
+    let D = new Date(time);
     const lasetDay = new Dayjs(D.getTime() - D.getDay() * 86400000);
     const firstDay = new Dayjs(lasetDay - 6 * 86400000);
     jsonZhou({