style:雷达图

+<template>
+  <div id="jgChart" />
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+    };
+  },
+  methods: {
+    drawInit () {
+      let datavalue = [26, 300, 2000, 1200, 800];
+      let ii = -1;
+      var chartDom = document.getElementById('jgChart');
+      var myChart = this.$echarts.init(chartDom);
+      var option;
+      option = {
+        radar: {
+          indicator: [
+            { name: '原则监管', max: 2600 },
+            { name: '时效监管', max: 2600 },
+            { name: '证书监管', max: 3600 },
+            { name: '年限监管', max: 2600 },
+            { name: '内容监管', max: 2600 },
+          ],
+          name: {
+            rich: {
+              a: {
+                color: '#606266'
+              },
+              b: {
+                color: '#409EFF',
+                align: 'center',
+              }
+            },
+            formatter: (a, b) => {
+              ii++;
+              return `{a|${a}}\n{b|${datavalue[ii]}}`
+            }
+          }
+        },
+        series: [
+          {
+            type: 'radar',
+            symbol: 'none',//去掉拐点的圈
+            itemStyle: {
+              color: '#409EFF'
+            },
+            data: [
+              {
+                value: datavalue,
+              }
+            ]
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  },
+  mounted () {
+    this.drawInit()
+  }
+}
+</script>
+<style scoped>
+#jgChart {
+  width: 100%;
+  height: 360px;
+}
+</style>

+<template>
+  <div class="map">
+    <div class="map-box" ref="mapContain" />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      mapName: "汉中市",
+      listArr: [{
+        name: '汉台区',
+        value: '6000'
+      },
+      {
+        name: '南郑区',
+        value: '8000'
+      },
+      {
+        name: '城固县',
+        value: '3000'
+      },
+      {
+        name: '洋县',
+        value: '7000'
+      },
+      {
+        name: '西乡县',
+        value: '1000'
+      },
+      {
+        name: '镇巴县',
+        value: '2000'
+      },
+      {
+        name: '勉县',
+        value: '600'
+      },
+      {
+        name: '留坝县',
+        value: '3000'
+      },
+      {
+        name: '佛坪县',
+        value: '1000'
+      },
+      {
+        name: '宁强县',
+        value: '1000'
+      },
+      {
+        name: '略阳县',
+        value: '1000'
+      }], //城市json
+      max: "9000", //最大value值
+      min: "500", // 最小value值
+    };
+  },
+  methods: {
+    drawProvinceMap (mapName) {
+      this.mapName = mapName;
+      // 引入区域数据
+      require('./hanzhong.js');
+      let _this = this;
+      let myChart8 = this.$echarts.init(this.$refs.mapContain);
+      const option = {
+        visualMap: {
+          min: 0,
+          max: _this.max,
+          top: "bottom",
+          right: 10,
+          splitNumber: 6,
+          seriesIndex: [0],
+          itemWidth: 20, // 每个图元的宽度
+          itemGap: 2,    // 每两个图元之间的间隔距离，单位为px
+          pieces: [      // 自定义每一段的范围，以及每一段的文字
+            { gte: 6000, label: '6000以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
+            { gte: 2000, lte: 6000, label: '2000-6000', color: '#3375e4' },
+            { gte: 1000, lte: 2000, label: '1000-2000', color: '#6797ef' },
+            { gte: 500, lte: 1000, label: '500-1000', color: '#96b5ef' },
+          ],
+          textStyle: {
+            color: '#737373'
+          }
+        },
+        // 数据移入显示
+        tooltip: {
+          trigger: "item",
+          formatter: function (params) {
+            return params.value ? params.name + ':' + params.value + '件' : params.name + ':' + '0件'
+          },
+          // 边框颜色
+          borderColor: "#CB000C",
+          // 边框宽度
+          borderWidth: "1",
+        },
+        series: [
+          {
+            type: "map",
+            map: this.mapName,
+            itemStyle: {
+              normal: {  //正常状态
+                label: {
+                  show: true,
+                  formatter: '{b}',   //地图上显示的数据，分别对应data中的name和value
+                  color: '#fff',
+                },
+                areaColor: '#409EFF'   //地图区域的颜色
+              },
+              emphasis: {
+                label: { show: true },
+                areaColor: "#67C23A", //鼠标进入时的颜色
+              },
+            },
+            data: _this.listArr,
+          },
+        ],
+      };
+      myChart8.setOption(option);
+    },
+  },
+  mounted () {
+    // 初始化数据
+    this.drawProvinceMap("汉中市");
+  }
+}
+</script>
+<style scoped>
+.map {
+  width: 100%;
+}
+
+.map-box {
+  display: inline-block;
+  width: 100%;
+  height: 80vh;
+}
+</style>

@@ -30,10 +30,14 @@
     </div>
     <div class="jgHome-center">
       <el-card>
+        <hzMap />
       </el-card>
     </div>
     <div class="jgHome-right">
       <el-card>
+        <div slot="header">
+          <jgChart />
+        </div>
       </el-card>
     </div>
   </div>
@@ -41,9 +45,11 @@
 
 <script>
 import barChart from './components/barChart'
+import hzMap from './components/map'
+import jgChart from './components/jgChart'
 export default {
   name: "jgHome",
-  components: { barChart },
+  components: { barChart, hzMap, jgChart },
   data () {
     return {
     }