vue封装echarts-005

<template lang="html">
<div class="chart chart-map">

<div ref="chartMap"></div>

</div>
</template>

<script>
import 'echarts/map/js/china.js';
import 'echarts/map/js/province/anhui.js';
import 'echarts/map/js/province/aomen.js';
import 'echarts/map/js/province/beijing.js';
import 'echarts/map/js/province/chongqing.js';
import 'echarts/map/js/province/fujian.js';
import 'echarts/map/js/province/gansu.js';
import 'echarts/map/js/province/guangdong.js';
import 'echarts/map/js/province/guangxi.js';
import 'echarts/map/js/province/guizhou.js';
import 'echarts/map/js/province/hainan.js';
import 'echarts/map/js/province/hebei.js';
import 'echarts/map/js/province/heilongjiang.js';
import 'echarts/map/js/province/henan.js';
import 'echarts/map/js/province/hubei.js';
import 'echarts/map/js/province/hunan.js';
import 'echarts/map/js/province/jiangsu.js';
import 'echarts/map/js/province/jiangxi.js';
import 'echarts/map/js/province/jilin.js';
import 'echarts/map/js/province/liaoning.js';
import 'echarts/map/js/province/ningxia.js';
import 'echarts/map/js/province/qinghai.js';
import 'echarts/map/js/province/shandong.js';
import 'echarts/map/js/province/shanghai.js';
import 'echarts/map/js/province/shanxi.js';
import 'echarts/map/js/province/shanxi1.js';
import 'echarts/map/js/province/sichuan.js';
import 'echarts/map/js/province/xianggang.js';
import 'echarts/map/js/province/xinjiang.js';
import 'echarts/map/js/province/xizang.js';
import 'echarts/map/js/province/yunnan.js';
import 'echarts/map/js/province/zhejiang.js';
import shandongMap from './json/shandong.json';
import hubeiMap from './json/hubei.json';
import henanMap from './json/henan.json';
import zhejiangMap from './json/zhejiang.json';
import shanghaiMap from './json/shanghai.json';
import fujianMap from './json/fujian.json';
import guangxiMap from './json/guangxi.json';
import liaoningMap from './json/liaoning.json';
import anhuiMap from './json/anhui.json';
import tianJin from './json/tianjin.json';
import xinJiang from './json/xinjiang.json';
import neiMengGu from './json/neimenggu.json';
import taiWan from './json/taiwan.json';
import xiZang from './json/xizang.json';
import chongQing from './json/chongqing.json';
import chinaMap from './json/china.json';
export default {
props: {

userLocaltionId: {
  type: String,
  required: true,
  default: ''
},
sourceInfo: {
  type: Array,
  required: true,
  default: () => {
    return []
  }
}

},
data() {

return {
  currentLocation: 'china',
  provinces: [
    // 23个省
    '台湾', '河北', '山西', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州', '云南', '陕西', '甘肃', '青海',
    // 5个自治区
    '新疆', '广西', '内蒙古', '宁夏', '西藏',
    // 4个直辖市
    '北京', '天津', '上海', '重庆',
    // 2个特别行政区
    '香港', '澳门'
  ]
}

},
computed: {

chartDom() {
  return echarts.init(this.$refs.chartMap);
},
locationList() {
  let arr = [];
  const tempLocal = window.localStorage.__user_location__;
  if ( tempLocal && JSON.parse(tempLocal) && JSON.parse(tempLocal).length ) {
    arr = JSON.parse(tempLocal);
  }
  return arr;
},
currentUserLocation() {
  // 当前登录用户是什么省
  let provice = 'china';
  if (this.locationList.length) {
    this.locationList.map( (o) => {
      if ( o.value === this.userLocaltionId ) {
        provice = o.shortName;
      }
    })
  }
  return provice;
},
currentLocationCode() {
  let code = '100000';
  if (this.locationList.length) {
    this.locationList.map( (o) => {
      if ( o.shortName === this.currentLocation ) {
        code = o.value;
      }
    })
  }
  return code;
}

},
watch: {

sourceInfo: {
  handler(cates) {
    this.hideLoading();
    if ( cates && cates.length ) {
      const mapName = this.userLocaltionId === '100000' ? this.currentLocation : this.currentUserLocation;
      this.doRender(cates, mapName);
    } else {
      if ( this.userLocaltionId === '100000' ) {
        this.doRender([], this.currentLocation);
      } else {
        this.doRender([], this.currentUserLocation);
      }
    }
  },
  deep: true
}

},
methods: {

renderChart(mapName) {
  this.hideLoading();
  if ( this.sourceInfo && this.sourceInfo.length ) {
    if ( this.userLocaltionId === '100000' ) {
      this.doRender(this.sourceInfo, mapName);
    } else {
      this.doRender(this.sourceInfo, this.currentUserLocation);
    }
  } else {
    if ( this.userLocaltionId === '100000' ) {
      this.doRender([], mapName);
    } else {
      this.doRender([], this.currentUserLocation);
    }
  }
},
showLoading() {
  this.chartDom.showLoading({
    text: '',
    color: '#3988ff',
    textColor: '#000',
    maskColor: 'rgba(255, 255, 255, 0)',
    zlevel: 0
  });
},
hideLoading() {
  this.chartDom.hideLoading();
},
resize() {
  this.chartDom.resize();
},
doRender(chartInfo, mapName) {
  switch (mapName) {
    case '重庆':
      echarts.registerMap(mapName, chongQing);
      break;
    case '西藏':
      echarts.registerMap(mapName, xiZang);
      break;
    case '内蒙古':
      echarts.registerMap(mapName, neiMengGu);
      break;
    case '台湾':
      echarts.registerMap(mapName, taiWan);
      break;
    case '天津':
      echarts.registerMap(mapName, tianJin);
      break;
    case '新疆':
      echarts.registerMap(mapName, xinJiang);
      break;
    case '湖北':
      echarts.registerMap(mapName, hubeiMap);
      break;
    case '山东':
      echarts.registerMap(mapName, shandongMap);
      break;
    case '河南':
      echarts.registerMap(mapName, henanMap);
      break;
    case '上海':
      echarts.registerMap(mapName, shanghaiMap);
      break;
    case '浙江':
      echarts.registerMap(mapName, zhejiangMap);
      break;
    case '福建':
      echarts.registerMap(mapName, fujianMap);
      break;
    case '广西':
      echarts.registerMap(mapName, guangxiMap);
      break;
    case '辽宁':
      echarts.registerMap(mapName, liaoningMap);
      break;
    case '安徽':
      echarts.registerMap(mapName, anhuiMap);
      break;
    case 'china':
      echarts.registerMap(mapName, chinaMap);
  }
  let values2 = [];
  let valueitem = echarts.getMap(mapName).geoJson.features;
  for (let item in valueitem) {
    values2.push({
      'value': [valueitem[item].properties.cp[0], valueitem[item].properties.cp[1] + 0.005],
      'name': valueitem[item].properties.name
    })
  }
  const convertData = (data) => {
    let res = [];
    let geoCoord = [];
    if ( mapName == 'china' ) {
      for (let i = 0; i < data.length; i++) {
        geoCoord = data[i].value;
        for (let j = 0; j < chartInfo.length; j++) {
          if (data[i].name === chartInfo[j].position) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(chartInfo[j].appCount),
              developerCount: chartInfo[j].developerCount
            });
          }
        }
      }
    } else {
      if (chartInfo && chartInfo[0] && chartInfo[0].childrens && chartInfo[0].childrens.length) {
        const provinceInfo = chartInfo[0].childrens;
        for (let i = 0; i < data.length; i++) {
          geoCoord = data[i].value;
          for (let j = 0; j < provinceInfo.length; j++) {
            if (data[i].name === provinceInfo[j].position) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(provinceInfo[j].appCount),
                developerCount: provinceInfo[j].developerCount
              });
            }
          }
        }
      }
    }
    let max;
    for (let i = 0; i < res.length; i++) {
      for (let j = i; j < res.length; j++) {
        if (res[i].value[2] < res[j].value[2]) {
          max = res[j];
          res[j] = res[i];
          res[i] = max;
        }
      }
    }
    const hash = [];
    for (let i = 0; i < res.length; i++) {
      for (let j = i + 1; j < res.length; j++) {
        if (res[i].name === res[j].name) {
          ++i;
        }
      }
      hash.push(res[i]);
    }
    return hash;
  };
  const mapChartOption = {
    legend: {
      x: 'left',
      y: 'top',
      data: ['在线', '离线'], // 在线和离线对应的是series的名字
      selectedMode: false, // 选中悬浮
      textStyle: {
        color: '#fff'
      },
      top: 0,
      show: false
    },
    tooltip: {
      trigger: 'item',
      extraCssText: 'padding: 4px 8px; border: 1px solid #319aff; z-index: 333; box-sizing: border-box;',
      formatter: (val) => {
        return `<div>
                  <span> ${val.name} </span>
                  <br/>
                  <a>应用总量:&nbsp;&nbsp;${val.value[2]}</a>
                  <br/>
                  <a>开发者数量:&nbsp;&nbsp;${val.data.developerCount}</a>
                 </div>`
      }
    },
    geo: [{
      name: '',
      type: 'map',
      top: '0',
      map: mapName,
      zoom: mapName == 'china' ? 0.7 : 0.6,
      zlevel: 3,
      roam: false,
      itemStyle: {
        normal: {
          areaColor: '#161a4c',
          borderColor: '#45f8ff'
        },
        emphasis: {
          areaColor: '#0b1c2d',
          borderColor: '#3988ff'
        }
      },
      label: {
        emphasis: {
          show: false
        }
      },
      data: chartInfo
    }],
    series: [{
      name: '前五的数据',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: convertData(values2).slice(0, 5),
      symbolSize: (val) => {
        if (val[2] == 0) {
          return 0;
        }
        return Math.log(val[2]) * 3 > 30 ? 30 : Math.log(val[2]) * 3;
      },
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
        normal: {
          formatter: '{b}',
          position: 'right',
          show: true
        }
      },
      itemStyle: {
        normal: {
          color: '#fff653',
          shadowBlur: 10,
          shadowColor: '#333'
        }
      },
      zlevel: 8
    },
    {
      name: '前五后的数据',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke'
      },
      symbol: 'circle',
      symbolSize: (val) => {
        if (val[2] == 0) {
          return 0;
        }
        return  Math.max(20 - 0.5 * val[2], 6);
      },
      itemStyle: {
        normal: {
          color: '#ffac0d'
        }
      },
      label: {
        normal: {
          show: false
        }
      },
      zlevel: 6,
      data: convertData(values2).slice(5)
    }]
  };
  this.chartDom.clear();
  this.chartDom.setOption(mapChartOption);
}

},
mounted() {

this.chartDom.resize(400, 400);
this.showLoading();
this.chartDom.on('click', (params) => {
  // 只有全国用户才能点击跳转
  if ( this.userLocaltionId === '100000' ) {
    if ( this.provinces.includes(params.name) ) {
      this.currentLocation = params.name;
    } else {
      this.currentLocation = 'china';
    }
    this.$emit('change-location', {
      currentLocationLabel: this.currentLocation,
      currentLocationId: this.currentLocationCode
    })
  }
})

}
}
</script>

<style lang="scss">
.chart-map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@media screen and (min-width: 1801px) {

max-height: 880px;
min-height: 870px;

}
@media screen and (min-width:1701px) and (max-width:1800px) {

max-height: 850px;
min-height: 840px;

}
@media screen and (min-width:1601px) and (max-width:1700px) {

max-height: 800px;
min-height: 790px;

}
@media screen and (min-width:1501px) and (max-width:1600px) {

max-height: 780px;
min-height: 770px;

}
@media screen and (min-width:1401px) and (max-width:1500px) {

max-height: 750px;
min-height: 740px;

}
@media screen and (min-width:1301px) and (max-width:1400px) {

max-height: 710px;
min-height: 700px;

}
@media screen and (max-width: 1300px) {

max-height: 500px;
min-height: 490px;

}
}
</style>