完善

build/webpack.base.conf.js

@@ -51,6 +51,10 @@ module.exports = {
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
       },
+      {
+        test: /view-design.src.*?js$/,
+        loader: 'babel-loader',
+      },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url-loader',

index.html

@@ -7,7 +7,7 @@
     <title>dashboard</title>
     <style>
       html {
-        font-size: 1vw;
+        font-size: 1.8vh;
       }
     </style>
     <script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=ee2b5d5c0c44c768f1d2593eb4a7dfa6&plugin=Map3D,AMap.DistrictSearch,AMap.ControlBar"></script>

src/App.vue

@@ -12,6 +12,7 @@ export default {
 
 <style lang="stylus">
 @import './assets/css/variables.styl'
+@import './assets/css/reset.styl'
 
 @font-face
   font-family DIN

src/assets/css/reset.styl

+$color-main = #5BD5FF
+
+#app
+  .ivu-select-selection
+  .ivu-select-dropdown
+    font-size 0.8rem
+    background-color rgba(0,0,0,0.2)
+    border-radius 0
+    border 0.1rem solid $color-main
+    color $color-main
+    padding 0
+  .ivu-select-arrow
+    color $color-main
+  .ivu-select-selected-value
+    font-size 0.8rem
+  .ivu-select-item
+    font-size 0.8rem !important
+    text-align center
+    color $color-main
+    &:hover
+    &.ivu-select-item-selected
+      color #fff
+      background $color-main

src/assets/css/variables.styl

@@ -3,6 +3,16 @@ $font-pang = Pangmenzhengdao, 'Avenir', Helvetica, Arial, sans-serif
 $font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif
 $color-map(opacity = 0.3)
   rgba(91, 213, 255, opacity)
+$gd-layout()
+  width 100%
+  height 100%
+  background-size cover
+  background-position center
+  background-color #061627
+  position relative
+  display grid
+  grid-gap 1rem
+  padding 1rem
 
 
 $fontColor = #2c3e50

src/components/MonitorChart/index.js

+import MonitorChart from './monitor-chart.vue'
+export default (Vue) => {
+  Vue.component('m-chart', MonitorChart)
+}

src/views/guangdong/components/purchase-chart.vue → src/components/MonitorChart/monitor-chart.vue

-// 交易分析专题 - 累计违规举报次数
 <template>
   <div class="chart" ref="chart"/>
 </template>
 
 <script>
 export default {
-  name: 'PurchaseChart',
+  name: 'CommonChart',
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    options: {
+      type: Object,
+      default() {
+        return {
+          colors: null,
+          grid: {},
+          legend: {},
+          tooltip: {},
+          xAxis: {},
+          yAxis: {},
+        }
+      }
+    },
+  },
   mounted() {
-    this.init()
+    this.$nextTick(this.init)
   },
   methods: {
     init() {
       const chart = this.$echarts.init(this.$refs.chart)
-      const options = {
+      chart.setOption(this.config)
+    }
+  },
+  computed: {
+    config() {
+      const options = {}
+      const colors = this.options.colors || ['#21640D', '#2F8B14', '#71C012', '#FFCE34', '#F47C1F']
+
+      options.grid = Object.assign(this.defaultOptions.grid, this.options.grid)
+      options.tooltip = Object.assign(this.defaultOptions.tooltip, this.options.tooltip)
+      options.xAxis = Object.assign(this.defaultOptions.xAxis, this.options.xAxis)
+      options.yAxis = Object.assign(this.defaultOptions.yAxis, this.options.yAxis)
+      if(this.showLegend) {
+        options.legend = Object.assign(this.defaultOptions.legend, this.options.legend)
+        options.legend.data = this.data.map(item => item.name)
+      }
+      options.series = this.data.map((item, index) => {
+        let color = colors[index]
+        if (Array.isArray(color)) {
+          color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {offset: 0, color: color[0]},
+            {offset: 1, color: color[1]}
+          ])
+        }
+        const result = {
+          name: item.name,
+          barWidth: '50%',
+          itemStyle: { color },
+          data: item.data || []
+        }
+        if (this.options.series) {
+          return Object.assign(result, this.options.series)
+        }
+        return result
+      })
+      return options
+    },
+    defaultOptions() {
+      return {
         grid: {
-          top: '50px',
-          left: '30px',
-          right: '30px',
+          top: '25%',
+          left: '3%',
+          right: '3%',
           bottom: '5px',
           width: 'auto',
           height: 'auto',
           containLabel: true,
         },
         legend: {
-          top: 20,
-          right: 10,
-          data: ['供应数据', '采购数据'],
+          top: '5%',
+          left: '6%',
+          width: '100%',
+          data: [],
+          itemWidth: 15,
           textStyle: {
             color: '#ccc',
             fontSize: this.fontSize,
@@ -39,7 +103,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          data: [],
           axisLabel: {
             textStyle: {
               color: '#ccc',
@@ -59,13 +123,11 @@ export default {
           }
         },
         yAxis: {
-          name: '(吨)',
           nameTextStyle: {
             color: '#fff',
             fontSize: this.fontSize,
           },
           type: 'value',
-          interval: 2000,
           splitLine: {
             show: true,
             lineStyle: {
@@ -84,52 +146,18 @@ export default {
             }
           },
         },
-        series: [
-          {
-            name: '供应数据',
-            type: 'bar',
-            barWidth: '30%',
-            barGap: 0,
-            itemStyle: {
-              shadowColor: '#0076FF',
-              shadowBlur: 6,
-              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {offset: 0, color: '#1FECFF'},
-                {offset: 1, color: '#0076FF'}
-              ])
-            },
-            data: [6500, 8500, 6000, 4600, 5600, 8500, 6000, 2500, 4500, 6500, 4500, 8000],
-          },
-          {
-            name: '采购数据',
-            type: 'bar',
-            barWidth: '30%',
-            barGap: 0,
-            itemStyle: {
-              shadowColor: '#c16ad6',
-              shadowBlur: 6,
-              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {offset: 0, color: '#c16ad6'},
-                {offset: 1, color: '#3725b2'}
-              ])
-            },
-            data: [5500, 9000, 5000, 3600, 4600, 7500, 7000, 3500, 5500, 7500, 5500, 6700],
-          },
-        ],
       }
-      chart.setOption(options)
-    }
-  },
-  computed: {
+    },
     fontSize() {
-      return Math.floor(window.innerWidth / 100) - 1
+      // return Math.floor(window.innerWidth / 100) - 1
+      return Math.floor(screen.height * 1.48 / 100)
     },
   }
 }
 </script>
 
 <style lang="stylus" scoped>
