修改

src/views/screen/Charts/BasePieChart.vue

@@ -0,0 +1,141 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" :theme="theme" />
+</template>
+
+<script>
+// 引入 merge
+import { merge } from 'lodash';
+// 按需引入 引入 ECharts 主模块
+import echarts from 'echarts/lib/echarts'
+// 引入饼图
+import pie from 'echarts/lib/chart/pie'
+// 引入 resize
+import resize from '@/components/Charts/mixins/resize'
+
+const defaultOptions = {
+    // textStyle: {
+    //     color: '#000'
+    // },
+    tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b} : {c} ({d}%)'
+    },
+    legend: {
+        // type: 'scroll',
+        // icon: 'circle',
+        // orient: "vertical",
+        // left: 'center'
+    },
+    series: [
+        {
+            type: 'pie',
+            // radius: ['35%', '60%'], // 内外半径
+            center: ['50%', '50%'],
+            data: [],
+            stillShowZeroSum: false,
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+        }
+    ]
+      
+}
+
+export default {
+  mixins: [resize],
+  props: {
+    options: {
+      type: Object,
+      default: function() {
+        return defaultOptions
+      }
+    },
+    renderer: {
+      type: String,
+      default: 'svg', // 渲染方式：canvas svg
+    },
+    theme: {
+      type: String,
+      default: 'macarons'
+    },
+    className: {
+      type: [Object,Array,String],
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  watch: {
+    options() {
+      this.updateChartView()
+    }
+  },
+  methods: {
+    /**
+     * 合并配置项
+     */
+    mergeOptions() {
+      return merge(
+        {},
+        defaultOptions, 
+        this.options
+      );
+    },  
+    /**
+     * 更新echar视图
+     */
+    updateChartView() {
+      if (!this.chart) return;
+      var _this=this
+      const fullOption = this.mergeOptions();
+      this.chart.setOption(fullOption, true);
+      this.chart.on('click', 'series.pie', function(param) { 
+          _this.$router.push({
+                
+            path:  "/total/alarmDeviceCount",
+
+          });
+      });
+    },
+    /**
+     * 初始化echart视图
+     */
+    initChart() {
+      var theme = this.theme ? this.theme : 'macarons'
+      // 引入主题
+      require('echarts/theme/' + theme) 
+      
+      this.chart = echarts.init(this.$el, theme, {renderer: this.renderer})
+      this.updateChartView()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+   .chart {
+        display: inline-block;
+    }
+</style>

src/views/screen/index.vue

@@ -215,7 +215,7 @@ export default {
         calculable : false,
         series: [{
     
-            name: 'myCharts',
+            name: '故障设备',
             type: 'pie',
             radius: ["35%", "60%"], // 内外半径
             center: ['25%', '55%'],
@@ -281,7 +281,7 @@ export default {
         calculable : false,
         series: [{
     
-            name: 'myCharts',
+            name: '故障代码',
             type: 'pie',
             radius: ["35%", "60%"], // 内外半径
             center: ['25%', '55%'],

src/views/screen/preview_v1.vue

@@ -229,7 +229,7 @@
 </template>
 
 <script>
-import BasePie from "@/components/Charts/BasePieChart";
+import BasePie from "./Charts/BasePieChart";
 import BaseBar from "@/components/Charts/BaseBarChart";
 import BaseLine from "@/components/Charts/BaseLineChart";
 import BaseMap from "@/components/Charts/BaseMapChart";