vue地图按区域数据不同显示相应的颜色

<template>
  <div style="height:100%;width:100%">
     <div id="chart_example"></div>
     <div class="mapTips">
       <div class="orgMsg"  v-for="(items,index) in orgMsg" :key="index">{
   {
   items.name}}:<span class="msgValue">{
   {
   items.value}}</span><span class="msgValueTip">{
   {
   items.tip}}</span></div>
     </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import echartsgl from 'echarts-gl'
var cywc_zyq = require('@/assets/json/json.json')  // 引入geojson文件

export default {
   
  name: 'echartsMap',
  data () {
   
    return {
   
      msg: 'Welcome to Your Vue.js App',
      orgMsg:[
        {
   name:'合格台区个数',value:'0',tip:''},
        {
   name:'不合格台区个数',value:'0',tip:''},
        {
   name:'合格率',value:'0',tip:'%'},
        {
   name:'指标统计日期',value:this.nowDate,tip:''}
      ],
      mapkey:'',
      mapDataArr:[],
      nowDate:null,  
      nowTime:null,   
      timer: "",           
      currentTime: new Date(),
      aData:null
    }
  },
  created() {
   
    this.timer = setInterval(this.getTime, 1000);
  },
  mounted () {
   
    this.getAreaData();
  },
  methods: {
   
    getTime(){
   
            let _this=this;
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const hour= date.getHours();
            const minute = date.getMinutes();
            const second = date.