-.chart
-  height 100%
-  width 100%
+  .chart
+    height 100%
+    width 100%
 </style>

src/components/MonitorFlip/monitor-flip.vue

@@ -42,4 +42,6 @@ export default {
     background linear-gradient($color-map() 47%, transparent 50%, $color-map() 53%)
     margin-right 0.4rem
     padding 0 0.4rem
+  .odometer-digit-inner
+    padding 0 0.4rem
 </style>

src/main.js

@@ -5,10 +5,11 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import echarts from 'echarts'
-import {Button, Divider, Progress} from 'view-design'
+import {Button, Divider, Progress, Select, Option} from 'view-design'
 import ajax from '@/server/ajax'
 import api from '@/server/api'
 import MonitorCard from '@/components/MonitorCard'
+import MonitorChart from '@/components/MonitorChart'
 import MonitorCount from '@/components/MonitorCount'
 import MonitorFlip from '@/components/MonitorFlip'
 import MonitorBrief from '@/components/MonitorBrief'
@@ -24,9 +25,12 @@ Vue.use(MonitorCount)
 Vue.use(MonitorFlip)
 Vue.use(MonitorBrief)
 Vue.use(MonitorProgress)
+Vue.use(MonitorChart)
 Vue.component('Button', Button)
 Vue.component('Divider', Divider)
 Vue.component('Progress', Progress)
+Vue.component('Select', Select)
+Vue.component('Option', Option)
 
 /* eslint-disable no-new */
 new Vue({

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
-import Main from '@/views/main'
-import ChinaMap from '@/views/china'
-import GDProduction from '@/views/guangdong/gd-production'
-import GDTrade from '@/views/guangdong/gd-trade'
-import GDDisease from '@/views/guangdong/gd-disease'
-import GDFish from '@/views/guangdong/gd-fish'
-import MapTest from '@/views/map-test'
-import Map3D from '@/views/3d-map'
+
+const Main = () => import('@/views/main')
+const ChinaMap = () => import('@/views/china')
+const GDProduction = () => import('@/views/guangdong/gd-production')
+const GDTrade = () => import('@/views/guangdong/gd-trade')
+const GDDisease = () => import('@/views/guangdong/gd-disease')
+const GDFish = () => import('@/views/guangdong/gd-fish')
+const GDIndustry = () => import('@/views/guangdong/gd-industry')
+const MapTest = () => import('@/views/map-test')
+const Map3D = () => import('@/views/3d-map')
 
 Vue.use(Router)
 
@@ -43,6 +45,11 @@ export default new Router({
       name: 'fish',
       component: GDFish
     },
+    {
+      path: '/industry',
+      name: 'industry',
+      component: GDIndustry
+    },
     {
       path: '/map2',
       name: 'map2',

src/views/guangdong/components/disease-pie.vue

@@ -4,9 +4,8 @@
 </template>
 
 <script>
-import { log } from 'util'
 export default {
-  name: 'DiseaseTrend',
+  name: 'DiseasePie',
   data() {
     return {
       data: [

src/views/guangdong/components/disease-trend.vue

-// 疫病灾害分析专题 - 疫情情况趋势
-<template>
-  <div class="chart" ref="chart"/>
-</template>
-
-<script>
-export default {
-  name: 'DiseaseTrend',
-  mounted() {
-    this.init()
-  },
-  methods: {
-    init() {
-      const chart = this.$echarts.init(this.$refs.chart)
-      const options = {
-        grid: {
-          top: '50px',
-          left: '30px',
-          right: '30px',
-          bottom: '5px',
-          width: 'auto',
-          height: 'auto',
-          containLabel: true,
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          }
-        },
-        xAxis: {
-          type: 'category',
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-          axisLabel: {
-            textStyle: {
-              color: '#ccc',
-            },
-            fontSize: this.fontSize,
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(91,213,255,0.3)'
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(91,213,255,0.3)'
-            }
-          }
-        },
-        yAxis: {
-          name: '(次)',
-          nameTextStyle: {
-            color: '#fff',
-            fontSize: this.fontSize,
-          },
-          type: 'value',
-          interval: 2,
-          min: 0,
-          max: 10,
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(91,213,255,0.3)'
-            }
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#ccc',
-            },
-            fontSize: this.fontSize,
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(91,213,255,0.3)'
-            }
-          },
-        },
-        series: [
-          {
-            type: 'line',
-            areaStyle: {
-              color: 'rgba(0, 118, 255, 0.5)'
-            },
-            itemStyle: {
-              color: 'rgba(0, 118, 255, 1)'
-            },
-            data: [2,5,8,3,1,6,4,5,8,4,3,4],
-          },
-        ],
-      }
-      chart.setOption(options)
-    }
-  },
-  computed: {
-    fontSize() {
-      return Math.floor(window.innerWidth / 100) - 1
-    },
-  }
-}
-</script>
-
-<style lang="stylus" scoped>
-.chart
-  height 100%
-  width 100%
-</style>

src/views/guangdong/components/report-chart.vue → src/views/guangdong/components/fish-chart.vue

-// 交易分析专题 - 累计违规举报次数
+// 产业布局分析专题 - 各品种鱼苗数量
 <template>
-  <div class="chart" ref="chart"/>
+<div class="wrapper">
+  <div class="chart" ref="chart" />
+  <Select v-model="theme" class="select" size="small">
+    <Option v-for="item in themes" :value="item" :key="item">{{ item }}</Option>
+  </Select>
+</div>
 </template>
 
 <script>
 export default {
-  name: 'ReportChart',
+  name: 'FishChart',
+  data() {
+    return {
+      theme: '淡水鱼',
+      themes: ['淡水鱼', '海水鱼'],
+      dates: ['2014年', '2015年', '2016年', '2017年', '2018年'],
+    }
+  },
   mounted() {
     this.init()
   },
@@ -14,14 +26,25 @@ export default {
       const chart = this.$echarts.init(this.$refs.chart)
       const options = {
         grid: {
-          top: '50px',
-          left: '30px',
-          right: '30px',
+          top: '25%',
+          left: '3%',
+          right: '3%',
           bottom: '5px',
           width: 'auto',
           height: 'auto',
           containLabel: true,
         },
+        legend: {
+          top: '5%',
+          left: '6%',
+          width: '100%',
+          data: this.themes,
+          itemWidth: 15,
+          textStyle: {
+            color: '#ccc',
+            fontSize: this.fontSize,
+          },
+        },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -30,7 +53,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          data: this.dates,
           axisLabel: {
             textStyle: {
               color: '#ccc',
@@ -50,13 +73,15 @@ export default {
           }
         },
         yAxis: {
-          name: '(次)',
+          name: '(亿尾)',
           nameTextStyle: {
             color: '#fff',
             fontSize: this.fontSize,
           },
           type: 'value',
-          interval: 20,
+          interval: 200,
+          min: 8000,
+          max: 9000,
           splitLine: {
             show: true,
             lineStyle: {
@@ -79,7 +104,6 @@ export default {
           {
             type: 'bar',
             barWidth: '50%',
-            barGap: 0,
             itemStyle: {
               shadowColor: '#0076FF',
               shadowBlur: 6,
@@ -88,7 +112,7 @@ export default {
                 {offset: 1, color: '#0076FF'}
               ])
             },
-            data: [30, 50, 10, 60, 70, 40, 50, 70, 30, 50, 90, 58],
+            data: [8700,8300,8500,8400,8300],
           },
         ],
       }
@@ -104,7 +128,16 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+.wrapper
+  position relative
+  width 100%
+  height 100%
   .chart
     height 100%
     width 100%
+  .select
+    position absolute
+    top 1rem
+    right 1rem
+    width 8rem
 </style>

src/views/guangdong/components/production-chart.vue

-// 生产专题 - 各品种养殖/出塘数据
-<template>
-  <div class="chart" ref="chart"/>
-</template>
-
-<script>
-export default {
-  name: 'ProductionChart',
-  mounted() {
-    this.init()
-  },
-  methods: {
-    init() {
-      const chart = this.$echarts.init(this.$refs.chart)
-      const options = {
-        grid: {
-          top: '50px',
-          left: '80px',
-          right: '80px',
-          bottom: '5px',
-          width: 'auto',
-          height: 'auto',
-          containLabel: true,
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          }
-        },
-        xAxis: {
-          type: 'category',
-          data: ['淡水育苗', '淡水鱼种', '投放鱼种', '稚鳖', '稚龟', '鳗苗捕捞', '海水鱼苗', '虾类育苗', '贝类育苗', '海带', '紫菜', '海参'],
-          axisLabel: {
-            textStyle: {
-              color: '#ccc',
-            },
-            fontSize: this.fontSize,
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(91,213,255,0.3)'
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(91,213,255,0.3)'
-            }
-          }
-        },
-        yAxis: {
-          name: '(吨)',
-          nameTextStyle: {
-            color: '#fff',
-            fontSize: this.fontSize,
-          },
-          type: 'value',
-          interval: 2000,
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(91,213,255,0.3)'
-            }
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#ccc',
-            },
-            fontSize: this.fontSize,
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(91,213,255,0.3)'
-            }
-          },
-        },
-        series: [
-          {
-            type: 'bar',
-            barWidth: '50%',
-            barGap: 0,
-            itemStyle: {
-              shadowColor: '#0076FF',
-              shadowBlur: 6,
-              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {offset: 0, color: '#1FECFF'},
-                {offset: 1, color: '#B645FF'}
-              ])
-            },
-            data: [6500, 8500, 6000, 4600, 5600, 8500, 6000, 2500, 4500, 6500, 4500, 8000],
-          },
-        ],
-      }
-      chart.setOption(options)
-    }
-  },
-  computed: {
-    fontSize() {
-      return Math.floor(window.innerWidth / 100) - 1
-    },
-  }
-}
-</script>
-
-<style lang="stylus" scoped>
-  .chart
-    height 100%
-    width 100%
-</style>

