封装渲染函数，修改所有图表组件

README.md

@@ -1,18 +1,18 @@
 ## 一、项目描述
 
 - [**React 版本请点击这里查看，全新界面超级好看！！！(o ﾟ v ﾟ)ノ**](https://gitee.com/MTrun/react-big-screen)
-- 一个基于 vue、datav、Echart 框架的 " **数据大屏项目** "，通过 vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。
+- 一个基于 Vue、Datav、Echart 框架的 " **数据大屏项目** "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。
 - 项目需要全屏展示（按 F11）。
-- 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用**按需引入**。
+- 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用 **按需引入**。
 - 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
-- 项目环境：vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。
+- 项目环境：Vue-cli-3.0、Webpack-4.0、Npm-6.13、Node-v12.16。
 - 请拉取 master 分支的代码，其余是开发分支。
 
 友情链接：
 
 1.  [Vue 官方文档](https://cn.vuejs.org/v2/guide/instance.html)
 2.  [DataV 官方文档](http://datav.jiaminghi.com/guide/)
-3.  [echarts 实例](https://echarts.apache.org/examples/zh/index.html)，[echarts API文档](https://echarts.apache.org/zh/api.html#echarts)
+3.  [echarts 实例](https://echarts.apache.org/examples/zh/index.html)，[echarts API 文档](https://echarts.apache.org/zh/api.html#echarts)
 4.  [项目 gitee 地址（国内速度快）](https://gitee.com/MTrun/big-screen-vue-datav)
 
 项目展示
@@ -20,89 +20,91 @@
 
 ## 二、主要文件介绍
 
-| 文件                | 作用/功能                                           |
+| 文件                | 作用/功能                                                              |
-| ------------------- | --------------------------------------------------- |
+| ------------------- | --------------------------------------------------------------------- |
-| main.js             | 主目录文件，引入Echart/DataV等文件                   |
+| main.js             | 主目录文件，引入 Echart/DataV 等文件                                    |
-| utils               | 工具函数与 mixins 函数等                            |
+| utils               | 工具函数与 mixins 函数等                                                |
-| views/ index.vue    | 项目主结构                                          |
+| views/ index.vue    | 项目主结构                                                             |
-| views/其余文件      | 界面各个区域组件（按照位置来命名）ajax 接口请求位置 |
+| views/其余文件       | 界面各个区域组件（按照位置来命名）                                       |
-| assets              | 静态资源目录，放置 logo 与背景图片                  |
+| assets              | 静态资源目录，放置 logo 与背景图片                                       |
-| assets / style.scss | 通用 CSS 文件，全局项目快捷样式调节                 |
+| assets / style.scss | 通用 CSS 文件，全局项目快捷样式调节                                      |
-| assets / index.scss | Index 界面的 CSS 文件                               |
+| assets / index.scss | Index 界面的 CSS 文件                                                  |
-| components/echart   | 所有 echart 图表（按照位置来命名）                  |
+| components/echart   | 所有 echart 图表（按照位置来命名）                                      |
-| common/flexible.js  | flexible 插件代码（适配屏幕尺寸，定制化修改）       |
+| common/...          | 全局封装的 ECharts 和 flexible 插件代码（适配屏幕尺寸，可定制化修改）     |
 
 ## 三、使用介绍
 
 ### 启动项目
 
-需要提前安装好`nodejs`与`npm`,下载项目后在项目主目录下运行`npm/cnpm install`拉取依赖包，然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。   
+需要提前安装好 `nodejs` 与 `npm`,下载项目后在项目主目录下运行 `npm/cnpm install` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。如果编译项目的时候提示没有 DataV 框架的依赖，输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。
 
-### 请求数据
+### 封装组件渲染图表
 
-   现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置，在 views/xx.vue 文件里进行前后端数据请求。
+所有的 ECharts 图表都是基于 `common/echart/index.vue` 封装组件创建的，已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小。在监听窗口小大的模块，使用了节流函数来节约浏览器性能。
 
-- axios 的 main.js 配置参考范例（因人而异）
+项目配置了默认的 ECharts 图表样式，文件地址：`common/echart/theme.json`。
 
-```js
+封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加/删除。
-import axios from 'axios';
 
-//把方法放到vue的原型上，这样就可以全局使用了
+参数名称              | 类型      | 作用/功能                      |
-Vue.prototype.$http = axios.create({
+| -------------------| --------- | ------------------------------|
-  //设置20秒超时时间
+| id                 | String    | 唯一 id，渲染图表的节点         |
-  timeout: 20000,
+| className          | String    | class样式名称                  |
-  baseURL: 'http://172.0.0.1:80080', //这里写后端地址
+| options            | Object    | ECharts 配置                   |
-});
+| height             | String    | 图表高度                       |
-```
+| width              | String    | 图表宽度                       |
 
-- 在 vue 页面中调用 axios 方法并通过 props 传给 echarts 图表子组件
+### 动态渲染图表
 
-```js
+动态渲染图表案例为 `components` 目录下各个图表组件，index 文件负责数据获取和处理，chart 文件负责监听和数据渲染。
+
+chart 文件的主要逻辑为：
+
+```html
+<template>
+  <div>
+    <Echart :options="options" id="id" height="height" width="width" ></Echart>
+  </div>
+</template>
+
+<script>
+  // 引入封装组件
+import Echart from '@/common/echart'
 export default {
-  data() {
+  // 定义配置数据
-  	ListDataSelf:[]
+  data(){ return { options: {}}},
+  // 声明组件
+  components: { Echart},
+  // 接收数据
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
   },
-  mounted() {
+  // 进行监听，也可以使用 computed 计算属性实现此功能
-   this.fetchList(); //获取数据
+  watch: {
-  },
+    cdata: {
-  methods: {
+      handler (newData) {
-	async fetchList(){
+        this.options ={
-	  const { code, listData } = await this.$http.get("xx/xx/xx");
+          // 这里编写 ECharts 配置
-	  if(code === 200){
+        }
-		 this.ListDataSelf = listData;
+      },
-	  }
+      // 立即监听
-	}
+      immediate: true,
+      // 深度监听
+      deep: true
+    }
   }
- }
+};
+</script>
 ```
 
-###  动态渲染图表
+### 复用图表组件
 
-   在`components/echart`下的文件，比如`drawPie()`是渲染函数，`echartData`是需要动态渲染的数据，当外界通过`props`传入新数据，我们可以使用`watch()`方法去监听，一但数据变化就调用`this.drawPie()`并触发内部的`.setOption`函数，重新渲染一次图表。
+复用图表组件案例为中间部分的 `任务通过率与任务达标率` 模块，两个图表类似，区别在于颜色和主要渲染数据。只需要传入对应的唯一 id 和样式，然后在复用的组件 `components/echart/center/centerChartRate` 里进行接收并在对应位置赋值即可。
 
-```js
+如：在调用处 `views/center.vue` 里去定义好数据并传入组件（项目里的所有 `id` 都不能重复!!!）
-//这里是子组件内部
-
-props: ["listData"],
-watch: {
-  listData(newValue) {
-     this.echartData= newValue;
-     this.drawPie();
-   },
-  },
-methods: {
-  drawPie() {
-  	.....
-  	'渲染节点名称'.setOption(option);
-  }
- }
-```
-
-###  复用图表组件
-
-   因为 Echart 图表是根据`id/class`去获取 Dom 节点并进行渲染的，所以我们只要传入唯一的 id 值与需要的数据就可以进行复用。如中间部分的`任务通过率与任务达标率`组件就是采用复用的方式。
-
-如：在调用处`views/center.vue`里去定义好数据并传入组件（项目里的所有`id`都不能重复!!!）
 
 ```js
 //组件调用
@@ -135,12 +137,10 @@ data() {
 }
 ```
 
-然后在复用的组件`components/echart/center/centerChartRate`里进行接收并在用到的地方赋值。
-
 ### 更换边框
 
-   边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
+边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
-   如：
+如：
 
 ```html
 <dv-border-box-1></dv-border-box-1>
@@ -150,15 +150,15 @@ data() {
 
 ### 更换图表
 
-   直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
+直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
 
-### Mixins 注入的
+### Mixins 解决自适应适配功能
 
-   使用 mixins 注入解决了图表重复书写响应式适配的代码，如果要更换(新增)图形，需要将`echarts.init()`函数赋值给`this.chart`，然后 mixins 才会自动帮你注入响应式功能。
+使用 mixins 注入解决了界面大小变动图表自适应适配的功能，函数在 `utils/resizeMixins.js` 中，应用在 `common/echart/index.vue` 的封装渲染组件，主要是对 `this.chart` 进行了功能注入。
 
 ### 屏幕适配
 
-   本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点，
+本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点，
 
 ```js
 // flexible文件位置: `common/flexible.js`,修改部分如下
@@ -177,13 +177,31 @@ function refreshRem() {
 }
 ```
 
+### 请求数据
+
+现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置。
+
+- axios 的 main.js 配置参考范例（因人而异）
+
+```js
+import axios from 'axios';
+
+//把方法放到vue的原型上，这样就可以全局使用了
+Vue.prototype.$http = axios.create({
+  //设置20秒超时时间
+  timeout: 20000,
+  baseURL: 'http://172.0.0.1:80080', //这里写后端地址
+});
+```
+
 ## 四、更新情况
 
 1. 增加了 Echart 组件复用的功能，如：中间任务达标率的两个百分比图使用的是同一个组件。
 2. 修复了头部右侧的图案条不对称的问题。
 3. 修复屏幕适配问题，更换了所有的尺寸单位，统一使用 rem。
 4. 使用 Mixins 注入图表响应式代码。
-5. vue-awesome 改成按需引入的方式
+5. vue-awesome 改成按需引入的方式。
+6. 封装渲染函数，抽离了数据使逻辑更加清晰。
 
 ## 五、其余
 

src/common/echart/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import echartMixins from "@/utils/resizeMixins";
-this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
+
 export default {
-  name: 'Echarts',
+  name: 'echart',
   mixins: [echartMixins],
   props: {
     className: {
@@ -28,30 +28,31 @@ export default {
     },
     options: {
       type: Object,
-      default: undefined
+      default: ()=>({})
     }
   },
-  data() {
+  data () {
     return {
       chart: null
     }
   },
   watch: {
     options: {
-      handler(options) {
+      handler (options) {
         // 设置true清空echart缓存
         this.chart.setOption(options, true)
       },
       deep: true
     }
   },
-  mounted() {
+  mounted () {
-    this.initChart()
+    this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
+    this.initChart();
   },
   methods: {
-    initChart() {
+    initChart () {
       // 初始化echart
-      this.chart = echarts.init(this.$el, 'tdTheme')
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
       this.chart.setOption(this.options, true)
     }
   }

src/components/echart/bottom/bottomLeftChart.vue

@@ -1,266 +0,0 @@
-<template>
-  <div>
-    <div id="bottomLeftChart" style="width:11.25rem;height:6.25rem;"></div>
-  </div>
-</template>
-
-<script>
-import echartMixins from "@/utils/resizeMixins";
-export default {
-  data() {
-    return {
-      chart: null
-    };
-  },
-  mixins: [echartMixins],
-  mounted() {
-    this.draw();
-  },
-  methods: {
-    draw() {
-      // 基于准备好的dom，初始化echarts实例
-      this.chart = this.$echarts.init(document.getElementById("bottomLeftChart"));
-      //  ----------------------------------------------------------------
-      let category = [
-        "市区",
-        "万州",
-        "江北",
-        "南岸",
-        "北碚",
-        "綦南",
-        "长寿",
-        "永川",
-        "璧山",
-        "江津",
-        "城口",
-        "大足",
-        "垫江",
-        "丰都",
-        "奉节",
-        "合川",
-        "江津区",
-        "开州",
-        "南川",
-        "彭水",
-        "黔江",
-        "石柱",
-        "铜梁",
-        "潼南",
-        "巫山",
-        "巫溪",
-        "武隆",
-        "秀山",
-        "酉阳",
-        "云阳",
-        "忠县",
-        "川东",
-        "检修"
-      ];
-      let lineData = [
-        18092,
-        20728,
-        24045,
-        28348,
-        32808,
-        36097,
-        39867,
-        44715,
-        48444,
-        50415,
-        56061,
-        62677,
-        59521,
-        67560,
-        18092,
-        20728,
-        24045,
-        28348,
-        32808,
-        36097,
-        39867,
-        44715,
-        48444,
-        50415,
-        36097,
-        39867,
-        44715,
-        48444,
-        50415,
-        50061,
-        32677,
-        49521,
-        32808
-      ];
-      let barData = [
-        4600,
-        5000,
-        5500,
-        6500,
-        7500,
-        8500,
-        9900,
-        12500,
-        14000,
-        21500,
-        23200,
-        24450,
-        25250,
-        33300,
-        4600,
-        5000,
-        5500,
-        6500,
-        7500,
-        8500,
-        9900,
-        22500,
-        14000,
-        21500,
-        8500,
-        9900,
-        12500,
-        14000,
-        21500,
-        23200,
-        24450,
-        25250,
-        7500
-      ];
-      let rateData = [];
-      for (let i = 0; i < 33; i++) {
-        let rate = barData[i] / lineData[i];
-        rateData[i] = rate.toFixed(2);
-      }
-
-      let option = {
-        title: {
-          text: "",
-          x: "center",
-          y: 0,
-          textStyle: {
-            color: "#B4B4B4",
-            fontSize: 16,
-            fontWeight: "normal"
-          }
-        },
-        tooltip: {
-          trigger: "axis",
-          backgroundColor: "rgba(255,255,255,0.1)",
-          axisPointer: {
-            type: "shadow",
-            label: {
-              show: true,
-              backgroundColor: "#7B7DDC"
-            }
-          }
-        },
-        legend: {
-          data: ["已贯通", "计划贯通", "贯通率"],
-          textStyle: {
-            color: "#B4B4B4"
-          },
-          top: "0%"
-        },
-        grid: {
-          x: "8%",
-          width: "88%",
-          y: "4%"
-        },
-        xAxis: {
-          data: category,
-          axisLine: {
-            lineStyle: {
-              color: "#B4B4B4"
-            }
-          },
-          axisTick: {
-            show: false
-          }
-        },
-        yAxis: [
-          {
-            splitLine: { show: false },
-            axisLine: {
-              lineStyle: {
-                color: "#B4B4B4"
-              }
-            },
-
-            axisLabel: {
-              formatter: "{value} "
-            }
-          },
-          {
-            splitLine: { show: false },
-            axisLine: {
-              lineStyle: {
-                color: "#B4B4B4"
-              }
-            },
-            axisLabel: {
-              formatter: "{value} "
-            }
-          }
-        ],
-        series: [
-          {
-            name: "贯通率",
-            type: "line",
-            smooth: true,
-            showAllSymbol: true,
-            symbol: "emptyCircle",
-            symbolSize: 8,
-            yAxisIndex: 1,
-            itemStyle: {
-              normal: {
-                color: "#F02FC2"
-              }
-            },
-            data: rateData
-          },
-
-          {
-            name: "已贯通",
-            type: "bar",
-            barWidth: 10,
-            itemStyle: {
-              normal: {
-                barBorderRadius: 5,
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#956FD4" },
-                  { offset: 1, color: "#3EACE5" }
-                ])
-              }
-            },
-            data: barData
-          },
-
-          {
-            name: "计划贯通",
-            type: "bar",
-            barGap: "-100%",
-            barWidth: 10,
-            itemStyle: {
-              normal: {
-                barBorderRadius: 5,
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "rgba(156,107,211,0.8)" },
-                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
-                  { offset: 1, color: "rgba(156,107,211,0.2)" }
-                ])
-              }
-            },
-            z: -12,
-
-            data: lineData
-          }
-        ]
-      };
-      this.chart.setOption(option);
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/components/echart/bottom/bottomLeftChart/chart.vue

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <!-- 年度开工率 -->
+    <Echart
+      :options="options"
+      id="bottomLeftChart"
+      height="6.25rem"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        this.options = {
+          title: {
+            text: "",
+          },
+          tooltip: {
+            trigger: "axis",
+            backgroundColor: "rgba(255,255,255,0.1)",
+            axisPointer: {
+              type: "shadow",
+              label: {
+                show: true,
+                backgroundColor: "#7B7DDC"
+              }
+            }
+          },
+          legend: {
+            data: ["已贯通", "计划贯通", "贯通率"],
+            textStyle: {
+              color: "#B4B4B4"
+            },
+            top: "0%"
+          },
+          grid: {
+            x: "8%",
+            width: "88%",
+            y: "4%"
+          },
+          xAxis: {
+            data: newData.category,
+            axisLine: {
+              lineStyle: {
+                color: "#B4B4B4"
+              }
+            },
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: [
+            {
+              splitLine: { show: false },
+              axisLine: {
+                lineStyle: {
+                  color: "#B4B4B4"
+                }
+              },
+
+              axisLabel: {
+                formatter: "{value} "
+              }
+            },
+            {
+              splitLine: { show: false },
+              axisLine: {
+                lineStyle: {
+                  color: "#B4B4B4"
+                }
+              },
+              axisLabel: {
+                formatter: "{value} "
+              }
+            }
+          ],
+          series: [
+            {
+              name: "贯通率",
+              type: "line",
+              smooth: true,
+              showAllSymbol: true,
+              symbol: "emptyCircle",
+              symbolSize: 8,
+              yAxisIndex: 1,
+              itemStyle: {
+                normal: {
+                  color: "#F02FC2"
+                }
+              },
+              data: newData.rateData
+            },
+            {
+              name: "已贯通",
+              type: "bar",
+              barWidth: 10,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 5,
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#956FD4" },
+                    { offset: 1, color: "#3EACE5" }
+                  ])
+                }
+              },
+              data: newData.barData
+            },
+            {
+              name: "计划贯通",
+              type: "bar",
+              barGap: "-100%",
+              barWidth: 10,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 5,
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "rgba(156,107,211,0.8)" },
+                    { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                    { offset: 1, color: "rgba(156,107,211,0.2)" }
+                  ])
+                }
+              },
+              z: -12,
+              data: newData.lineData
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/bottom/bottomLeftChart/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  data () {
+    return {
+      cdata: {
+        category: [
+          "市区",
+          "万州",
+          "江北",
+          "南岸",
+          "北碚",
+          "綦南",
+          "长寿",
+          "永川",
+          "璧山",
+          "江津",
+          "城口",
+          "大足",
+          "垫江",
+          "丰都",
+          "奉节",
+          "合川",
+          "江津区",
+          "开州",
+          "南川",
+          "彭水",
+          "黔江",
+          "石柱",
+          "铜梁",
+          "潼南",
+          "巫山",
+          "巫溪",
+          "武隆",
+          "秀山",
+          "酉阳",
+          "云阳",
+          "忠县",
+          "川东",
+          "检修"
+        ],
+        lineData: [
+          18092,
+          20728,
+          24045,
+          28348,
+          32808,
+          36097,
+          39867,
+          44715,
+          48444,
+          50415,
+          56061,
+          62677,
+          59521,
+          67560,
+          18092,
+          20728,
+          24045,
+          28348,
+          32808,
+          36097,
+          39867,
+          44715,
+          48444,
+          50415,
+          36097,
+          39867,
+          44715,
+          48444,
+          50415,
+          50061,
+          32677,
+          49521,
+          32808
+        ],
+        barData: [
+          4600,
+          5000,
+          5500,
+          6500,
+          7500,
+          8500,
+          9900,
+          12500,
+          14000,
+          21500,
+          23200,
+          24450,
+          25250,
+          33300,
+          4600,
+          5000,
+          5500,
+          6500,
+          7500,
+          8500,
+          9900,
+          22500,
+          14000,
+          21500,
+          8500,
+          9900,
+          12500,
+          14000,
+          21500,
+          23200,
+          24450,
+          25250,
+          7500
+        ],
+        rateData: []
+      }
+    };
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.setData();
+  },
+  methods: {
+    // 根据自己的业务情况修改
+    setData () {
+      for (let i = 0; i < this.cdata.barData.length -1; i++) {
+        let rate = this.cdata.barData[i] / this.cdata.lineData[i];
+        this.cdata.rateData.push(rate.toFixed(2));
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/bottom/bottomRightChart.vue

@@ -1,403 +0,0 @@
-<template>
-  <div>
-    <div id="bottomRightChart" style="width:11.25rem;height:6rem;"></div>
-  </div>
-</template>
-
-<script>
-import echartMixins from "@/utils/resizeMixins";
-
-export default {
-  data() {
-    return {
-      chart: null
-    };
-  },
-  mounted() {
-    this.draw();
-    this.charTimg();
-  },
-  mixins: [echartMixins],
-  methods: {
-    charTimg() {
-      setInterval(() => {
-        this.draw();
-      }, 6000);
-    },
-    draw() {
-      // 基于准备好的dom，初始化echarts实例
-      this.chart = this.$echarts.init(document.getElementById("bottomRightChart"));
-      //  ----------------------------------------------------------------
-      // 数据
-      let dateBase = new Date();
-      let year = dateBase.getFullYear();
-      let dottedBase = +dateBase + 1000 * 3600 * 24;
-      let weekCategory = [];
-
-      let radarData = [];
-      let radarDataAvg = [];
-      let maxData = 12000;
-      let weekMaxData = [];
-      let weekLineData = [];
-
-      // 周数据
-      for (let i = 0; i < 7; i++) {
-        // 日期
-        var date = new Date((dottedBase -= 1000 * 3600 * 24));
-        weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
-
-        // 折线图数据
-        weekMaxData.push(maxData);
-        var distance = Math.round(Math.random() * 11000 + 500);
-        weekLineData.push(distance);
-
-        // 雷达图数据
-        // 我的指标
-        var averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
-        var maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
-        var hour = +(distance / 1000 / averageSpeed).toFixed(1);
-        var radarDayData = [distance, averageSpeed, maxSpeed, hour];
-        radarData.unshift(radarDayData);
-
-        // 平均指标
-        var distanceAvg = Math.round(Math.random() * 8000 + 4000);
-        var averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
-        var maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
-        var hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
-        var radarDayDataAvg = [
-          distanceAvg,
-          averageSpeedAvg,
-          maxSpeedAvg,
-          hourAvg
-        ];
-        radarDataAvg.unshift(radarDayDataAvg);
-      }
-
-      // 颜色设置
-      let color = {
-        linearYtoG: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 1,
-          y2: 1,
-          colorStops: [
-            {
-              offset: 0,
-              color: "#f5b44d"
-            },
-            {
-              offset: 1,
-              color: "#28f8de"
-            }
-          ]
-        },
-        linearGtoB: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 1,
-          y2: 0,
-          colorStops: [
-            {
-              offset: 0,
-              color: "#43dfa2"
-            },
-            {
-              offset: 1,
-              color: "#28f8de"
-            }
-          ]
-        },
-        linearBtoG: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 1,
-          y2: 0,
-          colorStops: [
-            {
-              offset: 0,
-              color: "#1c98e8"
-            },
-            {
-              offset: 1,
-              color: "#28f8de"
-            }
-          ]
-        },
-        areaBtoG: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            {
-              offset: 0,
-              color: "rgba(35,184,210,.2)"
-            },
-            {
-              offset: 1,
-              color: "rgba(35,184,210,0)"
-            }
-          ]
-        }
-      };
-      let option = {
-        title: {
-          text: "",
-          textStyle: {
-            color: "#D3D6DD",
-            fontSize: 24,
-            fontWeight: "normal"
-          },
-          subtext: year + "/" + weekCategory[6],
-          subtextStyle: {
-            color: "#fff",
-            fontSize: 16
-          },
-          top: 50,
-          left: 80
-        },
-        legend: {
-          top: 120,
-          left: 80,
-          orient: "vertical",
-          itemGap: 15,
-          itemWidth: 12,
-          itemHeight: 12,
-          data: ["平均指标", "我的指标"],
-          textStyle: {
-            color: "#fff",
-            fontSize: 14
-          }
-        },
-        tooltip: {
-          trigger: "item"
-        },
-        radar: {
-          center: ["68%", "27%"],
-          radius: "40%",
-          name: {
-            color: "#fff"
-          },
-          splitNumber: 8,
-          axisLine: {
-            lineStyle: {
-              color: color.linearYtoG,
-              opacity: 0.6
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              color: color.linearYtoG,
-              opacity: 0.6
-            }
-          },
-          splitArea: {
-            areaStyle: {
-              color: "#fff",
-              opacity: 0.1,
-              shadowBlur: 25,
-              shadowColor: "#000",
-              shadowOffsetX: 0,
-              shadowOffsetY: 5
-            }
-          },
-          indicator: [
-            {
-              name: "服务态度",
-              max: maxData
-            },
-            {
-              name: "产品质量",
-              max: 10
-            },
-            {
-              name: "任务效率",
-              max: 12
-            },
-            {
-              name: "售后保障",
-              max: 3.5
-            }
-          ]
-        },
-        grid: {
-          left: 90,
-          right: 80,
-          bottom: 40,
-          top: "60%"
-        },
-        xAxis: {
-          type: "category",
-          position: "bottom",
-          axisLine: true,
-          axisLabel: {
-            color: "rgba(255,255,255,.8)",
-            fontSize: 12
-          },
-          data: weekCategory
-        },
-        // 下方Y轴
-        yAxis: {
-          name: "工单",
-          nameLocation: "end",
-          nameGap: 24,
-          nameTextStyle: {
-            color: "rgba(255,255,255,.5)",
-            fontSize: 14
-          },
-          max: maxData,
-          splitNumber: 4,
-
-          axisLine: {
-            lineStyle: {
-              opacity: 0
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "#fff",
-              opacity: 0.1
-            }
-          },
-          axisLabel: {
-            color: "rgba(255,255,255,.8)",
-            fontSize: 12
-          }
-        },
-        series: [
-          {
-            name: "",
-            type: "radar",
-            symbolSize: 0,
-            data: [
-              {
-                value: radarDataAvg[6],
-                name: "平均指标",
-                itemStyle: {
-                  normal: {
-                    color: "#f8d351"
-                  }
-                },
-                lineStyle: {
-                  normal: {
-                    opacity: 0
-                  }
-                },
-                areaStyle: {
-                  normal: {
-                    color: "#f8d351",
-                    shadowBlur: 25,
-                    shadowColor: "rgba(248,211,81,.3)",
-                    shadowOffsetX: 0,
-                    shadowOffsetY: -10,
-                    opacity: 1
-                  }
-                }
-              },
-              {
-                value: radarData[6],
-                name: "我的指标",
-                itemStyle: {
-                  normal: {
-                    color: "#43dfa2"
-                  }
-                },
-                lineStyle: {
-                  normal: {
-                    opacity: 0
-                  }
-                },
-                areaStyle: {
-                  normal: {
-                    color: color.linearGtoB,
-                    shadowBlur: 15,
-                    shadowColor: "rgba(0,0,0,.2)",
-                    shadowOffsetX: 0,
-                    shadowOffsetY: 5,
-                    opacity: 0.8
-                  }
-                }
-              }
-            ]
-          },
-          {
-            name: "",
-            type: "line",
-            smooth: true,
-            symbol: "emptyCircle",
-            symbolSize: 8,
-            itemStyle: {
-              normal: {
-                color: "#fff"
-              }
-            },
-            lineStyle: {
-              normal: {
-                color: color.linearBtoG,
-                width: 3
-              }
-            },
-            areaStyle: {
-              normal: {
-                color: color.areaBtoG
-              }
-            },
-            data: weekLineData,
-            lineSmooth: true,
-            markLine: {
-              silent: true,
-              data: [
-                {
-                  type: "average",
-                  name: "平均值"
-                }
-              ],
-              precision: 0,
-              label: {
-                normal: {
-                  formatter: "平均值: \n {c}"
-                }
-              },
-              lineStyle: {
-                normal: {
-                  color: "rgba(248,211,81,.7)"
-                }
-              }
-            },
-            tooltip: {
-              position: "top",
-              formatter: "{c} m",
-              backgroundColor: "rgba(28,152,232,.2)",
-              padding: 6
-            }
-          },
-          {
-            name: "占位背景",
-            type: "bar",
-            itemStyle: {
-              normal: {
-                show: true,
-                color: "#000",
-                opacity: 0
-              }
-            },
-            silent: true,
-            barWidth: "50%",
-            data: weekMaxData,
-            animation: false
-          }
-        ]
-      };
-      this.chart.setOption(option);
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/components/echart/bottom/bottomRightChart/chart.vue

@@ -0,0 +1,361 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="centreLeft1Chart"
+      height="6rem"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+      // 定义颜色
+      colorList: {
+        linearYtoG: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#f5b44d"
+            },
+            {
+              offset: 1,
+              color: "#28f8de"
+            }
+          ]
+        },
+        linearGtoB: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#43dfa2"
+            },
+            {
+              offset: 1,
+              color: "#28f8de"
+            }
+          ]
+        },
+        linearBtoG: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1c98e8"
+            },
+            {
+              offset: 1,
+              color: "#28f8de"
+            }
+          ]
+        },
+        areaBtoG: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(35,184,210,.2)"
+            },
+            {
+              offset: 1,
+              color: "rgba(35,184,210,0)"
+            }
+          ]
+        }
+      }
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        this.options = {
+          title: {
+            text: "",
+            textStyle: {
+              color: "#D3D6DD",
+              fontSize: 24,
+              fontWeight: "normal"
+            },
+            subtext: newData.year + "/" + newData.weekCategory[6],
+            subtextStyle: {
+              color: "#fff",
+              fontSize: 16
+            },
+            top: 50,
+            left: 80
+          },
+          legend: {
+            top: 120,
+            left: 80,
+            orient: "vertical",
+            itemGap: 15,
+            itemWidth: 12,
+            itemHeight: 12,
+            data: ["平均指标", "我的指标"],
+            textStyle: {
+              color: "#fff",
+              fontSize: 14
+            }
+          },
+          tooltip: {
+            trigger: "item"
+          },
+          radar: {
+            center: ["68%", "27%"],
+            radius: "40%",
+            name: {
+              color: "#fff"
+            },
+            splitNumber: 8,
+            axisLine: {
+              lineStyle: {
+                color: this.colorList.linearYtoG,
+                opacity: 0.6
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: this.colorList.linearYtoG,
+                opacity: 0.6
+              }
+            },
+            splitArea: {
+              areaStyle: {
+                color: "#fff",
+                opacity: 0.1,
+                shadowBlur: 25,
+                shadowColor: "#000",
+                shadowOffsetX: 0,
+                shadowOffsetY: 5
+              }
+            },
+            indicator: [
+              {
+                name: "服务态度",
+                max: newData.maxData
+              },
+              {
+                name: "产品质量",
+                max: 10
+              },
+              {
+                name: "任务效率",
+                max: 12
+              },
+              {
+                name: "售后保障",
+                max: 3.5
+              }
+            ]
+          },
+          grid: {
+            left: 90,
+            right: 80,
+            bottom: 40,
+            top: "60%"
+          },
+          xAxis: {
+            type: "category",
+            position: "bottom",
+            axisLine: true,
+            axisLabel: {
+              color: "rgba(255,255,255,.8)",
+              fontSize: 12
+            },
+            data: newData.weekCategory
+          },
+          // 下方Y轴
+          yAxis: {
+            name: "工单",
+            nameLocation: "end",
+            nameGap: 24,
+            nameTextStyle: {
+              color: "rgba(255,255,255,.5)",
+              fontSize: 14
+            },
+            max: newData.maxData,
+            splitNumber: 4,
+
+            axisLine: {
+              lineStyle: {
+                opacity: 0
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#fff",
+                opacity: 0.1
+              }
+            },
+            axisLabel: {
+              color: "rgba(255,255,255,.8)",
+              fontSize: 12
+            }
+          },
+          series: [
+            {
+              name: "",
+              type: "radar",
+              symbolSize: 0,
+              data: [
+                {
+                  value: newData.radarDataAvg[6],
+                  name: "平均指标",
+                  itemStyle: {
+                    normal: {
+                      color: "#f8d351"
+                    }
+                  },
+                  lineStyle: {
+                    normal: {
+                      opacity: 0
+                    }
+                  },
+                  areaStyle: {
+                    normal: {
+                      color: "#f8d351",
+                      shadowBlur: 25,
+                      shadowColor: "rgba(248,211,81,.3)",
+                      shadowOffsetX: 0,
+                      shadowOffsetY: -10,
+                      opacity: 1
+                    }
+                  }
+                },
+                {
+                  value: newData.radarData[6],
+                  name: "我的指标",
+                  itemStyle: {
+                    normal: {
+                      color: "#43dfa2"
+                    }
+                  },
+                  lineStyle: {
+                    normal: {
+                      opacity: 0
+                    }
+                  },
+                  areaStyle: {
+                    normal: {
+                      color: this.colorList.linearGtoB,
+                      shadowBlur: 15,
+                      shadowColor: "rgba(0,0,0,.2)",
+                      shadowOffsetX: 0,
+                      shadowOffsetY: 5,
+                      opacity: 0.8
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              name: "",
+              type: "line",
+              smooth: true,
+              symbol: "emptyCircle",
+              symbolSize: 8,
+              itemStyle: {
+                normal: {
+                  color: "#fff"
+                }
+              },
+              lineStyle: {
+                normal: {
+                  color: this.colorList.linearBtoG,
+                  width: 3
+                }
+              },
+              areaStyle: {
+                normal: {
+                  color: this.colorList.areaBtoG
+                }
+              },
+              data: newData.weekLineData,
+              lineSmooth: true,
+              markLine: {
+                silent: true,
+                data: [
+                  {
+                    type: "average",
+                    name: "平均值"
+                  }
+                ],
+                precision: 0,
+                label: {
+                  normal: {
+                    formatter: "平均值: \n {c}"
+                  }
+                },
+                lineStyle: {
+                  normal: {
+                    color: "rgba(248,211,81,.7)"
+                  }
+                }
+              },
+              tooltip: {
+                position: "top",
+                formatter: "{c} m",
+                backgroundColor: "rgba(28,152,232,.2)",
+                padding: 6
+              }
+            },
+            {
+              name: "占位背景",
+              type: "bar",
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: "#000",
+                  opacity: 0
+                }
+              },
+              silent: true,
+              barWidth: "50%",
+              data: newData.weekMaxData,
+              animation: false
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/bottom/bottomRightChart/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  data () {
+    return {
+      drawTiming: null,
+      cdata: {
+        year: null,
+        weekCategory: [],
+        radarData: [],
+        radarDataAvg: [],
+        maxData: 12000,
+        weekMaxData: [],
+        weekLineData: []
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.drawTimingFn();
+  },
+  beforeDestroy () {
+    clearInterval(this.drawTiming);
+  },
+  methods: {
+    drawTimingFn () {
+      this.setData();
+      this.drawTiming = setInterval(() => {
+        this.setData();
+      }, 6000);
+    },
+    setData () {
+      // 清空轮询数据
+      this.cdata.weekCategory = [];
+      this.cdata.weekMaxData = [];
+      this.cdata.weekLineData = [];
+      this.cdata.radarData = [];
+      this.cdata.radarDataAvg = [];
+
+      let dateBase = new Date();
+      this.cdata.year = dateBase.getFullYear();
+      // 周数据
+      for (let i = 0; i < 7; i++) {
+        // 日期
+        let date = new Date();
+        console.log(date.getMonth());
+        console.log(date.getDate());
+        this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
+
+        // 折线图数据
+        this.cdata.weekMaxData.push(this.cdata.maxData);
+        let distance = Math.round(Math.random() * 11000 + 500);
+        this.cdata.weekLineData.push(distance);
+
+        // 雷达图数据
+        // 我的指标
+        let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
+        let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
+        let hour = +(distance / 1000 / averageSpeed).toFixed(1);
+        let radarDayData = [distance, averageSpeed, maxSpeed, hour];
+        this.cdata.radarData.unshift(radarDayData);
+
+        // 平均指标
+        let distanceAvg = Math.round(Math.random() * 8000 + 4000);
+        let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
+        let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
+        let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
+        let radarDayDataAvg = [
+          distanceAvg,
+          averageSpeedAvg,
+          maxSpeedAvg,
+          hourAvg
+        ];
+        this.cdata.radarDataAvg.unshift(radarDayDataAvg);
+      }
+
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/center/centerChartRate.vue

@@ -1,102 +0,0 @@
-<template>
-  <div>
-    <div :id="id" style="width:1.5rem;height:1.25rem;"></div>
-  </div>
-</template>
-
-<script>
-import echartMixins from "@/utils/resizeMixins";
-
-export default {
-  data() {
-    return {
-      chart: null
-    };
-  },
-  mixins: [echartMixins],
-  mounted() {
-    this.draw();
-  },
-  props: {
-    id: {
-      type: String,
-      required: true,
-      default: "chartRate"
-    },
-    tips: {
-      type: Number,
-      required: true,
-      default: 50
-    },
-    colorObj: {
-      type: Object,
-      default: function() {
-        return {
-          textStyle: "#3fc0fb",
-          series: {
-            color: ["#00bcd44a", "transparent"],
-            dataColor: {
-              normal: "#03a9f4",
-              shadowColor: "#97e2f5"
-            }
-          }
-        };
-      }
-    }
-  },
-  methods: {
-    draw() {
-      // 基于准备好的dom，初始化echarts实例
-      this.chart = this.$echarts.init(document.getElementById(this.id));
-      //  ----------------------------------------------------------------
-      let tips = this.tips;
-      let option = {
-        title: [
-          {
-            text: tips * 1 + "%",
-            x: "center",
-            y: "center",
-            textStyle: {
-              color: this.colorObj.textStyle,
-              fontSize: 16
-            }
-          }
-        ],
-        series: [
-          {
-            type: "pie",
-            radius: ["75%", "80%"],
-            center: ["50%", "50%"],
-            hoverAnimation: false,
-            color: this.colorObj.series.color,
-            label: {
-              normal: {
-                show: false
-              }
-            },
-            data: [
-              {
-                value: tips,
-                itemStyle: {
-                  normal: {
-                    color: this.colorObj.series.dataColor.normal,
-                    shadowBlur: 10,
-                    shadowColor: this.colorObj.series.dataColor.shadowColor
-                  }
-                }
-              },
-              {
-                value: 100 - tips
-              }
-            ]
-          }
-        ]
-      };
-      this.chart.setOption(option);
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/components/echart/center/centerChartRate/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <!-- 通过率/达标率 -->
+    <Echart
+      :options="options"
+      :id="id"
+      height="1.25rem"
+      width="1.5rem"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: "chartRate"
+    },
+    tips: {
+      type: Number,
+      required: true,
+      default: 50
+    },
+    colorObj: {
+      type: Object,
+      default: function () {
+        return {
+          textStyle: "#3fc0fb",
+          series: {
+            color: ["#00bcd44a", "transparent"],
+            dataColor: {
+              normal: "#03a9f4",
+              shadowColor: "#97e2f5"
+            }
+          }
+        };
+      }
+    }
+  },
+  watch: {
+    // tips 是会变更的数据，所以进行监听
+    tips: {
+      handler (newData) {
+        this.options = {
+          title:{
+            text: newData * 1 + "%",
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: this.colorObj.textStyle,
+              fontSize: 16
+            }
+          },
+          series: [
+            {
+              type: "pie",
+              radius: ["75%", "80%"],
+              center: ["50%", "50%"],
+              hoverAnimation: false,
+              color: this.colorObj.series.color,
+              label: {
+                normal: {
+                  show: false
+                }
+              },
+              data: [
+                {
+                  value: newData,
+                  itemStyle: {
+                    normal: {
+                      color: this.colorObj.series.dataColor.normal,
+                      shadowBlur: 10,
+                      shadowColor: this.colorObj.series.dataColor.shadowColor
+                    }
+                  }
+                },
+                {
+                  value: 100 - newData
+                }
+              ]
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/centerLeft/centerLeft1Chart/chart.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="centreLeft1Chart"
+      height="2.75rem"
+      width="3.25rem"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        this.options = {
+          color: [
+            "#37a2da",
+            "#32c5e9",
+            "#9fe6b8",
+            "#ffdb5c",
+            "#ff9f7f",
+            "#fb7293",
+            "#e7bcf3",
+            "#8378ea"
+          ],
+          tooltip: {
+            trigger: "item",
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+          },
+          toolbox: {
+            show: true
+          },
+          calculable: true,
+          legend: {
+            orient: "horizontal",
+            icon: "circle",
+            bottom: 0,
+            x: "center",
+            data: newData.xData,
+            textStyle: {
+              color: "#fff"
+            }
+          },
+          series: [
+            {
+              name: "通过率统计",
+              type: "pie",
+              radius: [10, 60],
+              roseType: "area",
+              center: ["50%", "40%"],
+              data: newData.seriesData
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/centerLeft/centerLeft1Chart/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue';
+export default {
+  data () {
+    return {
+      cdata: {
+        xData: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
+        seriesData: [
+          { value: 10, name: "rose1" },
+          { value: 5, name: "rose2" },
+          { value: 15, name: "rose3" },
+          { value: 25, name: "rose4" },
+          { value: 20, name: "rose5" },
+          { value: 35, name: "rose6" }
+        ]
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/centerLeft/centerLeft2Chart/chart.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="centreLeft2Chart"
+      height="4.625rem"
+      width="4.125rem"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        this.options = {
+          angleAxis: {
+            interval: 1,
+            type: "category",
+            data: newData.angleAxisData,
+            z: 10,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#00c7ff",
+                width: 1,
+                type: "solid"
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              show: true,
+              color: "#00c7ff",
+              margin: 8,
+              fontSize: 12
+            }
+          },
+          radiusAxis: {
+           min: 0,
+            max: 100,
+            interval: 20,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#00c7ff",
+                width: 1,
+                type: "solid"
+              }
+            },
+            axisLabel: {
+              formatter: "{value} %",
+              show: false,
+              padding: [0, 0, 20, 0],
+              color: "#00c7ff",
+              fontSize: 16
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#00c7ff",
+                width: 1,
+                type: "solid"
+              }
+            }
+          },
+          legend: {
+            show: true,
+            orient: "vartical",
+            top: "center",
+            bottom: "0%",
+            itemWidth: 16,
+            itemHeight: 8,
+            itemGap: 16,
+            textStyle: {
+              color: "#A3E2F4",
+              fontSize: 12,
+              fontWeight: 0
+            },
+          },
+          polar: {},
+          series: [
+            {
+              name: "A",
+              type: "bar",
+              radius: ["20%", "100%"],
+              data: newData.seriesData,
+              coordinateSystem: "polar"
+            }
+          ]
+        };
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/centerLeft/centerLeft2Chart/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue';
+export default {
+  data () {
+    return {
+      cdata: {
+        angleAxisData: [
+          "there1",
+          "there2",
+          "there3",
+          "there4",
+          "there5",
+          "there6",
+          "there7",
+          "there8",
+          "there9",
+          "there10 "
+        ],
+        seriesData: [
+          {
+            value: 87,
+            itemStyle: {
+              normal: {
+                color: "#f54d4d"
+              }
+            }
+          },
+          {
+            value: 80,
+            itemStyle: {
+              normal: {
+                color: "#f87544"
+              }
+            }
+          },
+          {
+            value: 75,
+            itemStyle: {
+              normal: {
+                color: "#ffae00"
+              }
+            }
+          },
+          {
+            value: 69,
+            itemStyle: {
+              normal: {
+                color: "#dcff00"
+              }
+            }
+          },
+          {
+            value: 63,
+            itemStyle: {
+              normal: {
+                color: "#25d053"
+              }
+            }
+          },
+          {
+            value: 54,
+            itemStyle: {
+              normal: {
+                color: "#01fff5"
+              }
+            }
+          },
+          {
+            value: 47,
+            itemStyle: {
+              normal: {
+                color: "#007cff"
+              }
+            }
+          },
+          {
+            value: 40,
+            itemStyle: {
+              normal: {
+                color: "#4245ff"
+              }
+            }
+          },
+          {
+            value: 35,
+            itemStyle: {
+              normal: {
+                color: "#c32eff"
+              }
+            }
+          },
+          {
+            value: 33,
+            itemStyle: {
+              normal: {
+                color: "#ff62e8"
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/centerLeft/centreLeft1Chart.vue

@@ -1,82 +0,0 @@
-<template>
-  <div>
-    <div id="centreLeft1Chart" style="width:3.25rem; height: 2.75rem;"></div>
-  </div>
-</template>
-
-<script>
-import echartMixins from "@/utils/resizeMixins";
-
-export default {
-  data() {
-    return {
-      chart: null
-    };
-  },
-  mixins: [echartMixins],
-  mounted() {
-    this.draw();
-  },
-  methods: {
-    draw() {
-      // 基于准备好的dom，初始化echarts实例
-      this.chart = this.$echarts.init(document.getElementById("centreLeft1Chart"));
-      //  ----------------------------------------------------------------
-
-      this.chart.setOption({
-        color: [
-          "#37a2da",
-          "#32c5e9",
-          "#9fe6b8",
-          "#ffdb5c",
-          "#ff9f7f",
-          "#fb7293",
-          "#e7bcf3",
-          "#8378ea"
-        ],
-        tooltip: {
-          trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)"
-        },
-        toolbox: {
-          show: true
-        },
-        calculable: true,
-        legend: {
-          orient: "horizontal",
-          icon: "circle",
-          bottom: 0,
-          x: "center",
-          data: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
-          textStyle: {
-            color: "#fff"
-          }
-        },
-        series: [
-          {
-            name: "增值电信业务统计表",
-            type: "pie",
-            radius: [10, 60],
-            roseType: "area",
-            center: ["50%", "40%"],
-            data: [
-              { value: 10, name: "rose1" },
-              { value: 5, name: "rose2" },
-              { value: 15, name: "rose3" },
-              { value: 25, name: "rose4" },
-              { value: 20, name: "rose5" },
-              { value: 35, name: "rose6" }
-            ]
-          }
-        ]
-      });
-    }
-  },
-  destroyed() {
-    window.onresize = null;
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/components/echart/centerLeft/centreLeft2Chart.vue

@@ -1,200 +0,0 @@
-<template>
-  <div>
-    <div id="centreLeft2Chart" style="width:4.125rem; height: 4.625rem;"></div>
-  </div>
-</template>
-
-<script>
-import echartMixins from "@/utils/resizeMixins";
-
-export default {
-  data() {
-    return {
-      chart: null
-    };
-  },
-  mixins: [echartMixins],
-  mounted() {
-    this.draw();
-  },
-  methods: {
-    draw() {
-      // 基于准备好的dom，初始化echarts实例
-      this.chart = this.$echarts.init(document.getElementById("centreLeft2Chart"));
-      //  ----------------------------------------------------------------
-
-      let option = {
-        angleAxis: {
-          interval: 1,
-          type: "category",
-          data: [
-            "there1",
-            "there2",
-            "there3",
-            "there4",
-            "there5",
-            "there6",
-            "there7",
-            "there8",
-            "there9",
-            "there10 "
-          ],
-          z: 10,
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: "#00c7ff",
-              width: 1,
-              type: "solid"
-            }
-          },
-          axisLabel: {
-            interval: 0,
-            show: true,
-            color: "#00c7ff",
-            margin: 8,
-            fontSize: 12
-          }
-        },
-        radiusAxis: {
-          min: 0,
-          max: 100,
-          interval: 20,
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: "#00c7ff",
-              width: 1,
-              type: "solid"
-            }
-          },
-          axisLabel: {
-            formatter: "{value} %",
-            show: false,
-            padding: [0, 0, 20, 0],
-            color: "#00c7ff",
-            fontSize: 16
-          },
-          splitLine: {
-            lineStyle: {
-              color: "#00c7ff",
-              width: 1,
-              type: "solid"
-            }
-          }
-        },
-        legend: {
-          show: true,
-          orient: "vartical",
-          top: "center",
-          bottom: "0%",
-          itemWidth: 16,
-          itemHeight: 8,
-          itemGap: 16,
-          textStyle: {
-            color: "#A3E2F4",
-            fontSize: 12,
-            fontWeight: 0
-          },
-          data: ["A"]
-        },
-        polar: {},
-        series: [
-          {
-            name: "A",
-            type: "bar",
-            radius: ["20%", "100%"],
-            data: [
-              {
-                value: 87,
-                itemStyle: {
-                  normal: {
-                    color: "#f54d4d"
-                  }
-                }
-              },
-              {
-                value: 80,
-                itemStyle: {
-                  normal: {
-                    color: "#f87544"
-                  }
-                }
-              },
-              {
-                value: 75,
-                itemStyle: {
-                  normal: {
-                    color: "#ffae00"
-                  }
-                }
-              },
-              {
-                value: 69,
-                itemStyle: {
-                  normal: {
-                    color: "#dcff00"
-                  }
-                }
-              },
-              {
-                value: 63,
-                itemStyle: {
-                  normal: {
-                    color: "#25d053"
-                  }
-                }
-              },
-              {
-                value: 54,
-                itemStyle: {
-                  normal: {
-                    color: "#01fff5"
-                  }
-                }
-              },
-              {
-                value: 47,
-                itemStyle: {
-                  normal: {
-                    color: "#007cff"
-                  }
-                }
-              },
-              {
-                value: 40,
-                itemStyle: {
-                  normal: {
-                    color: "#4245ff"
-                  }
-                }
-              },
-              {
-                value: 35,
-                itemStyle: {
-                  normal: {
-                    color: "#c32eff"
-                  }
-                }
-              },
-              {
-                value: 33,
-                itemStyle: {
-                  normal: {
-                    color: "#ff62e8"
-                  }
-                }
-              }
-            ],
-            coordinateSystem: "polar"
-          }
-        ]
-      };
-      this.chart.setOption(option);
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/components/echart/centerRight/centerRight2Chart.vue

@@ -1,164 +0,0 @@
-<template>
-  <div>
-    <div id="centreRight2Chart1" style="width:3.25rem; height: 2.60rem;">123</div>
-  </div>
-</template>
-
-<script>
-import echartMixins from "@/utils/resizeMixins";
-
-export default {
-  data() {
-    return {
-      chart: null
-    };
-  },
-  mixins: [echartMixins],
-  mounted() {
-    this.draw();
-  },
-  methods: {
-    draw() {
-      // 基于准备好的dom，初始化echarts实例
-      this.chart = this.$echarts.init(document.getElementById("centreRight2Chart1"));
-      //  ----------------------------------------------------------------
-      let dataBJ = [
-        [94, 69, 114, 2.08, 73, 39, 22],
-        [99, 73, 110, 2.43, 76, 48, 23],
-        [31, 12, 30, 0.5, 32, 16, 24],
-        [42, 27, 43, 1, 53, 22, 25],
-        [154, 117, 157, 3.05, 92, 58, 26],
-        [234, 185, 230, 4.09, 123, 69, 27],
-        [160, 120, 186, 2.77, 91, 50, 28]
-      ];
-
-      let dataGZ = [
-        [84, 94, 140, 2.238, 68, 18, 22],
-        [93, 77, 104, 1.165, 53, 7, 23],
-        [99, 130, 227, 3.97, 55, 15, 24],
-        [146, 84, 139, 1.094, 40, 17, 25],
-        [113, 108, 137, 1.481, 48, 15, 26],
-        [81, 48, 62, 1.619, 26, 3, 27],
-        [56, 48, 68, 1.336, 37, 9, 28]
-      ];
-
-      let dataSH = [
-        [91, 45, 125, 0.82, 34, 23, 1],
-        [65, 27, 78, 0.86, 45, 29, 2],
-        [83, 60, 84, 1.09, 73, 27, 3],
-        [109, 81, 121, 1.28, 68, 51, 4],
-        [106, 77, 114, 1.07, 55, 51, 5],
-        [109, 81, 121, 1.28, 68, 51, 6],
-        [106, 77, 114, 1.07, 55, 51, 7]
-      ];
-
-      let lineStyle = {
-        normal: {
-          width: 1,
-          opacity: 0.5
-        }
-      };
-
-      let option = {
-        radar: {
-          indicator: [
-            { name: "AQI", max: 300 },
-            { name: "PM2.5", max: 250 },
-            { name: "PM10", max: 300 },
-            { name: "CO", max: 5 },
-            { name: "NO2", max: 200 },
-            { name: "SO2", max: 100 }
-          ],
-          shape: "circle",
-          splitNumber: 5,
-          name: {
-            textStyle: {
-              color: "rgb(238, 197, 102)"
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              color: [
-                "rgba(238, 197, 102, 0.1)",
-                "rgba(238, 197, 102, 0.2)",
-                "rgba(238, 197, 102, 0.4)",
-                "rgba(238, 197, 102, 0.6)",
-                "rgba(238, 197, 102, 0.8)",
-                "rgba(238, 197, 102, 1)"
-              ].reverse()
-            }
-          },
-          splitArea: {
-            show: false
-          },
-          axisLine: {
-            lineStyle: {
-              color: "rgba(238, 197, 102, 0.5)"
-            }
-          }
-        },
-        series: [
-          {
-            name: "北京",
-            type: "radar",
-            lineStyle: lineStyle,
-            data: dataBJ,
-            symbol: "none",
-            itemStyle: {
-              normal: {
-                color: "#F9713C"
-              }
-            },
-            areaStyle: {
-              normal: {
-                opacity: 0.1
-              }
-            }
-          },
-          {
-            name: "上海",
-            type: "radar",
-            lineStyle: lineStyle,
-            data: dataSH,
-            symbol: "none",
-            itemStyle: {
-              normal: {
-                color: "#B3E4A1"
-              }
-            },
-            areaStyle: {
-              normal: {
-                opacity: 0.05
-              }
-            }
-          },
-          {
-            name: "广州",
-            type: "radar",
-            lineStyle: lineStyle,
-            data: dataGZ,
-            symbol: "none",
-            itemStyle: {
-              normal: {
-                color: "rgb(238, 197, 102)"
-              }
-            },
-            areaStyle: {
-              normal: {
-                opacity: 0.05
-              }
-            }
-          }
-        ]
-      };
-      this.chart.setOption(option);
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-#centreRight2Chart1 {
-  margin: 0 auto;
-}
-</style>

src/components/echart/centerRight/centerRightChart/chart.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="centreRight2Chart1"
+      height="2.60rem"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        // 固定样式数据
+        let lineStyle = {
+          normal: {
+            width: 1,
+            opacity: 0.5
+          }
+        };
+
+        this.options = {
+          radar: {
+            indicator: newData.indicatorData,
+            shape: "circle",
+            splitNumber: 5,
+            name: {
+              textStyle: {
+                color: "rgb(238, 197, 102)"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: [
+                  "rgba(238, 197, 102, 0.1)",
+                  "rgba(238, 197, 102, 0.2)",
+                  "rgba(238, 197, 102, 0.4)",
+                  "rgba(238, 197, 102, 0.6)",
+                  "rgba(238, 197, 102, 0.8)",
+                  "rgba(238, 197, 102, 1)"
+                ].reverse()
+              }
+            },
+            splitArea: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(238, 197, 102, 0.5)"
+              }
+            }
+          },
+          series: [
+            {
+              name: "北京",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: newData.dataBJ,
+              symbol: "none",
+              itemStyle: {
+                normal: {
+                  color: "#F9713C"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.1
+                }
+              }
+            },
+            {
+              name: "上海",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: newData.dataSH,
+              symbol: "none",
+              itemStyle: {
+                normal: {
+                  color: "#B3E4A1"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.05
+                }
+              }
+            },
+            {
+              name: "广州",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: newData.dataGZ,
+              symbol: "none",
+              itemStyle: {
+                normal: {
+                  color: "rgb(238, 197, 102)"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.05
+                }
+              }
+            } //end
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/centerRight/centerRightChart/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue';
+export default {
+  data () {
+    return {
+      cdata: {
+        indicatorData: [
+          { name: "data1", max: 300 },
+          { name: "data2", max: 250 },
+          { name: "data3", max: 300 },
+          { name: "data4", max: 5},
+          { name: "data5", max: 200 },
+          { name: "data6", max: 100 }
+        ],
+        dataBJ: [
+          [94, 69, 114, 2.08, 73, 39, 22],
+          [99, 73, 110, 2.43, 76, 48, 23],
+          [31, 12, 30, 0.5, 32, 16, 24],
+          [42, 27, 43, 1, 53, 22, 25],
+          [154, 117, 157, 3.05, 92, 58, 26],
+          [234, 185, 230, 4.09, 123, 69, 27],
+          [160, 120, 186, 2.77, 91, 50, 28]
+        ],
+        dataGZ: [
+          [84, 94, 140, 2.238, 68, 18, 22],
+          [93, 77, 104, 1.165, 53, 7, 23],
+          [99, 130, 227, 3.97, 55, 15, 24],
+          [146, 84, 139, 1.094, 40, 17, 25],
+          [113, 108, 137, 1.481, 48, 15, 26],
+          [81, 48, 62, 1.619, 26, 3, 27],
+          [56, 48, 68, 1.336, 37, 9, 28]
+        ],
+        dataSH: [
+          [91, 45, 125, 0.82, 34, 23, 1],
+          [65, 27, 78, 0.86, 45, 29, 2],
+          [83, 60, 84, 1.09, 73, 27, 3],
+          [109, 81, 121, 1.28, 68, 51, 4],
+          [106, 77, 114, 1.07, 55, 51, 5],
+          [109, 81, 121, 1.28, 68, 51, 6],
+          [106, 77, 114, 1.07, 55, 51, 7]
+        ]
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/utils/resizeMixins.js

@@ -4,7 +4,7 @@ const resizeChartMethod = '$__resizeChartMethod';
 
 export default {
   data() {
-    // 在组件内部将图表init的引用映射到chart属性上
+    // 在组件内部将图表 init 的引用映射到 chart 属性上
     return {
       chart: null,
     };
@@ -13,7 +13,7 @@ export default {
     window.addEventListener('resize', this[resizeChartMethod], false);
   },
   activated() {
-    // 防止keep-alive之后图表变形
+    // 防止 keep-alive 之后图表变形
     if (this.chart) {
       this.chart.resize()
     }
@@ -22,11 +22,12 @@ export default {
     window.removeEventListener('reisze', this[resizeChartMethod]);
   },
   methods: {
-    // 通过lodash的防抖函数来控制resize的频率
+    // 通过 lodash 的防抖函数来控制 resize 的频率
     [resizeChartMethod]: debounce(function() {
       if (this.chart) {
+        console.log('修改');
         this.chart.resize();
       }
-    }, 100),
+    }, 300),
   },
 };

src/views/bottomRight.vue

@@ -8,7 +8,7 @@
         <div class="d-flex">
           <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
           <div class="decoration2">
-            <dv-decoration-2 :reverse="true" style="width:5px;height:480px;" />
+            <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
           </div>
         </div>
       </div>

src/views/centerLeft1.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import CentreLeft1Chart from "@/components/echart/centerLeft/centreLeft1Chart";
+import CentreLeft1Chart from "@/components/echart/centerLeft/centerLeft1Chart";
 export default {
   data() {
     return {

src/views/centerLeft2.vue

@@ -6,7 +6,7 @@
           <icon name="chart-pie"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">数据情况雷达图</span>
+          <span class="fs-xl text mx-2">数据情况</span>
           <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
         </div>
       </div>
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import CentreLeft2Chart from "@/components/echart/centerLeft/centreLeft2Chart";
+import CentreLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
 export default {
   data() {
     return {};

src/views/centerRight2.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import centreRight2Chart1 from "@/components/echart/centerRight/centerRight2Chart";
+import centreRight2Chart1 from "@/components/echart/centerRight/centerRightChart";
 
 export default {
   data() {