提交

babel.config.js

@@ -10,5 +10,12 @@ module.exports = {
       },
       "vant",
     ],
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        runtime: "automatic",
+        importSource: "@antv/f2",
+      },
+    ],
   ],
 };

package.json

@@ -15,12 +15,15 @@
     "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",
-    "vue-router": "^3.5.3"
+    "vue-router": "^3.5.3",
+    "watermark-package": "^2.1.0"
   },
   "devDependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",

src/api/index.js

@@ -192,15 +192,15 @@ export function infoDate() {
   });
 }
 
-export function getCoffeeGoods(data){
+export function getCoffeeGoods(data) {
   return ajax({
     urlType: "coffee",
-    url: `/getGoods?${data || ''}`,
+    url: `/getGoods?${data || ""}`,
     method: "GET",
   });
 }
 
-export function getCoffeeTypes(){
+export function getCoffeeTypes() {
   return ajax({
     urlType: "coffee",
     url: `/getTypes`,
@@ -208,7 +208,7 @@ export function getCoffeeTypes(){
   });
 }
 
-export function getAddrees(data){
+export function getAddrees(data) {
   return ajax({
     urlType: "coffee",
     url: `/addressList?phone=${data.phone}`,
@@ -216,7 +216,7 @@ export function getAddrees(data){
   });
 }
 
-export function getAddreesOne(){
+export function getAddreesOne() {
   return ajax({
     urlType: "coffee",
     url: `/addressOne`,
@@ -224,50 +224,57 @@ export function getAddreesOne(){
   });
 }
 
-export function pushOrder(data){
+export function pushOrder(data) {
   return ajax({
     urlType: "coffee",
     url: `/pushOrder`,
     method: "POST",
-    data
+    data,
   });
 }
 
-export function pushAddress(data){
+export function pushAddress(data) {
   return ajax({
     urlType: "coffee",
     url: `/addressPush`,
     method: "POST",
-    data
+    data,
   });
 }
 
-export function editAddress(data){
-    return ajax({
-        urlType: "coffee",
-        url: `/addressEdit`,
-        method: "POST",
-        data
-      });
+export function editAddress(data) {
+  return ajax({
+    urlType: "coffee",
+    url: `/addressEdit`,
+    method: "POST",
+    data,
+  });
 }
 
-export function deleteAddress(data){
-    return ajax({
-        urlType: "coffee",
-        url: `/addressDetele`,
-        method: "DELETE",
-        data
-      });
+export function deleteAddress(data) {
+  return ajax({
+    urlType: "coffee",
+    url: `/addressDetele`,
+    method: "DELETE",
+    data,
+  });
 }
 
-export function listOrder(data){
-    const { page, size} = data;
-    return ajax({
-        urlType: "coffee",
-        url: `/listOrder?page=${page}&size=${size}`,
-        method: "GET",
-      });
+export function listOrder(data) {
+  const { page, size } = data;
+  return ajax({
+    urlType: "coffee",
+    url: `/listOrder?page=${page}&size=${size}`,
+    method: "GET",
+  });
 }
 
+export function jsonZhou(data) {
+  return ajax({
+    urlType: "cxzx",
+    url: `/zhoubao/data/${data.start}-${data.end}ctmt.json`,
+    method: "GET",
+  });
+}
 
-export default {}
+export default {};

src/components/counto/index.js

@@ -0,0 +1,5 @@
+import CountTo from './vue-countTo.vue';
+export default CountTo;
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.component('count-to', CountTo);
+}

src/components/counto/requestAnimationFrame.js

@@ -0,0 +1,46 @@
+let lastTime = 0
+const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
+
+let requestAnimationFrame
+let cancelAnimationFrame
+
+const isServer = typeof window === 'undefined'
+if (isServer) {
+  requestAnimationFrame = function() {
+    return
+  }
+  cancelAnimationFrame = function() {
+    return
+  }
+} else {
+  requestAnimationFrame = window.requestAnimationFrame
+  cancelAnimationFrame = window.cancelAnimationFrame
+  let prefix
+    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
+  for (let i = 0; i < prefixes.length; i++) {
+    if (requestAnimationFrame && cancelAnimationFrame) { break }
+    prefix = prefixes[i]
+    requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
+    cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
+  }
+
+  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
+  if (!requestAnimationFrame || !cancelAnimationFrame) {
+    requestAnimationFrame = function(callback) {
+      const currTime = new Date().getTime()
+      // 为了使setTimteout的尽可能的接近每秒60帧的效果
+      const timeToCall = Math.max(0, 16 - (currTime - lastTime))
+      const id = window.setTimeout(() => {
+        callback(currTime + timeToCall)
+      }, timeToCall)
+      lastTime = currTime + timeToCall
+      return id
+    }
+
+    cancelAnimationFrame = function(id) {
+      window.clearTimeout(id)
+    }
+  }
+}
+
+export { requestAnimationFrame, cancelAnimationFrame }

src/components/counto/vue-countTo.vue

@@ -0,0 +1,189 @@
+<template>
+    <span>{{displayValue}}</span>
+</template>
+<script>
+import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
+export default {
+  props: {
+    startVal: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    endVal: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    duration: {
+      type: Number,
+      required: false,
+      default: 3000
+    },
+    autoplay: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    decimals: {
+      type: Number,
+      required: false,
+      default: 0,
+      validator(value) {
+        return value >= 0
+      }
+    },
+    decimal: {
+      type: String,
+      required: false,
+      default: '.'
+    },
+    separator: {
+      type: String,
+      required: false,
+      default: ','
+    },
+    prefix: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    suffix: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    useEasing: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    easingFn: {
+      type: Function,
+      default(t, b, c, d) {
+        return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
+      }
+    }
+  },
+  data() {
+    return {
+      localStartVal: this.startVal,
+      displayValue: this.formatNumber(this.startVal),
+      printVal: null,
+      paused: false,
+      localDuration: this.duration,
+      startTime: null,
+      timestamp: null,
+      remaining: null,
+      rAF: null
+    };
+  },
+  computed: {
+    countDown() {
+      return this.startVal > this.endVal
+    }
+  },
+  watch: {
+    startVal() {
+      if (this.autoplay) {
+        this.start();
+      }
+    },
+    endVal() {
+      if (this.autoplay) {
+        this.start();
+      }
+    }
+  },
+  mounted() {
+    if (this.autoplay) {
+      this.start();
+    }
+    this.$emit('mountedCallback')
+  },
+  methods: {
+    start() {
+      this.localStartVal = this.startVal;
+      this.startTime = null;
+      this.localDuration = this.duration;
+      this.paused = false;
+      this.rAF = requestAnimationFrame(this.count);
+    },
+    pauseResume() {
+      if (this.paused) {
+        this.resume();
+        this.paused = false;
+      } else {
+        this.pause();
+        this.paused = true;
+      }
+    },
+    pause() {
+      cancelAnimationFrame(this.rAF);
+    },
+    resume() {
+      this.startTime = null;
+      this.localDuration = +this.remaining;
+      this.localStartVal = +this.printVal;
+      requestAnimationFrame(this.count);
+    },
+    reset() {
+      this.startTime = null;
+      cancelAnimationFrame(this.rAF);
+      this.displayValue = this.formatNumber(this.startVal);
+    },
+    count(timestamp) {
+      if (!this.startTime) this.startTime = timestamp;
+      this.timestamp = timestamp;
+      const progress = timestamp - this.startTime;
+      this.remaining = this.localDuration - progress;
+
+      if (this.useEasing) {
+        if (this.countDown) {
+          this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
+        } else {
+          this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
+        }
+      } else {
+        if (this.countDown) {
+          this.printVal = this.localStartVal - ((this.localStartVal - this.endVal) * (progress / this.localDuration));
+        } else {
+          this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
+        }
+      }
+      if (this.countDown) {
+        this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
+      } else {
+        this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
+      }
+
+      this.displayValue = this.formatNumber(this.printVal)
+      if (progress < this.localDuration) {
+        this.rAF = requestAnimationFrame(this.count);
+      } else {
+        this.$emit('callback');
+      }
+    },
+    isNumber(val) {
+      return !isNaN(parseFloat(val))
+    },
+    formatNumber(num) {
+      num = num.toFixed(this.decimals);
+      num += '';
+      const x = num.split('.');
+      let x1 = x[0];
+      const x2 = x.length > 1 ? this.decimal + x[1] : '';
+      const rgx = /(\d+)(\d{3})/;
+      if (this.separator && !this.isNumber(this.separator)) {
+        while (rgx.test(x1)) {
+          x1 = x1.replace(rgx, '$1' + this.separator + '$2');
+        }
+      }
+      return this.prefix + x1 + x2 + this.suffix;
+    }
+  },
+  unmounted() {
+    cancelAnimationFrame(this.rAF)
+  }
+};
+</script>

src/config/index.js

@@ -3,7 +3,8 @@ const base = {
     M3BaseURL: "http://113.142.79.115:8081",
     menuURL: "http://47.108.249.49:9002",
     dataJSON: "https://djweb.smcic.net",
-    coffee: "http://127.0.0.1:7001"
+    coffee: "http://127.0.0.1:7001",
+    cxzx: "https://cxzx.smcic.net"
 }
 
 export default {

src/router/report.js

@@ -1,13 +1,24 @@
 export default [
-  {
-    path: "/advertisement",
-    name: "Advertisement",
-    meta: {
-      title: "电视广告数据周报",
+    {
+      path: "/advertisement",
+      name: "Advertisement",
+      meta: {
+        title: "电视广告数据周报",
+      },
+      component: () =>
+        import(
+          /* webpackChunkName: "report" */ "../views/report/Advertisement/index.vue"
+        ),
+    },
+    {
+      path: "/Traditional",
+      name: "Traditional",
+      meta: {
+        title: "陕西视听大数据发布",
+      },
+      component: () =>
+        import(
+          /* webpackChunkName: "report" */ "../views/report/Traditional/index.vue"
+        ),
     },
-    component: () =>
-      import(
-        /* webpackChunkName: "report" */ "../views/report/Advertisement/index.vue"
-      ),
-  },
 ];

src/utils/echarts.js

@@ -1,5 +1,5 @@
 import * as echarts from "echarts/core";
-import { RadarChart } from "echarts/charts";
+import { RadarChart, LineChart  } from "echarts/charts";
 import { TitleComponent } from "echarts/components";
 import {
   TooltipComponent,
@@ -22,6 +22,7 @@ echarts.use([
   UniversalTransition,
   RadarChart,
   SVGRenderer,
+  LineChart 
 ]);
 
 export default echarts;

src/utils/request.js

@@ -49,6 +49,7 @@ export default function (ori) {
         reject(t.message);
         return;
       }
+    //   console.log(this.responseText)
       let data = {};
       try {
         data =

src/views/report/Advertisement/index.vue

@@ -44,36 +44,61 @@
           style="float: right"
         />
       </section>
-      <br />
-      <h4 class="xifenxinxiTitle">
-        电视：
-        <span> 广告花费品牌榜单 </span>
-      </h4>
-      <br />
-      <h6 style="text-align: center">2022年8月电视广告花费TOP10</h6>
-      <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>
-      <br />
-      <h4 class="xifenxinxiTitle">
-        电视：
-        <span> 行业(大类)广告花费变化 </span>
-      </h4>
-      <br />
-      <h6 style="text-align: center">2022年8月电视广告TOP10行业(大类)</h6>
-      <br />
-      <canvas ref="adTop10" width="400" height="260"></canvas>
-      
+      <div class="card">
+        <h4 class="xifenxinxiTitle">
+          <div class="right"></div>
+          <div class="left">
+            电视：
+            <span> 广告花费品牌榜单 </span>
+          </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>
+      <div class="card">
+        <h4 class="xifenxinxiTitle">
+          <div class="right"></div>
+          <div class="left">
+            电视：
+            <span> 行业(大类)广告花费变化 </span>
+          </div>
+        </h4>
+        <br />
+        <h4 style="text-align: center">2022年8月电视广告TOP10行业(大类)</h4>
+        <br />
+        <div ref="adTop10" class="">
+          <canvas ref="adTop10Canvas"></canvas>
+        </div>
+      </div>
+      <div class="card">
+        <h4 class="xifenxinxiTitle">
+          <div class="right"></div>
+          <div class="left">
+            电视：
+            <span> 2022年8月广告花费环比 </span>
+            上涨 2.2%
+          </div>
+        </h4>
+        <br />
+        <h4 style="text-align: center">
+          2022年1月-2022年6月电视广告月度花费变化
+        </h4>
+        <br />
+        <canvas ref="adRingRatioCanvas"></canvas>
+      </div>
     </div>
   </div>
 </template>
@@ -84,7 +109,7 @@ import { Col as vanCol, Row as vanRow } from "vant";
 import "vant/lib/col/style/index";
 import "vant/lib/row/style/index";
 
-import {Init} from "./jsx/F2"
+import { advertisementSpendInit, advertisementRingRatioInit } from "./jsx/F2";
 
 export default {
   name: "Advertisement",
@@ -92,10 +117,26 @@ export default {
     return {};
   },
   mounted() {
-    Init(this.$refs.adTop10,window.devicePixelRatio)
+    this.createChart();
   },
   computed: {},
-  methods: {},
+  methods: {
+    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;
+
+      advertisementSpendInit(this.$refs.adTop10Canvas, devicePixelRatio);
+      advertisementRingRatioInit(
+        this.$refs.adRingRatioCanvas,
+        devicePixelRatio
+      );
+    },
+  },
   beforeUnmount: function () {},
   components: { vanCol, vanRow },
 };
@@ -104,13 +145,14 @@ export default {
 <style>
 .Advertisement {
   height: 100%;
-  padding: 22px 12px 12px 12px;
+  padding: 22px 5px 12px 5px;
   background-color: #fff;
 }
 .Advertisement .item {
   max-width: 677px;
   margin: 0 auto;
   font-weight: 700;
+  padding-bottom: 1em;
 }
 .Advertisement section {
   font-weight: 700;
@@ -123,21 +165,38 @@ export default {
 .Advertisement .title section {
   background-color: rgba(255, 255, 255, 0.5);
   color: #fff;
-  font-size: 16px;
   height: 35px;
   line-height: 35px;
   width: 166px;
   text-align: center;
 }
 .xifenxinxiTitle {
-  color: #ff1c1c;
+  color: #ffffff;
+  height: 34px;
+  line-height: 34px;
+  position: relative;
+}
+.xifenxinxiTitle .left {
+  background-color: #d11e16;
+  padding-left: 1em;
+  width: 80%;
+  position: relative;
+  z-index: 1;
 }
-.xifenxinxiTitle span {
-  color: #1d1d1d;
+.xifenxinxiTitle .right {
+  background-color: #595959;
+  width: 20%;
+  height: 34px;
+  line-height: 34px;
+  position: absolute;
+  z-index: 0;
+  right: 0;
+  top: 5px;
 }
+
 .Advertisement .tableHead {
-  background-color: #d11e16;
   color: #fff;
+  background-color: #d11e16;
 }
 .tableHead .van-col,
 .tableBody .van-col {
@@ -146,4 +205,9 @@ export default {
   text-align: center;
   white-space: nowrap;
 }
+.card {
+  box-shadow: 0 0 5px 5px #eee;
+  margin-top: 1em;
+  padding: 1em 0;
+}
 </style>

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

@@ -1,27 +1,1117 @@
-import { Canvas, Chart, Interval, Axis, Tooltip } from "@antv/f2";
+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 Init(ele,devicePixelRatio){
-      const data = [
-        { genre: "Sports", sold: 275 },
-        { genre: "Strategy", sold: 115 },
-        { genre: "Action", sold: 120 },
-        { genre: "Shooter", sold: 350 },
-        { genre: "Other", sold: 150 },
-      ];
-      // 获取 canvas context
-      const context = ele.getContext("2d");
-      const { props } = (
+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="genre" />
-            <Axis field="sold" />
-            <Interval x="genre" y="sold" color="genre" />
-            <Tooltip />
-          </Chart>
+            <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>
-      );
-      console.log(props);
-      const canvas = new Canvas(props);
-      canvas.render();
+    )
+    const chart = new Canvas(props);
+    chart.render();
 }

src/views/report/Traditional/index.vue

@@ -0,0 +1,481 @@
+<template>
+  <div class="tv-list">
+    <div class="content">
+      <div class="itemHead">
+        <van-row>
+          <van-col span="3" class="td"> 排名 </van-col>
+          <van-col span="5" class="td"> 频道 </van-col>
+          <van-col span="5" class="td"> 市场份额 </van-col>
+          <van-col
+            span="7"
+            class="td td2"
+            :style="width > 667 ? 'line-height: 2.5em' : 'line-height: 1.5em'"
+          >
+            人均使用时长(分钟)
+          </van-col>
+          <van-col span="4" class="td">
+            点击<img
+              src="../../../assets/image/shou.gif"
+              width="30px"
+              alt=""
+              style="vertical-align: middle"
+            />
+          </van-col>
+        </van-row>
+      </div>
+      <div v-for="(v, o) in platfromData || []" :key="v.name">
+        <div
+          style="border-bottom: 1px dashed #eee; margin: 11px 0 0 0"
+          v-if="o === 20"
+        ></div>
+        <van-row class="item">
+          <van-col
+            span="3"
+            :class="{ td: true }"
+            :style="{ color: color[o] || '#000', fontWeight: 600 }"
+          >
+            {{ v.rank }}
+          </van-col>
+          <van-col span="5" :class="{ td: true }">
+            {{ v.channelname }}
+          </van-col>
+          <van-col span="5" :class="{ td: true }" style="color: #e1a74f">
+            <van-icon
+              v-if="v.occrate_change !== '相等'"
+              name="down"
+              :color="v.occrate_change === '上升' ? '#f00' : '#0f0'"
+              :class="{ rise: v.occrate_change === '上升' }"
+            />
+            {{ formatNum(v.occrate, 2) }}%
+          </van-col>
+          <van-col span="7" :class="{ td: true }" style="color: #e1a74f">
+            <van-icon
+              v-if="v.user_duration_change !== '相等'"
+              name="down"
+              :color="v.user_duration_change === '上升' ? '#f00' : '#0f0'"
+              :class="{ rise: v.user_duration_change === '上升' }"
+            />
+            {{ timeFormat(v.user_duration) }}
+          </van-col>
+          <van-col
+            span="4"
+            class="td"
+            style="cursor: pointer"
+            @click="() => showPopup(o)"
+          >
+            更多
+            <van-icon name="arrow" />
+          </van-col>
+        </van-row>
+      </div>
+      <van-popup
+        :style="{ height: '100%', width: '100%' }"
+        position="right"
+        v-model="show"
+      >
+        <div class="main">
+          <van-cell
+            title-style="flex: 3"
+            :title="ratios.schedulename"
+            :label="ratios.channelname"
+          >
+            <div @click="show = false" style="color: #5470c6; cursor: pointer">
+              返回
+              <van-icon name="share-o" />
+            </div>
+          </van-cell>
+          <van-row>
+            <van-col span="5" class="td"> 收视率： </van-col>
+            <van-col span="7" class="td">
+              {{ formatNum(ratios.watchrate, 2) }}%
+            </van-col>
+            <van-col span="7" class="td"> 市占率： </van-col>
+            <van-col span="5" class="td"
+              >{{ formatNum(ratios.occrate, 2) }}%
+            </van-col>
+
+            <van-col span="5" class="td"> 到达率： </van-col>
+            <van-col span="7" class="td"
+              >{{ formatNum(ratios.reachrate, 2) }}%
+            </van-col>
+            <van-col span="7" class="td"> 收视次数： </van-col>
+            <van-col span="5" class="td">
+              <counto
+                :startVal="0"
+                :endVal="ratios.hitcount || 0"
+                :duration="1000"
+              ></counto>
+              <span v-if="ratios.hitcountP">.</span>
+              <counto
+                :startVal="0"
+                :endVal="ratios.hitcountP || 0"
+                :duration="1000"
+              ></counto
+              >{{ ratios.hitcountWei }}
+            </van-col>
+
+            <van-col span="5" class="td"> 忠诚度： </van-col>
+            <van-col span="7" class="td"
+              >{{ formatNum(ratios.loyalty, 2) }}%
+            </van-col>
+            <van-col span="7" class="td"> 用户数： </van-col>
+            <van-col span="5" class="td">
+              <counto
+                :startVal="0"
+                :endVal="ratios.usrcount || 0"
+                :duration="1000"
+              ></counto>
+              <span v-if="ratios.usrcountP">.</span>
+              <counto
+                :startVal="0"
+                :endVal="ratios.usrcountP || 0"
+                :duration="1000"
+              ></counto
+              >{{ ratios.usrcountWei }}
+            </van-col>
+
+            <van-col span="5" class="td"> 收视时长： </van-col>
+            <van-col span="7" class="td">
+              <counto
+                :startVal="0"
+                :endVal="ratios.timecount || 0"
+                :duration="1000"
+              ></counto>
+              <span v-if="ratios.timecountP">.</span>
+              <counto
+                :startVal="0"
+                :endVal="ratios.timecountP || 0"
+                :duration="1000"
+              ></counto
+              >{{ ratios.timecountWei }}
+            </van-col>
+            <van-col span="7" class="td"> 人均收视时长： </van-col>
+            <van-col span="5" class="td"
+              >{{ timeFormat(ratios.user_duration) }}分钟
+            </van-col>
+          </van-row>
+          <div ref="pie"></div>
+          <div ref="day"></div>
+        </div>
+      </van-popup>
+    </div>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import counto from "@/components/counto/vue-countTo.vue";
+import {
+  Col as vanCol,
+  Row as vanRow,
+  Icon as vanIcon,
+  Popup as vanPopup,
+  Cell as vanCell,
+} from "vant";
+import "vant/lib/cell/style/index";
+import "vant/lib/popup/style/index";
+import "vant/lib/icon/style/index";
+import "vant/lib/col/style/index";
+import "vant/lib/row/style/index";
+// import {} from "../utils/tool";
+import Dayjs from "dayjs";
+import { jsonZhou } from "../../../api/index";
+
+import echarts from "../../../utils/echarts";
+
+export default {
+  name: "tv-list",
+  data() {
+    return {
+      show: false,
+      charts: undefined,
+      ratios: {},
+      platfromData: [],
+      color: ["#ff0036", "#ff9b00", "#ffcc00"],
+      echarts: undefined,
+      dayEcharts: undefined,
+      width: document.body.offsetWidth || 0,
+    };
+  },
+  watch: {},
+  mounted() {
+    let D = new Date();
+    const lasetDay = new Dayjs(D.getTime() - D.getDay() * 86400000);
+    const firstDay = new Dayjs(lasetDay - 6 * 86400000);
+    jsonZhou({
+      start: firstDay.format("YYYYMMDD"),
+      end: lasetDay.format("YYYYMMDD"),
+    })
+      .then(res => {
+        this.platfromData = res || [];
+        this.$emit("start", {
+          status: 200,
+        });
+      })
+      .catch(err => {
+        this.$emit("start", {
+          status: err,
+        });
+      });
+
+    window.onresize = () => {
+      const doc = document.body;
+      const width = doc.offsetWidth - 32;
+      let height = (width / 4) * 3;
+      this.width = document.body.offsetWidth || 0;
+      this.dayEcharts &&
+        this.dayEcharts.resize({
+          width,
+          height: width,
+        });
+      this.echarts &&
+        this.echarts.resize({
+          width,
+          height,
+        });
+    };
+  },
+  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,
+      };
+    },
+    timeFormat(t) {
+      const Time = t || 0;
+      let out = Time.toFixed(1) - 0;
+      return out;
+    },
+    showPopup(i) {
+      this.show = true;
+      const reaios = this.platfromData[i] || {};
+      let hitcount = this.formatType(reaios.hitcount, 2);
+      reaios.hitcount = hitcount.N;
+      reaios.hitcountP = hitcount.P;
+      reaios.hitcountWei = hitcount.wei;
+      let usrcount = this.formatType(reaios.usrcount, 2);
+      reaios.usrcount = usrcount.N;
+      reaios.usrcountP = usrcount.P;
+      reaios.usrcountWei = usrcount.wei;
+      let timecount = this.formatType(reaios.timecount / 60, 2);
+      reaios.timecount = timecount.N;
+      reaios.timecountP = timecount.P;
+      reaios.timecountWei = timecount.wei + "小时";
+      this.ratios = reaios;
+      this.$nextTick(() => {
+        this.upEcharts();
+        this.dayEchartsFun();
+      });
+    },
+    dayEchartsFun() {
+      this.dayEcharts && this.dayEcharts.clear && this.dayEcharts.clear();
+      if (!this.dayEcharts) {
+        const doc = document.body;
+        const width = doc.offsetWidth - 32;
+        let height = (width / 4) * 3;
+        if (height > 400) height = 400;
+        this.dayEcharts = echarts.init(
+          this.$refs.day,
+          {},
+          {
+            width,
+            height,
+          }
+        );
+      }
+      const key = [],
+        value = [];
+      this.ratios.detail_list.map(v => {
+        let val = v.usrcount;
+        key.push(v.dt);
+        value.push(val);
+      });
+      this.dayEcharts.setOption({
+        title: {
+          text: "用户趋势",
+          textStyle: {
+            fontSize: 14,
+          },
+        },
+        tooltip: {
+          show: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: key,
+        },
+        grid: {
+          right: "15px",
+          left: "40px",
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            formatter: e => {
+              const T = this.formatType(e);
+              let out = T.N;
+              if (T.P) out += "." + T.P;
+              out += T.wei;
+              return out;
+            },
+          },
+        },
+        series: [
+          {
+            type: "line",
+            data: value,
+          },
+        ],
+      });
+    },
+    upEcharts() {
+      this.echarts && this.echarts.clear && this.echarts.clear();
+      if (!this.echarts) {
+        const doc = document.body;
+        const width = doc.offsetWidth - 32;
+        let height = width;
+        if (height > 667) height = 667;
+        this.echarts = echarts.init(
+          this.$refs.pie,
+          {},
+          {
+            width,
+            height,
+          }
+        );
+      }
+      const key = [],
+        value = [];
+      let max = 0;
+      this.ratios.duration_list.map(v => {
+        let val = (v.value * 100).toFixed(2) - 0;
+        key.push(v.range);
+        value.push(val);
+        max < val && (max = val);
+      });
+      max += max * 0.2;
+      max > 100 && (max = 100);
+      this.echarts.setOption({
+        title: {
+          text: "观看时长用户分布",
+          textStyle: {
+            fontSize: 14,
+          },
+        },
+        radar: {
+          shape: "circle",
+          center: ["50%", "50%"],
+          radius: 100,
+          indicator: key.map((v, i) => {
+            let m = value[i] / max,
+              val = max;
+            m <= 0.5 ? (val = 0.5 * max) : "";
+            return {
+              name: v,
+              max: val,
+            };
+          }),
+        },
+        series: [
+          {
+            type: "radar",
+            data: [
+              {
+                value,
+                label: {
+                  show: true,
+                  formatter: function (params) {
+                    return params.value + "%";
+                  },
+                },
+                itemStyle: {
+                  color: "#F9713C",
+                },
+                areaStyle: {
+                  opacity: 0.1,
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+  beforeUnmount() {},
+  components: {
+    counto,
+    vanCol,
+    vanRow,
+    vanIcon,
+    vanPopup,
+    vanCell,
+  },
+};
+</script>
+
+<style scoped>
+.tv-list {
+  background-color: #fff;
+  font-size: 15px;
+  padding: 5px;
+  height: 100%;
+  overflow-y: scroll;
+  box-sizing: border-box;
+}
+.td {
+  text-align: center;
+  line-height: 2.5em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+.td2 {
+  line-height: 1.5em;
+  white-space: initial;
+}
+.item {
+  overflow: hidden;
+  border-radius: 3px;
+  margin-top: 11px;
+  background-color: #f5f6f8;
+}
+.itemHead {
+  margin-top: 0;
+  background-color: #f5f6f8;
+}
+.main {
+  padding: 0.5em;
+}
+.content {
+  margin: 0 auto;
+  max-width: 667px;
+}
+.rise {
+  /* 上升 */
+  transform: rotate(180deg);
+}
+</style>
+<style>
+.tv-list .van-tab {
+  font-size: 16px;
+}
+</style>

vue.config.js

@@ -1,4 +1,7 @@
 module.exports = {
   productionSourceMap: false,
-  publicPath: "./"
+  publicPath: "./",
+  configureWebpack: {
+
+  },
 };