修改切换功能

src/views/modules/knowledge/statistics/album.vue

@@ -122,6 +122,7 @@ export default {
     }
   },
   mounted() {
+    this.$refs.pieChange.changeType(1)
     this.gettotalUserVisits()
     this.getalbumDetailVisits();
     this.getlevel1AlbumHistogram();
@@ -166,8 +167,8 @@ export default {
     },
     //各一级分类知识创建数量
     getalbumDetailVisits(){
-      this.$refs.pieChange.changeType(0)
-      this.peitype=0
+      //this.$refs.pieChange.changeType(1)
+      //this.peitype=0
       statistics.albumDetailVisits({type:this.type}).then(res => {
         let pieData=[];
         let pieDataTitleLeft=[];

src/views/modules/knowledge/statistics/components/BarEchart.vue

@@ -1,13 +1,18 @@
 <template>
-  <common-echart @legendselectchanged="legendselectchanged" :option="option" height="380px"></common-echart>
+  <div class="mainBox">
+    <lineChange ref="lineChangeRef" @typeChange="typeChange"></lineChange>
+    <common-echart @legendselectchanged="legendselectchanged" :option="option" height="100%"></common-echart>
+  </div>
 </template>
 
 <script>
 import * as echarts from "echarts";
 import commonEchart from "./commonEchart";
+import lineChange from "./lineChange";
 export default {
   components: {
-    commonEchart
+    commonEchart,
+    lineChange
   },
   props: {
     barXData: {
@@ -27,7 +32,7 @@ export default {
     option() {
       let showNum=Math.floor(window.innerWidth*0.8276/(65*this.barData.dataBas0.length)*100)
       return {
-        toolbox: {//图形转换
+        /*toolbox: {//图形转换
           feature: {
               magicType: {
                   show: true,
@@ -37,7 +42,7 @@ export default {
               }
           },
           right:'4%'
-        },
+        },*/
         name:'barOption',
         xAxis: {
           type: "category",
@@ -122,7 +127,7 @@ export default {
           {
             name: this.barTitle[0],
             data: this.barData.dataBas0,
-            type: "bar",
+            type: this.lineType,
             barGap: 0, 
             showBackground: false,
             barWidth: '10px',
@@ -147,7 +152,7 @@ export default {
           {
             name: this.barTitle[1],
             data: this.barData.dataBas1,
-            type: "bar",
+            type: this.lineType,
             showBackground: false,
             barWidth: '10px',
             itemStyle:  {
@@ -174,10 +179,21 @@ export default {
   },
   data() {
     return {
-      flag: false
+      flag: false,
+      lineType:'bar'
     }
   },
+  mounted() {
+    this.$refs.lineChangeRef.changeType(2)
+  },
   methods: {
+    typeChange(data){
+      if(data==1){
+        this.lineType = 'line'
+      }else{
+        this.lineType = 'bar'
+      }
+    },
     legendselectchanged(data) {
       let that=this
       if(this.flag==false){
@@ -192,4 +208,10 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped>
+.mainBox{
+  width:100%;
+  height: 88%;
+  top: 8%;
+  position: absolute;
+}</style>

src/views/modules/knowledge/statistics/components/BarEchartOne.vue

@@ -1,13 +1,18 @@
 <template>
-  <common-echart :option="option" height="380px"></common-echart>
+  <div class="mainBox">
+    <lineChange ref="lineChangeRef" @typeChange="typeChange"></lineChange>
+    <common-echart :option="option" height="100%"></common-echart>
+  </div>
 </template>
 
 <script>
 import * as echarts from "echarts";
 import commonEchart from "./commonEchart";
+import lineChange from "./lineChange";
 export default {
   components: {
-    commonEchart
+    commonEchart,
+    lineChange
   },
   props: {
     barXData: {
@@ -23,7 +28,7 @@ export default {
     option() {
       let showNum=Math.floor(window.innerWidth*0.8276/(50*this.barData.length)*100)
       return {
-        toolbox: {//图形转换
+        /*toolbox: {//图形转换
           feature: {
               magicType: {
                   show: true,
@@ -33,7 +38,7 @@ export default {
               }
           },
           right:'4%'
-        },
+        },*/
         xAxis: {
           type: "category",
           offset: 10,
@@ -86,7 +91,7 @@ export default {
         series: [
           {
             data: this.barData,
-            type: "bar",
+            type: this.lineType,
             barGap: 0, 
             showBackground: false,
             barWidth: '10px',
@@ -111,8 +116,31 @@ export default {
         ]
       }
     }
+  },
+  data(){
+    return {
+      lineType:'bar'
+    }
+  },
+  mounted() {
+    this.$refs.lineChangeRef.changeType(2)
+  },
+  methods: {
+    typeChange(data){
+      if(data==1){
+        this.lineType = 'line'
+      }else{
+        this.lineType = 'bar'
+      }
+    }
   }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped>
+.mainBox{
+  width:100%;
+  height: 88%;
+  top: 8%;
+  position: absolute;
+}</style>

src/views/modules/knowledge/statistics/components/LineEchart.vue

@@ -1,14 +1,20 @@
 <template>
-  <common-echart :option="option"></common-echart>
+  <div class="mainBox">
+    <lineChange ref="lineChangeRef" @typeChange="typeChange"></lineChange>
+    <common-echart ref="commonEchartRef" :height="'100%'" :option="option"></common-echart>
+  </div>
 </template>
 
 <script>
 /* 组件 */
 import commonEchart from "./commonEchart";
+import lineChange from "./lineChange";
+
 import statistics from '@/api/knowledge/statistics'
 export default {
   components: {
-    commonEchart
+    commonEchart,
+    lineChange
   },
   props: {
     
@@ -18,10 +24,21 @@ export default {
       barDataX:[],
       barDataPv:[],
       barDataUv:[],
-      dataBas:null
+      dataBas:null,
+      lineType:'line'
     }
   },
+  mounted() {
+    this.$refs.lineChangeRef.changeType(1)
+  },
   methods: {
+    typeChange(data){
+      if(data==1){
+        this.lineType = 'line'
+      }else{
+        this.lineType = 'bar'
+      }
+    },
     gettotalUserVisits(data){
       this.dataBas=data
       let barDataUv=[];
@@ -78,7 +95,7 @@ export default {
     option() {
       let showNum=Math.floor(window.innerWidth*0.8276/(50*this.barDataUv.length)*100)
       return {
-        toolbox: {//图形转换
+        /*toolbox: {//图形转换
           feature: {
               magicType: {
                   show: true,
@@ -88,7 +105,7 @@ export default {
               }
           },
           right:'4%'
-        },
+        },*/
         // title: {
         //   text: '用户总访问量-10000',
         //   top: 20,
@@ -96,7 +113,7 @@ export default {
         // },
         xAxis: {
           type: 'category',
-          boundaryGap: false,
+          boundaryGap: this.lineType=='bar',
           offset: 10,
           axisLine: {
             show: false
@@ -148,7 +165,7 @@ export default {
         series: [
           {
             data: this.barDataUv,
-            type: 'line',
+            type: this.lineType,
             smooth: true,
             symbolSize: 1,
             emphasis: {
@@ -189,4 +206,11 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped>
+.mainBox{
+  width:100%;
+  height: 88%;
+  top: 8%;
+  position: absolute;
+}
+</style>

src/views/modules/knowledge/statistics/components/commonEchart.vue

@@ -49,29 +49,38 @@ export default {
       });
     });
   },
+  data() {   
+    return {
+      echartInstance:null
+    }
+  },
   methods: {
      _initEchart() {
       let that=this
-      const echartInstance = echarts.init(this.$refs.baseEchartRef);
-      console.log(this.option)
-      echartInstance.setOption(this.option);
-      echartInstance.on('legendselectchanged', function (params) {
+      if(that.echartInstance==null){
+        that.echartInstance = echarts.init(this.$refs.baseEchartRef);
+      }
+      //console.log(this.option)
+      that.echartInstance.clear();
+      console.log(123123)
+      that.echartInstance.setOption(this.option,true);
+      that.echartInstance.on('legendselectchanged', function (params) {
         if(that.option.name=='barOption'){
           that.$emit('legendselectchanged',params.selected)
         }
       });
       let echartTime=null
-      echartInstance.on('highlight', (params) => {
+      that.echartInstance.on('highlight', (params) => {
         echartTime = setInterval(() => {
-            echartInstance.dispatchAction({
+          that.echartInstance.dispatchAction({
                   type: 'showTip',
                   seriesIndex: 0,
                   name: params.name,
               });
           }, 300)
       })
-      echartInstance.on('downplay', () => {
-        echartInstance.dispatchAction({
+      that.echartInstance.on('downplay', () => {
+        that.echartInstance.dispatchAction({
               type: 'hideTip'
           })
           clearInterval(echartTime);
@@ -79,7 +88,7 @@ export default {
       if(that.option.showheigh){
         let indexOfMax = 0;
         let max = that.option.series[0].data.reduce( (a,c,i) => c.value > a ? (indexOfMax = i,c.value) : a, 0)
-        echartInstance.dispatchAction({
+        that.echartInstance.dispatchAction({
           type: 'highlight',
           seriesIndex: 0,
           dataIndex: indexOfMax

src/views/modules/knowledge/statistics/components/lineChange.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="pieTypeBox">
+    <a-tooltip placement="bottom" overlayClassName="tooltipBoxpieChange">
+      <template slot="title">
+        <span style="color:#6d6d6d">切换为折线图</span>
+      </template>
+      <a-icon class="iconType" @click="changePeitype(1)" type="line-chart" :style="{marginRight:'10px',color:peitype==1?'#4285f4':'#6d6d6d','borderBottom': peitype==1?'1px solid #4285f4':'1px solid #6d6d6d'}"/>
+    </a-tooltip>
+    <a-tooltip placement="bottom" overlayClassName="tooltipBoxpieChange">
+      <template slot="title">
+        <span style="color:#6d6d6d">切换为柱状图</span>
+      </template>
+      <a-icon class="iconType" @click="changePeitype(2)" type="bar-chart" :style="{color:peitype==2?'#4285f4':'#6d6d6d','borderBottom': peitype==2?'1px solid #4285f4':'1px solid #6d6d6d'}"/>    </a-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'pieChange',
+  data() {
+    return {
+      peitype: 0
+    }
+  },
+  methods: {
+    changePeitype(type){
+      this.peitype=type
+      this.$emit('typeChange',type)
+    },
+    changeType(type){
+      this.peitype=type
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.pieTypeBox{
+  float:right;
+  font-size: 0.8vw;
+  cursor: pointer;
+  padding-right: 2.4vw;
+  position: relative;
+  z-index: 10;
+}
+.pieTypeBox i{
+  padding-bottom: 3px;
+}
+</style>
+<style lang="less">
+.tooltipBoxpieChange{
+  background: none;
+  padding-top: 0px;
+  .ant-tooltip-arrow{
+    display:none
+  }
+  .ant-tooltip-inner{
+    padding-top: 0px;
+    font-size: 12px;
+    background: none;
+    box-shadow: none;
+  }
+}
+.iconType{
+  font-size: 15px;
+}
+</style>

src/views/modules/knowledge/statistics/components/pieChange.vue

@@ -4,13 +4,13 @@
       <template slot="title">
         <span style="color:#6d6d6d">切换为饼状图</span>
       </template>
-      <a-icon class="iconType" @click="changePeitype(1)" type="pie-chart" :style="{marginRight:'10px',color:peitype==1?'#6d6d6d':'#6d6d6d','borderBottom': peitype==1?'1px solid #6d6d6d':'1px solid #6d6d6d'}"/>
+      <a-icon class="iconType" @click="changePeitype(1)" type="pie-chart" :style="{marginRight:'10px',color:peitype==1?'#4285f4':'#6d6d6d','borderBottom': peitype==1?'1px solid #4285f4':'1px solid #6d6d6d'}"/>
     </a-tooltip>
     <a-tooltip placement="bottom" overlayClassName="tooltipBoxpieChange">
       <template slot="title">
         <span style="color:#6d6d6d">切换为环状图</span>
       </template>
-      <a-icon class="iconType" @click="changePeitype(2)" type="chrome" :style="{color:peitype==2?'#6d6d6d':'#6d6d6d','borderBottom': peitype==2?'1px solid #6d6d6d':'1px solid #6d6d6d'}"/>    </a-tooltip>
+      <a-icon class="iconType" @click="changePeitype(2)" type="chrome" :style="{color:peitype==2?'#4285f4':'#6d6d6d','borderBottom': peitype==2?'1px solid #4285f4':'1px solid #6d6d6d'}"/>    </a-tooltip>
   </div>
 </template>
 

src/views/modules/knowledge/statistics/map.vue

@@ -117,6 +117,7 @@ export default {
     }
   },
   mounted() {
+    this.$refs.pieChange.changeType(1)
     this.gettotalUserVisits()
     this.gettypeMapPie();
     this.getmapPageHistogram();
@@ -149,8 +150,8 @@ export default {
     },
     //各类型地图创建数量
     gettypeMapPie(){
-      this.$refs.pieChange.changeType(0)
-      this.peitype=0
+      //this.$refs.pieChange.changeType(1)
+      //this.peitype=0
       statistics.typeMapPie({type:this.type}).then(res => {
         let roseData=[]
         let pieData=[]

src/views/modules/knowledge/statistics/search.vue

@@ -83,6 +83,7 @@ export default {
     }
   },
   mounted() {
+    this.$refs.pieChange.changeType(1)
     statistics.organizationSearchsColumns({params:{type: "month"}}).then(res => {
       res.result.columns.forEach(element => {
         let temp={}
@@ -121,8 +122,8 @@ export default {
     },
     //各业务系统分布
     getsearchSystemDetailVisits(){
-      this.$refs.pieChange.changeType(0)
-      this.peitype=0
+      //this.$refs.pieChange.changeType(1)
+      //this.peitype=0
       statistics.searchSystemDetailVisits({type:this.type}).then(res => {
         let roseData=[]
         let pieData=[]

src/views/modules/knowledge/statistics/synthesize.vue

@@ -146,6 +146,7 @@ export default {
     this.getmoduleUserVisits();
     this.getmoduleUserUniqueVisits();
     this.timeData = statistics.getNowDate()
+    this.$refs.pieChange.changeType(1)
   },
   methods: {
     typeChange(data){
@@ -174,8 +175,8 @@ export default {
     },
     //各板块访问量分布
     getmoduleUserVisits(){
-      this.$refs.pieChange.changeType(0)
-      this.peitype=0
+      //this.$refs.pieChange.changeType(1)
+      //this.peitype=0
       statistics.moduleUserVisits({type:this.type}).then(res => {
         this.roseData = [
           { value: res.data.knowledge, name: Math.floor(res.data.knowledgePercentage*100)+'% 知识仓库' },

src/views/modules/knowledge/statistics/warehouse.vue

@@ -127,6 +127,7 @@ export default {
     this.getknowledgeTypeVisitProportion();
     this.getlevel1KnowledgeHistogram();
     this.timeData = statistics.getNowDate()
+    this.$refs.pieChange.changeType(1)
   },
   methods: {
     typeChange(data){
@@ -165,8 +166,8 @@ export default {
     },
     //知识类型访问量分布
     getknowledgeTypeVisitProportion(){
-      this.$refs.pieChange.changeType(0)
-      this.peitype=0
+      //this.$refs.pieChange.changeType(1)
+      //this.peitype=0
       statistics.knowledgeTypeVisitProportion({type:this.type}).then(res => {
         this.roseData = [
           { value: res.data.archive, name: Math.floor(res.data.archivePercentage*100)+'% 文档知识' },