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.getSeconds();
            const str = ''
            if(this.hour>12) {
                    this.hour -= 12;
                    this.str = " AM";
            }else{
                        this.str = " PM";                        
                      }
            this.month=check(month);
            this.day=check(day);
            this.hour=check(hour);
            this.minute=check(minute);
            this.second=check(second);
            function check(i){
                                          const num = (i<10)?("0"+i) : i;
                                          return num;
                                      }
          _this.nowDate = year + "年" + this.month + "月" + this.day+"日";
          _this.nowTime = this.hour + ":" + this.minute + ":" + this.second + this.str;
    },
    drawLine () {
      let this_ = this
      let myChart = echarts.init(document.getElementById('chart_example'));
      echarts.registerMap('xicheng', cywc_zyq, {})
      myChart.hideLoading()
      var option = {
        tooltip: {// 提示框
          trigger: 'item',
          formatter: function (params) {
            return params.name
          }
        },
          dataRange: {
                x: 'left',
                y: 'bottom',
                splitList: [
                    {start: 90,label:'线损合格率(>90%)'},
                    {start: 80, end: 90,label:'线损合格率(<80%-90%)'},
                    {start: 70, end: 80,label:'线损合格率(<70%-80%)'},
                    {start: 60, end: 70,label:'线损合格率(<60%-70%)'},
                    {end: 60,label:'线损合格率(<60%)'}
                ],
                color: ['#31D76B', '#009CFF', '#D7C046','#FF8439','#E03D3D'],
                textStyle:{
                  color:'white'
                }
            },
        series: [{
          type: 'map3D',
          name: 'map3D',
          map: 'xicheng',
          label: {
            [ default: false ]
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,1)',
              fontSize: 15,
              opacity: 1,
              backgroundColor: 'rgba(0,0,0,0.2)'
            }
          },
          itemStyle: {
            color: 'rgba(95,158,160,0.5)',
            opacity: 1,
            borderWidth: 0.5,
            borderColor: '#000'
          },
          emphasis: {
            label: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 15
              }
            },
            // itemStyle高亮时的配置
            itemStyle: {
              // 高亮时地图板块颜色改变
              areaColor: '#66ffff'
            }
          },
          light: {
            // 场景主光源的设置，在 globe 组件中就是太阳光。
            main: {
              // 主光源的颜色。[ default: #fff ]
              color: '#fff',
              // 主光源的强度。[ default: 1 ]
              intensity: 1.2,
              // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
              shadow: false,
              // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
              // shadowQuality: 'high',
              // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
              alpha: 55,
              // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
              beta: 10
            },
            // 全局的环境光设置。
            ambient: {
              // 环境光的颜色。[ default: #fff ]
              color: '#fff',
              // 环境光的强度。[ default: 0.2 ]
              intensity: 0.5
            }
          },
          // 用于鼠标的旋转，缩放等视角控制。
          viewControl: {
            // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
            projection: 'perspective',
            // 是否开启视角绕物体的自动旋转查看。[ default: false ]
            autoRotate: false,
            // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
            autoRotateDirection: 'cw',
            // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
            autoRotateSpeed: 10,
            // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
            autoRotateAfterStill: 3,
            // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
            damping: 0,
            // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
            rotateSensitivity: 1,
            // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
            zoomSensitivity: 1,
            // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
            panSensitivity: 1,
            // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
            panMouseButton: 'left',
            // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
            rotateMouseButton: 'left',

            // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
            distance: 65,
            // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
            minDistance: 40,
            // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
            maxDistance: 400,

            // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
            alpha: 60,
            // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
            beta: -30,
            // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            minAlpha: -360,
            // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            maxAlpha: 360,
            // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            minBeta: -360,
            // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            maxBeta: 360,

            // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
            center: [0, 0, 0],

            // 是否开启动画。[ default: true ]
            animation: true,
            // 过渡动画的时长。[ default: 1000 ]
            animationDurationUpdate: 1000,
            // 过渡动画的缓动效果。[ default: cubicInOut ]
            animationEasingUpdate: 'cubicInOut'
          },

          // 可对单个地图区域进行设置
          data: [
            // 所对应的地图区域的名称
            {name: '酒泉市',value: 83,key:6230},
            {name: '嘉峪关市',value: 91,key:6202},
            {name: '张掖市',value: 50,key:6207},
            {name: '金昌市',value: 65,key:6203},
            {name: '武威市',value: 65,key:6206},
            {name: '白银市',value: 82,key:6204},
            {name: '兰州市',value: 72,key:6201},
            {name: '定西市',value: 93,key:6211},
            {name: '临夏回族自治州',value: 72,key:6229},
            {name: '甘南藏族自治州',value: 72,key:6230},
            {name: '陇南市',value: 72,key:6212},
            {name: '天水市',value: 72,key:6205},
            {name: '平凉市',value: 72,key:6208},
            {name: '庆阳市',value: 91,key:6210},
          ]
        }]
      }

      // 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。
      myChart.setOption(option)
      let _this=this
      //   myChart.setOption(option);
      myChart.on('click', function (param) {
        _this.mapkey=param.data.key
        for(let i=0;i<_this.mapDataArr.length;i++){
          if(_this.mapkey ==_this.mapDataArr[i].areaId){
            let isOk=0;
            let isBad=0;
            let passRate=0
            if(_this.mapDataArr[i].is_Qualified=='1'){
                isBad=_this.mapDataArr[i].lossCount
            }else{
              isOk=_this.mapDataArr[i].lossCount
            }
            passRate=Number(isOk)/(Number(isOk)+Number(isBad));
            _this.orgMsg=[
                {name:'合格台区个数',value:isOk,tip:''},
                {name:'不合格台区个数',value:isBad,tip:''},
                {name:'合格率',value:passRate*100,tip:'%'},
                {name:'指标统计日期',value:_this.nowDate,tip:''}
                  ]
          }
        }
         
      })

      // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    getAreaData(){
          let _this = this
          let body = {}
          _this.aData = new Date();
          body.time=_this.aData.getFullYear() + "-" + (_this.aData.getMonth() + 1) + "-" + _this.aData.getDate();;
          _this.$http.post(_this.$api.homeApi.getHomeAreaLossTotal, body).then(function (res) {
            if (res.code === '00000') {
                  _this.mapDataArr=res.data.areaLossTotal;
            }
          }).then(res=>{
           _this.drawLine();
          }).catch(function () {
            console.log('请求失败')
          })
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
    }
  },
}
</script>

<style scoped>
  #chart_example{
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  .mapTips{
    height: 12%;
    width: 23%;
    background:url('/static/images/home/map_tanchu_bg@2x.png') no-repeat;
    background-size:100% 100%; 
    position: absolute;
    top: 0;
    right: 0;
  }
  .orgMsg{
    width: 100%;
    height: 25%;
    font-size:6px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(255,255,255,1);
    text-align: left;
    box-sizing: border-box;
    padding: 3px;
  }
  .msgValue{
    font-size:11px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(255,132,57,1);
    margin-left: 5%;
  }
  .msgValueTip{
   margin-left: 5px;
  }
</style>

转载于：https://blog.csdn.net/lwc_pubg/article/details/107207883