chart自适应resize

src/components/MonitorComponents/MonitorChart/monitor-chart.vue

@@ -42,6 +42,7 @@ export default {
   },
   data() {
     return {
+      chart: null,
       dataSource: [],
       defaultColors: [
         '#1890FF',
@@ -67,12 +68,17 @@ export default {
       this.$nextTick(this.init)
     }
   },
+  beforeDestroy() {
+    this.chart && window.removeEventListener('resize', () => this.chart.resize())
+  },
   methods: {
     init() {
       this.formatData()
       const chart = echarts.init(this.$refs.chart)
       chart.clear()
       chart.setOption(this.setting)
+      this.chart = chart
+      window.addEventListener('resize', () => this.chart.resize())
     },
 
     /** 转换数据格式 */
@@ -167,7 +173,7 @@ export default {
       }
 
       options.series = shape.map((item, index) => {
-        let color = this.colors[index]
+        let color = item.color || this.colors[index]
         let shadow = {}
         if (Array.isArray(color)) { // 如果颜色是数组则渐变
           const shadowColor = color[0] || '#0076FF'

src/views/components/disease/disease-forecast.vue

@@ -153,6 +153,9 @@ export default {
     // this.$nextTick(this.init)
     setTimeout(this.init, 0)
   },
+  beforeDestroy() {
+    this.chart && window.removeEventListener('resize', () => this.chart.resize())
+  },
   computed: {
     fontSize() {
       return Math.floor(screen.height * 1.48 / 100)
@@ -161,6 +164,7 @@ export default {
   methods: {
     init() {
       this.chart = this.$echarts.init(this.$refs.chart)
+      window.addEventListener('resize', () => this.chart.resize())
       this.setChartData(this.type)
     },
     setChartData(type) {

src/views/components/disease/disease-map.vue

@@ -98,6 +98,9 @@ export default {
   mounted() {
     this.$nextTick(this.initMap)
   },
+  beforeDestroy() {
+    this.map && window.removeEventListener('resize', () => this.map.resize())
+  },
   computed: {
     sizeRate() {
       return Number((screen.height / 800).toFixed(1))
@@ -108,6 +111,7 @@ export default {
       // 初始化echarts
       this.$echarts.registerMap(this.mapName, china)
       this.map = this.$echarts.init(this.$refs.map)
+      window.addEventListener('resize', () => this.map.resize())
       // this.addEvent()
       // this.config.series.push({
       //   type: 'scatter', // series图表类型

src/views/components/disease/disease-warning.vue

@@ -111,6 +111,9 @@ export default {
     // this.$nextTick(this.init)
     setTimeout(this.init, 0)
   },
+  beforeDestroy() {
+    this.map && window.removeEventListener('resize', () => this.map.resize())
+  },
   computed: {
     diseaseWarning() {
       return this.$store.state.diseaseWarning
@@ -120,6 +123,7 @@ export default {
     init() {
       this.$echarts.registerMap(this.mapName, china)
       this.map = this.$echarts.init(this.$refs.map)
+      window.addEventListener('resize', () => this.map.resize())
       this.map.setOption(this.config)
     },
     setMapData(type) {

src/views/components/disease/special-monitoring.vue

@@ -169,6 +169,9 @@ export default {
     // this.$nextTick(this.init)
     setTimeout(this.init, 0)
   },
+  beforeDestroy() {
+    this.chart && window.removeEventListener('resize', () => this.chart.resize())
+  },
   computed: {
     fontSize() {
       return Math.floor(screen.height * 1.48 / 100)
@@ -177,6 +180,7 @@ export default {
   methods: {
     init() {
       this.chart = this.$echarts.init(this.$refs.chart)
+      window.addEventListener('resize', () => this.chart.resize())
       this.setMapData(this.disease)
     },
     setMapData(disease) {

src/views/components/fishing-price/price-trend.vue

@@ -148,6 +148,9 @@ export default {
     // this.$nextTick(this.init)
     setTimeout(this.init, 0)
   },
+  beforeDestroy() {
+    this.chart && window.removeEventListener('resize', () => this.chart.resize())
+  },
   computed: {
     sizeRate() {
       return Number((screen.height / 800).toFixed(1))
@@ -159,6 +162,7 @@ export default {
   methods: {
     init() {
       this.chart = this.$echarts.init(this.$refs.chart)
+      window.addEventListener('resize', () => this.chart.resize())
       this.chart.setOption(this.option)
     }
   }

src/views/components/ocean-farm/data-identify.vue

 <template>
   <div class="data-identify">
     <div>
-      <p><span/>海洋种类</p>
+      <p><span/>种群类别</p>
       <span class="tips" title="海鲈、鲆、石斑鱼、河鲀、龙虾、斑节对虾、梭子蟹、黄姑鱼、军曹鱼、大黄鱼、中国对虾、鲍、牡蛎、扇贝">
         本月识别种类：海鲈、鲆、石斑鱼、河鲀、龙虾、斑节对虾、梭子蟹、黄姑鱼、军曹鱼、大黄鱼、中国对虾、鲍、牡蛎、扇贝
       </span>
@@ -65,6 +65,8 @@ export default {
   name: 'DataIdentify',
   data() {
     return {
+      chart1: null,
+      chart2: null,
       option: {
         tooltip: {
           trigger: 'axis',
@@ -246,6 +248,11 @@ export default {
   mounted() {
     setTimeout(this.init, 0)
   },
+  beforeDestroy() {
+    this.chart1 && this.chart2 && window.removeEventListener('resize', () => {
+      this.chart1.resize(); this.chart2.resize()
+    })
+  },
   computed: {
     sizeRate() {
       return Number((screen.height / 800).toFixed(1))
@@ -256,8 +263,13 @@ export default {
   },
   methods: {
     init() {
-      this.$echarts.init(this.$refs.chart).setOption(this.option)
-      this.$echarts.init(this.$refs.chart2).setOption(this.option2)
+      this.chart1 = this.$echarts.init(this.$refs.chart)
+      this.chart2 = this.$echarts.init(this.$refs.chart2)
+      window.addEventListener('resize', () => {
+        this.chart1.resize(); this.chart2.resize()
+      })
+      this.chart1.setOption(this.option)
+      this.chart2.setOption(this.option2)
     }
   },
 }

src/views/components/quality-safety/forecast.vue

@@ -112,6 +112,9 @@ export default {
     // this.$nextTick(this.init)
     setTimeout(this.init, 0)
   },
+  beforeDestroy() {
+    this.chart && window.removeEventListener('resize', () => this.chart.resize())
+  },
   computed: {
     fontSize() {
       return Math.floor(screen.height * 1.48 / 100)
@@ -120,6 +123,7 @@ export default {
   methods: {
     init() {
       this.chart = this.$echarts.init(this.$refs.chart)
+      window.addEventListener('resize', () => this.chart.resize())
       this.setChartData()
     },
     setChartData() {

src/views/components/quality-safety/quality-map.vue

@@ -134,6 +134,9 @@ export default {
   mounted() {
     this.$nextTick(this.initMap)
   },
+  beforeDestroy() {
+    this.map && window.removeEventListener('resize', () => this.map.resize())
+  },
   computed: {
     sizeRate() {
       return Number((screen.height / 800).toFixed(1))
@@ -144,6 +147,7 @@ export default {
       // 初始化echarts
       this.$echarts.registerMap(this.mapName, china)
       this.map = this.$echarts.init(this.$refs.map)
+      window.addEventListener('resize', () => this.map.resize())
       // this.addEvent()
       this.config.series.push({
         type: 'map',

src/views/components/quality-safety/quality-warning.vue

@@ -47,6 +47,7 @@ export default {
           min: 0,
           max: 40,
           itemWidth: 10,
+          itemHeight: '100%',
           left: 'auto',
           right: 0,
           realtime: false,
@@ -72,6 +73,9 @@ export default {
     // this.$nextTick(this.init)
     setTimeout(this.init, 0)
   },
+  beforeDestroy() {
+    this.map && window.removeEventListener('resize', () => this.map.resize())
+  },
   computed: {
     qualityWarning() {
       return [
@@ -172,6 +176,7 @@ export default {
     init() {
       this.$echarts.registerMap(this.mapName, china)
       this.map = this.$echarts.init(this.$refs.map)
+      window.addEventListener('resize', () => this.map.resize())
       this.map.setOption(this.config)
     },
     setMapData(type) {

src/views/components/rice-fish/mode-rate2.vue

 <template>
   <div class="mode-rate">
-    <!-- <div class="legend">
+    <div class="legend">
       <p v-for="(item, i) in data" :key="item.name"><span :style="`background:${config.colors[i]}`"/> {{item.name}}</p>
-    </div> -->
+    </div>
     <div class="chart-wrapper" v-if="showChart">
       <div>
         <p class="title"><span/>面积</p>
@@ -15,10 +15,19 @@
       </div>
       <div>
         <p class="title"><span/>水稻产值</p>
-        <m-chart style="z-index:99;" :config="{...config3, colors: config2.colors}" :data="data3"/>
+        <m-chart style="z-index:99;" :config="config3" :data="data3"/>
         <div class="border" />
       </div>
-      <div>
+      <div class="bar">
+        <Select class="custom-select" style="top:0;" v-model="curType" transfer>
+          <Option v-for="item in ['产量', '产值']" :key="item" :value="item">{{item}}</Option>
+        </Select>
+        <p class="title"><span/>水产品{{curType}}</p>
+        <div class="chart">
+          <m-chart style="z-index:99;" :config="config4" :data="barData" :options="{xAxis}"/>
+        </div>
+      </div>
+      <!-- <div>
         <p class="title"><span/>水产品产量</p>
         <m-chart style="z-index:99;" :config="{...config2, colors: config3.colors}" :data="data4"/>
         <div class="border" />
@@ -27,7 +36,7 @@
         <p class="title"><span/>水产品产值</p>
         <m-chart style="z-index:99;" :config="config3" :data="data5"/>
         <div class="border" />
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -39,8 +48,7 @@ export default {
     return {
       showChart: false,
       config: {
-        // colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
-        colors: ['#21f4f9', '#2182f9', '#f59946', '#45dbf6', '#44b0f2', '#4777f5', '#4f45f7', '#af43f7', '#fb43f2'],
+        colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
         legend: {
           hide: true,
         },
@@ -64,8 +72,7 @@ export default {
         {name: '其他', value: 0},
       ],
       config2: {
-        // colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
-        colors: ['#ffda30', '#31d7ff', '#f59946', '#45dbf6', '#44b0f2', '#4777f5', '#4f45f7', '#af43f7', '#fb43f2'],
+        colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
         legend: {
           hide: true,
         },
@@ -89,8 +96,7 @@ export default {
         {name: '其他', value: 0},
       ],
       config3: {
-        // colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
-        colors: ['#4f7aed', '#ffa820', '#f59946', '#45dbf6', '#44b0f2', '#4777f5', '#4f45f7', '#af43f7', '#fb43f2'],
+        colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
         legend: {
           hide: true,
         },
@@ -113,6 +119,32 @@ export default {
         {name: '稻螺', value: 0},
         {name: '其他', value: 0},
       ],
+      config4: {
+        colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
+        legend: {
+          hide: true,
+        },
+        tooltip: {
+          confine: true,
+        },
+        shape: [
+          {key: 'value', type: 'bar', barWidth: '30%', color: params => ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'][params.dataIndex]}
+        ],
+        xAxis: {
+          key: 'name',
+        },
+      },
+      xAxis: {
+        axisLabel: {
+          rotate: 0,
+          interval: 0,
+          fontSize: 10 * Number((screen.height / 800).toFixed(1)),
+          textStyle: {
+            color: '#fff',
+          },
+        }
+      },
+      curType: '产量',
       data4: [
         {name: '稻小龙虾', value: 2305.104},
         {name: '稻蟹', value: 75.546},
@@ -140,6 +172,11 @@ export default {
   mounted() {
     setTimeout(() => this.showChart = true)
   },
+  computed: {
+    barData() {
+      return this.curType === '产量' ? this.data4 : this.data5
+    },
+  }
 }
 </script>
 
@@ -171,7 +208,7 @@ export default {
       .border
         width 8rem
         height @width
-        border 0.2rem solid transparent
+        border 0.2rem solid #36d4f5
         position absolute
         top 50%
         left 50%
@@ -179,18 +216,14 @@ export default {
         border-radius 50%
         box-shadow 0 0 1rem 0.2rem rgba(255,255,255,0.3), inset 0 0 1rem 0.2rem rgba(255,255,255,0.3)
         opacity .9
-      &:nth-of-type(2)
-        .border
-          border-color #f6d633
-      &:nth-of-type(3)
-        .border
-          border-color #36d4f5
-      &:nth-of-type(4)
-        .border
-          border-color #4b78e2
-      &:nth-of-type(5)
-        .border
-          border-color #e39e2c
+      &.bar
+        flex 2.5
+        position relative
+        >.chart
+          width 100%
+          height 82%
+          margin-top 2rem
+
     .title
       position absolute
       left 1rem

src/views/components/rice-fish/province.vue

@@ -16,7 +16,7 @@
       <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
     </Select>
   </div>
-  <m-card area="box1" title="养殖模式数据占比">
+  <m-card area="box1" title="养殖模式数据统计">
     <ModeRate2 />
   </m-card>
   <m-card area="box2" title="示范区按面积分类占比">

src/views/components/rice-fish/rice-fish-map.vue

@@ -221,6 +221,9 @@ export default {
   mounted() {
     this.$nextTick(this.initMap)
   },
+  beforeDestroy() {
+    this.map && window.removeEventListener('resize', () => this.map.resize())
+  },
   computed: {
     sizeRate() {
       return Number((screen.height / 800).toFixed(1))
@@ -231,6 +234,7 @@ export default {
       // 初始化echarts
       this.$echarts.registerMap(this.mapName, china)
       this.map = this.$echarts.init(this.$refs.map)
+      window.addEventListener('resize', () => this.map.resize())
       this.addEvent()
       this.loadNationMap()
     },

src/views/components/seedling/migrate-map.vue

@@ -117,6 +117,9 @@ export default {
   mounted() {
     this.$nextTick(this.initMap)
   },
+  beforeDestroy() {
+    this.map && window.removeEventListener('resize', () => this.map.resize())
+  },
   computed: {
     sizeRate() {
       return Number((screen.height / 800).toFixed(1))
@@ -127,6 +130,7 @@ export default {
       // 初始化echarts
       this.$echarts.registerMap(this.mapName, china)
       this.map = this.$echarts.init(this.$refs.map)
+      window.addEventListener('resize', () => this.map.resize())
       // this.addEvent()
       // this.config.series.push({
       //   type: 'scatter', // series图表类型

src/views/components/seedling/operate-situation.vue

@@ -26,6 +26,7 @@ export default {
   name: 'OperateSituation',
   data() {
     return {
+      chart: null,
       option: {
         tooltip: {
           trigger: 'axis',
@@ -112,6 +113,9 @@ export default {
   mounted() {
     setTimeout(this.init, 0)
   },
+  beforeDestroy() {
+    this.chart && window.removeEventListener('resize', () => this.chart.resize())
+  },
   computed: {
     sizeRate() {
       return Number((screen.height / 800).toFixed(1))
@@ -119,7 +123,9 @@ export default {
   },
   methods: {
     init() {
-      this.$echarts.init(this.$refs.chart).setOption(this.option)
+      this.chart = this.$echarts.init(this.$refs.chart)
+      window.addEventListener('resize', () => this.chart.resize())
+      this.chart.setOption(this.option)
     }
   }
 }

src/views/components/seedling/seedling-map.vue

@@ -246,6 +246,9 @@ export default {
   mounted() {
     this.$nextTick(this.initMap)
   },
+  beforeDestroy() {
+    this.map && window.removeEventListener('resize', () => this.map.resize())
+  },
   computed: {
     sizeRate() {
       return Number((screen.height / 800).toFixed(1))
@@ -256,6 +259,7 @@ export default {
       // 初始化echarts
       this.$echarts.registerMap(this.mapName, china)
       this.map = this.$echarts.init(this.$refs.map)
+      window.addEventListener('resize', () => this.map.resize())
       this.addEvent()
       this.loadNationMap()
     },

src/views/seedling.vue

@@ -21,7 +21,7 @@
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
       <div v-show="!showProvince && !showCompany" area="left" class="content part-left">
         <m-card title="近5年面积与数量对比">
-          <AreaCount />
+          <AreaCount v-if="!showProvince && !showCompany"/>
         </m-card>
         <m-card title="产销数据信息">
           <SalesData />
@@ -77,10 +77,10 @@
           </Select>
         </div>
         <m-card title="良种场性质分析">
-          <PropertyAnalysis />
+          <PropertyAnalysis v-if="!showProvince && !showCompany"/>
         </m-card>
         <m-card title="良种场经营情况">
-          <OperateSituation />
+          <OperateSituation v-if="!showProvince && !showCompany"/>
         </m-card>
       </div>
     </m-animate>