111

src/store/index.js

@@ -10,7 +10,7 @@ export default new Vuex.Store({
     mode: true,
     // 按钮权限
     buttons: [],
-    ip: 'http://115.238.57.190:8100',
+    ip: 'http://120.27.234.126:8010',
     // 所选择的farmId
     farmId: '',
     farmList: [],

src/utils/http.js

@@ -15,7 +15,7 @@ let removePending = (ever) => {
 // 创建axios实例
 var instance = axios.create({
   timeout: 1000 * 12,
-  baseURL: 'http://115.238.57.190:8100'
+  baseURL: 'http://120.27.234.126:8010'
 })
 
 // 请求拦截器

src/views/PdcData/CheckPig.vue

@@ -1,13 +1,223 @@
 <template>
-  <div>智能盘猪</div>
+  <div>
+<!--    <div id="chart"></div>-->
+  </div>
 </template>
 
 <script>
 export default {
-  name: "CheckPig"
+  name: "CheckPig",
+  data() {
+    return {
+      myChart: null,
+      timer: null
+    }
+  },
+  methods: {
+    init() {
+      let minAngle = 10;// 最小扇形区域为30
+      let data = [{name: '1', value: 200, }, {name: '2', value: 500, }, {name: '3', value: 100, },{name: '4', value: 1000, } ]
+      for ( let i = 0; i < data.length; i++ ) { //某项数据为0时，最小扇形区域为0
+        if ( data[ i ].value === 0 ) {
+          minAngle = 0;
+          break;
+        }
+      }
+      const pieValue = data.map( v => {
+        return v.value;
+      } )
+      const sum = pieValue.reduce( ( prev, cur ) => {//数据值的总和
+        return prev + cur;
+      }, 0 );
+      const sum2 = pieValue.reduce( ( prev, cur ) => {
+        if ( cur < sum / 12 && cur > 0 ) {//某个值大于0小于总和的1/12即30时，按30计算和
+          return prev + sum / 12;
+        }
+        return prev + cur;
+      }, 0 );
+      let initPieValue = pieValue[ 0 ];// 初始值
+      if ( initPieValue < sum / 12 && initPieValue > 0 ) {
+        initPieValue = sum / 12;
+      }
+      const option = {
+        color: [ '#44bbf8', '#93e588', '#ffd87b', '#f88071' ],
+        series: [
+          {
+            name: '测试',
+            type: 'pie',
+            radius: [ '30%', '60%' ],
+            center: ['40%', '50%'],
+            clockWise: false,
+            clickable: false,
+            startAngle: 300,
+            minAngle: minAngle,
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 5,
+            },
+            label: {
+              show: false
+            },
+            emphasis: {
+              label: {
+                show: true,
+                formatter: "{a} \n{b}: {c} ({d}%)",
+                color: '#fff',
+                fontWeight: 'bold',
+                fontSize: 18
+              }
+            },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: data
+        }
+
+      ],
+        animationDuration: 0,
+        animationDurationUpdate: 1000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    };
+      this.myChart.setOption( option );
+      this.myChart.dispatchAction( { type: 'highlight', seriesIndex: 0, dataIndex: 0 } );
+      let preDataIndex = 0;
+      // 开始循环
+      this.timer = setInterval(() => {
+        if(preDataIndex > 3 ) {
+          preDataIndex = 0;
+        }
+        const sum1 = pieValue.reduce( ( prev, cur, index ) => {
+          if ( index < preDataIndex ) {
+            if ( cur < sum / 12 && cur > 0 ) {
+              return prev + sum / 12; // 饼图的扇形最小角度设置为30，占圆的1/12
+
+            }
+
+            return prev + cur;
+
+          }
+
+          return prev;
+
+        }, 0 );
+
+        let curPieValue = pieValue[ preDataIndex ];
+
+        if ( curPieValue < sum / 12 && curPieValue > 0 ) {
+          curPieValue = sum / 12;
+        }
+        this.myChart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          // dataIndex: preDataIndex  === 0 ? 3 : preDataIndex - 1
+        });
+        option.series[ 0 ].startAngle = 300 - ( sum1 / sum2 * 360 + curPieValue / sum2 * 360 / 2 );// 开始渲染图形的角度
+        //
+        this.myChart.setOption( option );
+
+        window.setTimeout( () => {
+          this.myChart.dispatchAction( {
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: preDataIndex
+          } );
+          this.myChart.dispatchAction({
+            type: 'showTip',
+            // 可选，系列 index，可以是一个数组指定多个系列
+            seriesIndex: 0,
+            // 可选，数据的 index
+            dataIndex: preDataIndex,
+          })
+          preDataIndex++;
+
+        }, 1500);
+      }, 8000)
+      let that = this;
+      this.myChart.on('mouseover', (v) => {
+        this.myChart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          // dataIndex: preDataIndex  === 0 ? 3 : preDataIndex - 1
+        });
+        preDataIndex = v.dataIndex;
+        this.myChart.dispatchAction( {
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: preDataIndex
+        });
+        clearInterval(that.timer);
+      })
+      this.myChart.on('mouseout', () => {
+        this.timer = setInterval(() => {
+          if(preDataIndex > 3 ) {
+            preDataIndex = 0;
+          }
+          const sum1 = pieValue.reduce( ( prev, cur, index ) => {
+            if ( index < preDataIndex ) {
+              if ( cur < sum / 12 && cur > 0 ) {
+                return prev + sum / 12; // 饼图的扇形最小角度设置为30，占圆的1/12
+
+              }
+
+              return prev + cur;
+
+            }
+
+            return prev;
+
+          }, 0 );
+
+          let curPieValue = pieValue[ preDataIndex ];
+
+          if ( curPieValue < sum / 12 && curPieValue > 0 ) {
+            curPieValue = sum / 12;
+          }
+          this.myChart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0,
+            // dataIndex: preDataIndex  === 0 ? 3 : preDataIndex - 1
+          });
+          option.series[ 0 ].startAngle = 300 - ( sum1 / sum2 * 360 + curPieValue / sum2 * 360 / 2 );// 开始渲染图形的角度
+          //
+          this.myChart.setOption( option );
+
+          window.setTimeout( () => {
+            this.myChart.dispatchAction( {
+              type: 'highlight',
+              seriesIndex: 0,
+              dataIndex: preDataIndex
+            } );
+            this.myChart.dispatchAction({
+              type: 'showTip',
+              // 可选，系列 index，可以是一个数组指定多个系列
+              seriesIndex: 0,
+              // 可选，数据的 index
+              dataIndex: preDataIndex,
+            })
+            preDataIndex++;
+
+          }, 1500);
+        }, 8000)
+      })
+
+    },
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart'));
+    // this.init()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  }
 }
 </script>
 
 <style scoped>
-
+  #chart {
+    width: 500px;
+    height: 500px;
+  }
 </style>