提交

src/api/kuyun.js

@@ -172,17 +172,28 @@ export function country(data) {
     data,
   });
 }
-
+export function countryExport(data, fileName) {
+  return fileDownload(
+    {
+      urlType: "kuyunApi",
+      url: "/api/evaluation/eye/download/performance/absepgkpi/download",
+      method: "psot",
+      data,
+    },
+    fileName
+  );
+}
 
 /**
  * 单期节目流入流出
  * @props epg_ids=&area_id=
  * @return {AxjxPromise}
  */
- export function singleProgram(data) {
-    return ajax({
-      urlType: "kuyunApi",
-      url: "/api/evaluation/eye/EpgInputOutputAction?kpi=tv_ratings&" +data,
-      method: "GET",
-    });
-  }
+export function singleProgram(data) {
+  return ajax({
+    urlType: "kuyunApi",
+    url: "/api/evaluation/eye/EpgInputOutputAction?kpi=tv_ratings&" + data,
+    method: "GET",
+  });
+}
+

src/router/index.js

@@ -98,8 +98,8 @@ const routes = [
             component: ()=> import("../views/ProgramDetail/ProgramDetail.vue")
         },
         {
-            path: "/country/programDetail", // 抽象节目剧目排行
-            component: ()=> import("../views/ProgramDetail/ProgramDetail.vue")
+            path: "/country/abstractProgram", // 抽象节目剧目排行
+            component: ()=> import("../views/AbstractProgram/AbstractProgram.vue")
         },
         {
             path: "/country/flow", // 单期节目流入流出

src/utils/download.js

@@ -10,15 +10,27 @@ function getdata(data) {
   return text;
 }
 
-export default function(ori, fileName) {
+export default function(ori, fileName, call) {
+  let method = (ori.method || 'get').toUpperCase();
   let baseurl = config.base[ori.urlType || "url"];
-  let url = baseurl + ori.url + getdata(ori.data || {})
+  let url = baseurl + ori.url;
   let xhttp;
+  if(method === 'GET'){
+    url +=  getdata(ori.data || {})
+  }
   if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
   else xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
   xhttp.responseType = "blob";
-  xhttp.open("GET", url, true);
-  xhttp.send();
+  xhttp.open(method, url, true);
+  if(method === "POST"){
+    xhttp.send(JSON.stringify(ori.data));
+    xhttp.setRequestHeader(
+      "Content-Type",
+      "application/json"
+    );
+  }else{
+    xhttp.send();
+  }
   xhttp.addEventListener(
     "progress",
     res => {
@@ -37,5 +49,6 @@ export default function(ori, fileName) {
     document.body.appendChild(elink);
     elink.click();
     document.body.removeChild(elink);
+    call && call()
   };
 }

src/views/Abstract/Abstract.vue

@@ -15,7 +15,7 @@
       >
         <el-form-item label="抽象节目">
           <el-select
-            v-model="form.program"
+            v-model="form.filter.abs_epg"
             multiple
             filterable
             collapse-tags
@@ -45,98 +45,51 @@
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="频道">
+        <el-form-item :label="v.name" v-for="(v, i) in searchDate" :key="i">
           <el-select
-            v-model="form.channel"
-            placeholder="请选择频道"
+            v-model="form.filter[v.key]"
+            :placeholder="'请选择' + v.name"
             multiple
             collapse-tags
-            @change="channelSelect"
+            @change="se => select(v, se)"
           >
-            <el-option
-              v-for="item in channelList"
-              :key="item.label"
-              :label="item.label"
-              :value="item.label"
-              :disabled="item.disabled"
-            >
+            <el-option key="-1" v-if="v.id !== 'time'" label="全选" value="-1">
             </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="星期">
-          <el-select
-            v-model="form.week"
-            placeholder="请选择星期"
-            multiple
-            collapse-tags
-            @change="weekSelect"
-          >
             <el-option
-              v-for="item in weeks"
-              :key="item.value"
-              :label="item.label"
-              :value="item.label"
+              v-for="item in v.list || []"
+              :key="item.id + ''"
+              :label="item.name"
+              :value="item.key + ''"
             >
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="时间">
           <el-time-picker
-            v-model="form.rangeTime"
+            v-model="rangeTime"
             is-range
             format="HH:mm"
-            @change="() => (form.rangeTimeRange = [])"
+            @change="() => (form.filter.time = [])"
             range-separator="-"
             start-placeholder="开始时间"
             end-placeholder="结束时间"
           >
           </el-time-picker>
         </el-form-item>
-        <el-form-item label="时段">
-          <el-select
-            v-model="form.rangeTimeRange"
-            placeholder="请选择时段"
-            multiple
-            collapse-tags
-            clearable
-            @change="timeSelect"
-          >
-            <el-option
-              v-for="item in cycle"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-              :disabled="item.disabled"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="29省">
-          <el-select
-            v-model="form.region"
-            multiple
-            collapse-tags
-            placeholder="请选择29省"
-            @change="regionSelect"
-          >
-            <el-option
-              v-for="item in region"
-              :key="item.value"
-              :label="item.label"
-              :value="item.label"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
         <el-form-item style="float: right">
-          <el-button type="primary" @click="onSubmit">查询</el-button>
-          <el-button type="primary" @click="onExport">导出</el-button>
+          <el-button type="primary" :loading="loading" @click="onSubmit">
+            查询
+          </el-button>
+          <el-button type="primary" :loading="loading1" @click="onExport">
+            导出
+          </el-button>
         </el-form-item>
       </el-form>
     </el-card>
     <br />
     <el-card class="box-card">
       <line-charts
+        v-if="tableData.length"
         :list="tableDate"
         xName="date"
         :keys="chartKeys"
@@ -149,7 +102,6 @@
         <el-table-column
           align="center"
           show-overflow-tooltip
-          width="400px"
           prop="date"
           label="29省"
           class-name="nowrap"
@@ -177,7 +129,12 @@
 
 <script>
 // @ is an alias to /src
-import { overlapSearchTitle, selectDate, country } from "@/api/kuyun";
+import {
+  overlapSearchTitle,
+  selectDate,
+  country,
+//   countryExport,
+} from "@/api/kuyun";
 
 import lineCharts from "@/views/Country/components/lineCharts";
 
@@ -186,88 +143,61 @@ export default {
   name: "Channel",
   data() {
     return {
+      searchDate: [],
       selectList: [],
+      rangeTime: [],
       form: {
-        channel: 0,
-        program: "",
-        date: [],
-        region: "",
+        info: 1,
+        org_id: 20,
+        field: [
+          "area_c_1",
+          "abs_epg",
+          "indicators_tv_ratings",
+          "indicators_market_ratings",
+        ],
+        filter: {},
       },
-      tableData: [
-        {
-          abs_epg: "丝路新周刊 [陕西卫视]",
-          area_c_1: "陕西",
-          channel_0: "陕西卫视",
-          indicators_market_ratings: 0.01007562931012467,
-          indicators_market_ratings_rank: 1,
-          indicators_tv_ratings: 0.0015932668968739211,
-          indicators_tv_ratings_rank: 1,
-          is_live: "首播/重播",
-          week: [],
-        },
-      ],
+      tableData: [],
+      loading: false,
+      loading1: false,
     };
   },
   mounted() {
-    // const d = new Date(Date.now() - 86400000);
-    // let Y = d.getFullYear(),
-    //   M = d.getMonth() + 1,
-    //   D = d.getDate();
-    // M > 9 ? "" : (M = "0" + M);
-    // D > 9 ? "" : (D = "0" + D);
-    // this.form.date = [[Y, M, D].join("-"), [Y - 1, M, D].join("-")];
-    this.form.date = ["2021-01-01", "2021-01-02"];
+    const d = new Date(Date.now() - 86400000);
+    let Y = d.getFullYear(),
+      M = d.getMonth() + 1,
+      D = d.getDate();
+    M > 9 ? "" : (M = "0" + M);
+    D > 9 ? "" : (D = "0" + D);
+    this.form.date = [[Y - 1, M, D].join("-"),[Y, M, D].join("-")];
+    this.loading = true;
     selectDate({
       date: this.form.date,
       key: "abs_epg,channel_0,time,week,area_c_1",
       org_id: 20,
-    }).then(r => {
-      console.log(r, "---");
-    });
-    country({
-      date: ["2021-01-01", "2021-01-08"],
-      filter: {
-        week: [1, 2, 3, 4, 5, 6, 7],
-        channel_0: [5],
-        area_c_1: ["area_c_320000", "area_c_640000"],
-        abs_epg: [10231],
-        time: ["0000_2400"],
-      },
-      field: [
-        "area_c_1",
-        "abs_epg",
-        "indicators_tv_ratings",
-        "indicators_market_ratings",
-      ],
-      info: 1,
-      org_id: 20,
-    }).then(r => {
-      console.log(r);
-    });
+    })
+      .then(r => {
+        this.searchDate = r || [];
+        for (let i = 0; i < this.searchDate.length; i++) {
+          const v = this.searchDate[i];
+          this.form.filter[v.id] = [v.list[0].key + ""];
+        }
+        country(this.form)
+          .then(r => {
+            this.tableData = r || [];
+            this.loading = false;
+          })
+          .catch(() => {
+            this.loading = false;
+          });
+      })
+      .catch(() => {
+        this.loading = false;
+      });
   },
   computed: {
-    channelList() {
-      return config.channelNameList;
-    },
-    region() {
-      let reg = config.region || [],
-        li = [];
-      for (let i = 0; i < reg.length; i++) {
-        const v = reg[i];
-        if (v.label === "行业分城") {
-          for (let o = 0; o < v.options.length; o++) {
-            const item = v.options[o];
-            if (item.label !== "29省") continue;
-            li = item.options || [];
-            break;
-          }
-          break;
-        }
-      }
-
-      return li;
-    },
     tableDate() {
+      if (!this.tableData.length) return [];
       const obj = {};
 
       const b = [
@@ -282,8 +212,8 @@ export default {
       ];
       for (let i = 0; i < this.tableData.length; i++) {
         const v = this.tableData[i];
-        if (typeof obj[v.area_c_1] !== "object") obj[v.area_c_1] = {};
-        obj[v.area_c_1][v.area_c_1] = v;
+        if (typeof obj[v.abs_epg] !== "object") obj[v.abs_epg] = [];
+        obj[v.abs_epg][v.area_c_1] = v;
       }
       let li = [],
         keys = Object.keys(obj),
@@ -318,12 +248,12 @@ export default {
           },
         ];
         const v = this.tableData[i];
-        if (obj[v.area_c_1] === true) continue;
-        obj[v.area_c_1] = true;
+        if (obj[v.abs_epg] === true) continue;
+        obj[v.abs_epg] = true;
         li.push(
           ...b.map(k => {
-            k.key = v.area_c_1 + "_" + k.key;
-            k.name = v.area_c_1 + "_" + k.name;
+            k.key = v.abs_epg + "_" + k.key;
+            k.name = v.abs_epg + "_" + k.name;
             return k;
           })
         );
@@ -345,45 +275,27 @@ export default {
           },
         ];
         const v = this.tableData[i];
-        if (obj[v.area_c_1] === true) continue;
-        obj[v.area_c_1] = true;
+        if (obj[v.abs_epg] === true) continue;
+        obj[v.abs_epg] = true;
         li.push({
-          name: v.area_c_1,
+          name: v.abs_epg,
           children: b.map(k => {
-            k.key = v.area_c_1 + "_" + k.key;
+            k.key = v.abs_epg + "_" + k.key;
             return k;
           }),
         });
       }
       return li;
     },
-    weeks() {
-      return [
-        {
-          label: "全部",
-          value: 0,
-        },
-        ...config.weeks,
-      ];
-    },
-    cycle() {
-      return config.cycle;
-    },
   },
   methods: {
-    timeSelect(a) {
+    timeSelect(a, key, all) {
+      let ngx = new RegExp(all + ",?", "g");
       let end = (a || [])[(a || []).length - 1],
-        s = this.form.rangeTimeRange.join(",") + ",";
-      for (let i = 0; i < this.form.rangeTimeRange.length; i++) {
-        const v = this.form.rangeTimeRange[i];
-        if (end === v) return;
-      }
-
-      if (/0000_2400/.test(s)) this.form.rangeTimeRange = [];
-      if (end === "0000_2400") this.form.rangeTimeRange = ["0000_2400"];
-      else if (end) this.form.rangeTimeRange.push(end);
-      else this.form.rangeTimeRange = [];
-      this.form.rangeTime = [];
+        s = (a || []).join(",").replace(ngx, "");
+      if (end !== all) this.form.filter[key] = s ? s.split(",") : [];
+      else this.form.filter[key] = [all];
+      this.rangeTime = [];
     },
     querySearchAsync(queryString) {
       if (!queryString) {
@@ -394,88 +306,85 @@ export default {
         this.selectList = r || [];
       });
     },
-    onExport() {},
+    onExport() {
+      this.loading1 = true;
+      let form = JSON.parse(JSON.stringify(this.form));
+      if (this.rangeTime.length) {
+        form.filter.time = this.rangeTime;
+      }
+      let keys = Object.keys(this.form.filter);
+      form.filter.time = ["0000_2400"];
+      for (let i = 0; i < keys.length; i++) {
+        const v = keys[i];
+        if (v === "time") continue;
+        for (let o = 0; o < this.searchDate.length; o++) {
+          const item = this.searchDate[o];
+          if (v === item.key) {
+            form.filter[v] = item.list.map(v => v.key);
+            break;
+          }
+        }
+      }
+      fetch(
+        config.kuyunApi + "/kuyun/api/evaluation/eye/download/performance/epgkpi/download",
+        {
+          method: "post",
+          responseType: "blob",
+          body: JSON.stringify(form),
+        }
+      )
+        .then(res => {
+          return res.blob();
+        })
+        .then(blob => {
+          new Blob([blob]);
+          let fileName = "抽象节目剧目分地区收视（全国）.csv";
+          var link = document.createElement("a");
+          link.href = window.URL.createObjectURL(blob);
+          link.download = fileName;
+          link.click();
+          window.URL.revokeObjectURL(link.href);
+          this.loading1 = false;
+        });
+    },
     disabledDate(time) {
       return time.getTime() > Date.now() - 86400000;
     },
     onSubmit() {
-      console.log(this.form, this.region);
-      let o = {
-        全部: [1, 2, 3, 4, 5, 6, 7],
-        星期一: 1,
-        星期二: 2,
-        星期三: 3,
-        星期四: 4,
-        星期五: 5,
-        星期六: 6,
-        星期日: 7,
-      };
-      let week = [],
-        channel = [],
-        channelT = this.form.channel.join(",") + ",",
-        region = [],
-        regionT = this.form.region.join(",") + ",";
-      (this.form.week || []).map(v => {
-        if (o[v].length) week = o[v];
-        else week.push(o[v]);
-      });
-      config.channelNameList.map(v => {
-        let nex = new RegExp(v.label + ",");
-        if (nex.test(channelT)) channel.push(v.value);
-      });
-      this.region.map(v => {
-        let nex = new RegExp(v.label + ",");
-        if (nex.test(regionT)) region.push(v.value);
-      });
-
-      const p = {
-        date: this.form.date || [],
-        info: 1,
-        org_id: 20,
-        field: [
-          "area_c_1",
-          "abs_epg",
-          "indicators_tv_ratings",
-          "indicators_market_ratings",
-        ],
-        filter: {
-          week,
-          channel_0: channel,
-          area_c_1: region,
-          abs_epg: [686508],
-          time: ["1200_1400"],
-        },
-      };
-      console.log(p);
+      this.loading = true;
+      let form = JSON.parse(JSON.stringify(this.form));
+      if (this.rangeTime.length) {
+        form.filter.time = this.rangeTime;
+      }
+      let keys = Object.keys(this.form.filter);
+      for (let i = 0; i < keys.length; i++) {
+        const v = keys[i];
+        if (form.filter[v] != -1) continue;
+        for (let o = 0; o < this.searchDate.length; o++) {
+          const item = this.searchDate[o];
+          if (v === item.key) {
+            form.filter[v] = item.list.map(v => v.key);
+            break;
+          }
+        }
+      }
+      country(form)
+        .then(r => {
+          this.tableData = r || [];
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
     matrer(row, column, cellValue) {
       return (cellValue * 100).toFixed(4) - 0 + "%";
     },
-    weekSelect(a) {
-      let li = [],
-        end = a[a.length - 1];
-      for (let i = 0; i < (a || []).length; i++) {
-        const v = (a || [])[i];
-        if (v !== "全部") li.push(v);
-      }
-      if (end == "全部") li = ["全部"];
-      this.selectAll(li, "week", 0);
-    },
-    channelSelect(a) {
-      this.selectAll(a, "channel", 0);
-    },
-    regionSelect(a) {
-      this.selectAll(a, "region", -1);
-    },
-    selectAll(a, key, val) {
-      if (!a.length) return;
-      let select = a[a.length - 1];
-      if (select === val) this.form[key] = [val];
-      else
-        this.form[key] = (a.join(",") + ",")
-          .replace(val + ",", "")
-          .replace(/,$/, "")
-          .split(",");
+    select(v, se) {
+      if (v.id === "time") {
+        this.timeSelect(se, v.id, "0000_2400");
+        this.rangeTime = [];
+      } else this.timeSelect(se, v.id, "-1");
     },
   },
   components: { lineCharts },

src/views/AbstractProgram/AbstractProgram.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="AbstractProgram">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>抽象节目剧目排行</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card class="box-card">
+      <el-form
+        ref="form"
+        :model="form"
+        size="small"
+        :inline="true"
+        label-width="120px"
+        class="demo-form-inline"
+      >
+        <el-form-item label="日期">
+          <el-date-picker
+            v-model="form.date"
+            type="daterange"
+            :disabled-date="time => disabledDate(time)"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </el-form-item>
+
+        <el-form-item :label="v.name" v-for="(v, i) in searchDate" :key="i">
+          <el-select
+            v-model="form.filter[v.key]"
+            :placeholder="'请选择' + v.name"
+            multiple
+            collapse-tags
+            @change="se => select(v, se)"
+          >
+            <el-option key="-1" v-if="v.id !== 'time'" label="全选" value="-1">
+            </el-option>
+            <el-option
+              v-for="item in v.list || []"
+              :key="item.id + ''"
+              :label="item.name"
+              :value="item.key + ''"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间">
+          <el-time-picker
+            v-model="rangeTime"
+            is-range
+            format="HH:mm"
+            range-separator="-"
+            @change="() => (form.filter.time = [])"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          >
+          </el-time-picker>
+        </el-form-item>
+        <el-form-item style="float: right">
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+          <el-button type="primary" @click="onExport">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <br />
+    <el-card class="box-card">
+      <line-charts
+        :list="tableData"
+        v-if="tableData.length"
+        xName="abs_epg"
+        :keys="chartKeys"
+      ></line-charts>
+      <el-table
+        :data="tableData"
+        :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
+        style="width: 100%"
+      >
+        <el-table-column
+          align="center"
+          show-overflow-tooltip
+          width="400px"
+          prop="abs_epg"
+          label="抽象节目"
+          class-name="nowrap"
+        />
+        <el-table-column
+          align="center"
+          prop="time"
+          label="时段"
+        />
+        <el-table-column
+          prop="indicators_market_ratings"
+          :formatter="matrer"
+          label="市占率"
+        />
+        <el-table-column
+          prop="indicators_tv_ratings"
+          :formatter="matrer"
+          label="直播关注度"
+        />
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { selectDate, country } from "@/api/kuyun";
+
+import lineCharts from "@/views/Country/components/lineCharts";
+
+// import config from "@/config/index";
+export default {
+  name: "Channel",
+  data() {
+    return {
+      searchDate: [],
+      rangeTime: [],
+      chartKeys: [
+        {
+          key: "indicators_market_ratings",
+          name: "市占率",
+        },
+        {
+          key: "indicators_tv_ratings",
+          name: "直播关注度",
+        },
+      ],
+      form: {
+        filter: {},
+        date: [
+          new Date(new Date() - 86400000),
+          new Date(new Date() - 86400000),
+        ],
+        field: [
+          "abs_epg",
+          "time",
+          "indicators_market_ratings",
+          "indicators_tv_ratings",
+        ],
+        info: 1,
+        org_id: 20,
+      },
+      tableData: [],
+    };
+  },
+  mounted() {
+    const d = new Date(Date.now() - 86400000);
+    let Y = d.getFullYear(),
+      M = d.getMonth() + 1,
+      D = d.getDate();
+    M > 9 ? "" : (M = "0" + M);
+    D > 9 ? "" : (D = "0" + D);
+    this.form.date = [[Y - 1, M, D].join("-"), [Y, M, D].join("-")];
+    selectDate({
+      date: this.form.date,
+      key: "ca_types,channel_2,area_t_1,time",
+      org_id: 20,
+    }).then(r => {
+      this.searchDate = r || [];
+      for (let i = 0; i < this.searchDate.length; i++) {
+        const v = this.searchDate[i];
+        this.form.filter[v.id] = [v.list[0].key + ""];
+      }
+      country(this.form)
+        .then(r => {
+          this.tableData = r || [];
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    });
+  },
+  computed: {},
+  methods: {
+    onExport() {},
+    disabledDate(time) {
+      return time.getTime() > Date.now() - 86400000;
+    },
+    onSubmit() {
+      this.loading = true;
+      let form = JSON.parse(JSON.stringify(this.form));
+      if (this.rangeTime.length) {
+        form.filter.time = this.rangeTime;
+      }
+      let keys = Object.keys(this.form.filter);
+      for (let i = 0; i < keys.length; i++) {
+        const v = keys[i];
+        if (form.filter[v] != -1) continue;
+        for (let o = 0; o < this.searchDate.length; o++) {
+          const item = this.searchDate[o];
+          if (v === item.key) {
+            form.filter[v] = item.list.map(v => v.key);
+            break;
+          }
+        }
+      }
+      country(form)
+        .then(r => {
+          this.tableData = r || [];
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    matrer(row, column, cellValue) {
+      if (typeof cellValue !== "number") return cellValue;
+      return (cellValue * 100).toFixed(4) - 0 + "%";
+    },
+    selectAll(a, key, val) {
+      if (!a.length) return;
+      let select = a[a.length - 1];
+      if (select === val) this.form[key] = [val];
+      else
+        this.form[key] = (a.join(",") + ",")
+          .replace(val + ",", "")
+          .replace(/,$/, "")
+          .split(",");
+    },
+
+    select(v, se) {
+      if (v.id === "time") {
+        this.timeSelect(se, v.id, "0000_2400");
+        this.rangeTime = [];
+      } else this.timeSelect(se, v.id, "-1");
+    },
+
+    timeSelect(a, key, all) {
+      let ngx = new RegExp(all + ",?", "g");
+      let end = (a || [])[(a || []).length - 1],
+        s = (a || []).join(",").replace(ngx, "");
+      if (end !== all) this.form.filter[key] = s ? s.split(",") : [];
+      else this.form.filter[key] = [all];
+      this.rangeTime = [];
+    },
+  },
+  components: { lineCharts },
+};
+</script>
+
+<style>
+.AbstractProgram {
+  margin: 10px 15px;
+}
+.AbstractProgram .nowrap .cell {
+  white-space: nowrap;
+}
+</style>

src/views/Country/components/lineCharts.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-// import * as echarts from "echarts";
+// import * as ethis.charts from "ethis.charts";
 import config from "@/config/index";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
@@ -22,10 +22,9 @@ echarts.use([
   LineChart,
   CanvasRenderer,
   LegendComponent,
-  DataZoomComponent
+  DataZoomComponent,
 ]);
 
-let chart = undefined;
 export default {
   name: "countryLineChart",
   props: ["list", "keys", "xName"],
@@ -77,9 +76,9 @@ export default {
     },
     createChart() {
       if (!this.$refs.countryLineChart) return;
-      chart = echarts.init(this.$refs.countryLineChart);
+      this.chart = echarts.init(this.$refs.countryLineChart);
       let chartData = this.formatte(this.list);
-      chart.resize({
+      this.chart.resize({
         height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
       });
       var option = {
@@ -145,14 +144,14 @@ export default {
         }),
       };
 
-      option && chart.setOption(option);
+      option && this.chart.setOption(option);
     },
   },
   mounted() {
     this.createChart();
   },
   beforeUnmount: function() {
-    chart.dispose();
+    this.chart.dispose();
   },
   components: {},
 };