src/views/guangdong/components/progress-list.vue

@@ -24,6 +24,7 @@ export default {
   },
   methods: {
     calcPercent(val) {
+      if (!val || val < 0) return 0
       const percent = Math.round((val / 50) * 100)
       return percent >= 100 ? 100 : percent
     }

src/views/guangdong/gd-disease.vue

@@ -19,7 +19,7 @@
     </div>
     <div class="box3">
       <m-card mode="2" title="疫情情况趋势">
-        <DiseaseTrend />
+        <m-chart :showLegend="false" :options="options" :data="data"/>
       </m-card>
     </div>
     <div class="box4">
@@ -34,7 +34,6 @@
 import DataList from './components/list'
 import DiseaseList from './components/disease-list'
 import ThemeTitle from './components/title'
-import DiseaseTrend from './components/disease-trend.vue'
 import DiseasePie from './components/disease-pie.vue'
 import GuangdongMap from './components/map'
 export default {
@@ -43,12 +42,31 @@ export default {
     DataList,
     DiseaseList,
     ThemeTitle,
-    DiseaseTrend,
     DiseasePie,
     GuangdongMap,
   },
   data() {
     return {
+      options: {
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          boundaryGap: false,
+        },
+        yAxis: {
+          name: '(次)',
+          min: 0,
+          max: 10,
+          interval: 2,
+        },
+        series: {
+          type: 'line',
+          areaStyle: {},
+        },
+        colors: ['rgba(0, 118, 255, 1)'],
+      },
+      data: [
+        {data: [2,5,8,3,1,6,4,5,8,4,3,4]}
+      ],
       list1: [
         {name: '淡水鱼苗', value: 8279, unit: '亿尾'},
         {name: '淡水鱼种', value: 222544, unit: '吨'},
@@ -93,21 +111,13 @@ export default {
 
 <style lang="stylus" scoped>
 #container
-  width 100%
-  height 100%
-  background-size cover
-  background-position center
-  background-color #061627
-  position relative
-  display grid
+  $gd-layout()
   grid-template-areas \
     'box1 . . . box2'\
     'box1 . . . box2'\
     'box3 box3 box4 box4 box2'
   grid-template-rows 1fr 1fr 1fr
   grid-template-columns 1.2fr 1fr 1fr 1fr 1.2fr
-  grid-gap 0.7rem
-  padding 0.7rem
   .sum
     display flex
     justify-content space-around

src/views/guangdong/gd-fish.vue

@@ -67,21 +67,13 @@ export default {
 
 <style lang="stylus" scoped>
 #container
-  width 100%
-  height 100%
-  background-size cover
-  background-position center
-  background-color #061627
-  position relative
-  display grid
+  $gd-layout()
   grid-template-areas \
     '. . . box1'\
     '. . . box1'\
     'box2 box2 box3 box3'
   grid-template-rows 1fr 1fr 1fr
   grid-template-columns 2fr 1fr 1fr 2fr
-  grid-gap 0.7rem
-  padding 0.7rem
   .flag
     display flex
     position absolute

src/views/guangdong/gd-industry.vue

+<template>
+  <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
+    <ThemeTitle class="theme">广东省产业布局分析专题</ThemeTitle>
+    <div class="box1">
+      <m-card mode="2" title="渔业经济产值">
+        <m-chart :options="options1" :data="data1"/>
+      </m-card>
+    </div>
+    <div class="box2">
+      <m-card mode="2" title="渔业经济产量">
+        <m-chart :options="options2" :data="data2"/>
+      </m-card>
+    </div>
+    <div class="box3">
+      <m-card mode="2" title="渔业加工产量">
+        <m-chart :options="options3" :data="data3"/>
+      </m-card>
+    </div>
+    <div class="box4">
+      <m-card mode="2" title="各品种鱼苗数量">
+        <FishChart />
+      </m-card>
+    </div>
+    <div class="box5">
+      <m-card mode="2" title="渔业种业经济产量">
+        <m-chart :options="options5" :data="data5"/>
+      </m-card>
+    </div>
+    <div class="box6">
+      <m-card mode="2" title="渔业种业经济产值">
+        <m-chart :options="options4" :data="data4"/>
+      </m-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemeTitle from './components/title'
+import FishChart from './components/fish-chart'
+export default {
+  name: 'GDIndustry',
+  components: {
+    ThemeTitle,
+    FishChart,
+  },
+  data() {
+    return {
+      options1: {
+        xAxis: {
+          data: ['2015年', '2016年', '2017年', '2018年'],
+        },
+        yAxis: {
+          name: '(万元)',
+          interval: 200,
+          max: 1600,
+        },
+        series: {
+          type: 'bar',
+          stack: '总量',
+        }
+      },
+      data1: [
+        {name: '海水养殖', data: [200,200,200,200]},
+        {name: '淡水养殖', data: [500,550,580,600]},
+        {name: '海水捕捞', data: [160,160,160,160]},
+        {name: '淡水捕捞', data: [100,100,100,100]},
+        {name: '水产苗种', data: [200,200,200,200]},
+      ],
+      options2: {
+        xAxis: {
+          data: ['2015年', '2016年', '2017年', '2018年'],
+        },
+        yAxis: {
+          name: '(吨)',
+          interval: 200,
+          max: 1600,
+        },
+        series: {
+          type: 'bar',
+          stack: '总量',
+        }
+      },
+      data2: [
+        {name: '海水养殖', data: [200,200,200,200]},
+        {name: '淡水养殖', data: [500,550,580,600]},
+        {name: '海水捕捞', data: [160,160,160,160]},
+        {name: '淡水捕捞', data: [100,100,100,100]},
+        {name: '水产苗种', data: [200,200,200,200]},
+      ],
+      options3: {
+        colors: ['#F47C1F', '#71C012', '#FFCE34'],
+        grid: {
+          right: '5%',
+        },
+        xAxis: {
+          data: ['2015年', '2016年', '2017年', '2018年'],
+          boundaryGap: false,
+        },
+        yAxis: {
+          name: '(吨)',
+          interval: 100,
+          max: 400,
+        },
+        series: {
+          type: 'line',
+          stack: '总量',
+          areaStyle: {},
+          symbol: 'circle',
+        }
+      },
+      data3: [
+        {name: '水产加工品总量', data: [130,140,150,145]},
+        {name: '淡水加工品总量', data: [110,120,100,110]},
+        {name: '海水加工品总量', data: [60,70,80,50]},
+      ],
+      options4: {
+        colors: ['#F47C1F', '#71C012', '#FFCE34'],
+        xAxis: {
+          data: ['2015年', '2016年', '2017年', '2018年'],
+        },
+        yAxis: {
+          name: '(万元)',
+          interval: 200,
+          max: 1600,
+        },
+        series: {
+          type: 'bar',
+          stack: '总量',
+          areaStyle: {},
+          symbol: 'circle',
+        }
+      },
+      data4: [
+        {name: '渔业产值', data: [200,200,200,200]},
+        {name: '渔业工业和建筑业', data: [500,550,580,600]},
+        {name: '渔业流通和服务业', data: [160,160,160,160]},
+      ],
+      options5: {
+        colors: ['#347122', '#C13636', '#F47C1F', '#940BC3', '#0076FF'],
+        grid: {
+          right: '5%',
+        },
+        xAxis: {
+          data: ['2015年', '2016年', '2017年', '2018年'],
+          boundaryGap: false,
+        },
+        yAxis: {
+          name: '(吨)',
+          interval: 100,
+          min: 200,
+          max: 900,
+        },
+        series: {
+          type: 'line',
+          stack: '总量',
+          symbol: 'circle',
+        }
+      },
+      data5: [
+        {name: '海水养殖', data: [250,300,350,300]},
+        {name: '海水捕捞', data: [130,140,150,145]},
+        {name: '淡水养殖', data: [110,120,100,110]},
+        {name: '淡水捕捞', data: [60,70,80,50]},
+        {name: '远洋渔业', data: [160,170,80,150]},
+      ],
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+#container
+  $gd-layout()
+  grid-template-areas \
+    '. theme .'\
+    'box1 box2 box3'\
+    'box4 box5 box6'
+  grid-template-rows 4rem 1fr 1fr
+  grid-template-columns 1fr 1fr 1fr
+  .theme
+    grid-area theme
+    width 120%
+    margin-left -10%
+  .box1
+    grid-area box1
+  .box2
+    grid-area box2
+  .box3
+    grid-area box3
+  .box4
+    grid-area box4
+  .box5
+    grid-area box5
+  .box6
+    grid-area box6
+</style>

src/views/guangdong/gd-production.vue

@@ -4,7 +4,7 @@
     <ThemeTitle>广东省生产专题</ThemeTitle>
     <div class="area">
       <p>当前广东省养殖面积</p>
-      <b><m-flip :value="888888888"/></b>
+      <b><m-flip :value="828688678"/></b>
       <span>k㎡</span>
     </div>
     <div class="box1">
@@ -19,7 +19,7 @@
     </div>
     <div class="box3">
       <m-card mode="2" title="各品种养殖/出塘数据">
-        <ProductionChart />
+        <m-chart :showLegend="false" :options="options" :data="data" />
       </m-card>
     </div>
   </div>
@@ -28,14 +28,12 @@
 <script>
 import DataList from './components/list'
 import ThemeTitle from './components/title'
-import ProductionChart from './components/production-chart.vue'
 import GuangdongMap from './components/map'
 export default {
   name: 'GDProduction',
   components: {
     DataList,
     ThemeTitle,
-    ProductionChart,
     GuangdongMap,
   },
   data() {
@@ -76,7 +74,30 @@ export default {
         {name: '潮州市', value: 3679, unit: 'k㎡'},
         {name: '揭阳市', value: 5240.5, unit: 'k㎡'},
         {name: '云浮市', value: 7785.11, unit: 'k㎡'},
-      ]
+      ],
+      options: {
+        xAxis: {
+          data: ['淡水育苗', '淡水鱼种', '投放鱼种', '稚鳖', '稚龟', '鳗苗捕捞', '海水鱼苗', '虾类育苗', '贝类育苗', '海带', '紫菜', '海参'],
+        },
+        yAxis: {
+          name: '(吨)',
+          interval: 2000,
+        },
+        series: {
+          type: 'bar',
+          itemStyle: {
+            shadowColor: '#0076FF',
+            shadowBlur: 6,
+            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {offset: 0, color: '#1FECFF'},
+              {offset: 1, color: '#B645FF'}
+            ])
+          },
+        }
+      },
+      data: [
+        {data: [6500, 8500, 6000, 4600, 5600, 8500, 6000, 2500, 4500, 6500, 4500, 8000]},
+      ],
     }
   },
 }
@@ -84,21 +105,13 @@ export default {
 
 <style lang="stylus" scoped>
 #container
-  width 100%
-  height 100%
-  background-size cover
-  background-position center
-  background-color #061627
-  position relative
-  display grid
+  $gd-layout()
   grid-template-areas \
     'box1 . box2'\
     'box1 . box2'\
     'box3 box3 box2'
   grid-template-rows 1fr 1fr 1fr
   grid-template-columns 1fr 3fr 1fr
-  grid-gap 0.7rem
-  padding 0.7rem
   .box1
     grid-area box1
   .box2

src/views/guangdong/gd-trade.vue

@@ -14,12 +14,12 @@
     </div>
     <div class="box3">
       <m-card mode="2" title="采购供应数据">
-        <PurchaseChart />
+        <m-chart :options="options1" :data="data1" />
       </m-card>
     </div>
     <div class="box4">
       <m-card mode="2" title="累计违规举报次数">
-        <ReportChart />
+        <m-chart :showLegend="false" :options="options2" :data="data2" />
       </m-card>
     </div>
   </div>
@@ -29,8 +29,6 @@
 import DataList from './components/list'
 import ProgressList from './components/progress-list'
 import ThemeTitle from './components/title'
-import ReportChart from './components/report-chart.vue'
-import PurchaseChart from './components/purchase-chart.vue'
 import GuangdongMap from './components/map'
 export default {
   name: 'GDProduction',
@@ -38,8 +36,6 @@ export default {
     DataList,
     ProgressList,
     ThemeTitle,
-    PurchaseChart,
-    ReportChart,
     GuangdongMap,
   },
   data() {
@@ -71,7 +67,54 @@ export default {
         {name: '海带', value: 28, unit: '元/斤'},
         {name: '紫菜', value: 4, unit: '元/斤'},
         {name: '海参', value: 200, unit: '元/斤'},
-      ]
+      ],
+      options1: {
+        colors: [['#1FECFF', '#0076FF'], ['#c16ad6', '#3725b2']],
+        legend: {
+          top: 20,
+          right: 10,
+          left: 'auto',
+        },
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        },
+        yAxis: {
+          name: '(吨)',
+          interval: 2000,
+        },
+        series: {
+          type: 'bar',
+          barWidth: '30%',
+          barGap: 0,
+        }
+      },
+      data1: [
+        {name: '供应数据', data: [6500, 8500, 6000, 4600, 5600, 8500, 6000, 2500, 4500, 6500, 4500, 8000]},
+        {name: '采购数据', data: [5500, 9000, 5000, 3600, 4600, 7500, 7000, 3500, 5500, 7500, 5500, 6700]},
+      ],
+      options2: {
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        },
+        yAxis: {
+          name: '(次)',
+          interval: 20,
+        },
+        series: {
+          type: 'bar',
+          itemStyle: {
+            shadowColor: '#0076FF',
+            shadowBlur: 6,
+            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {offset: 0, color: '#1FECFF'},
+              {offset: 1, color: '#0076FF'}
+            ])
+          },
+        }
+      },
+      data2: [
+        {data: [30, 50, 10, 60, 70, 40, 50, 70, 30, 50, 90, 58]},
+      ],
     }
   },
 }
@@ -79,21 +122,13 @@ export default {
 
 <style lang="stylus" scoped>
 #container
-  width 100%
-  height 100%
-  background-size cover
-  background-position center
-  background-color #061627
-  position relative
-  display grid
+  $gd-layout()
   grid-template-areas \
     'box1 . . box2'\
     'box1 . . box2'\
     'box3 box3 box4 box4'
   grid-template-rows 1fr 1fr 1fr
   grid-template-columns 1fr 1.2fr 1.2fr 1fr
-  grid-gap 0.7rem
-  padding 0.7rem
   .box1
     grid-area box1
   .box2