echarts版中国地图

Echarts实现中国版地图

1. 项目中下载echarts；

   npm i echarts --save
   

2. 全局注册echarts；（main.js中全局引入）

   import echarts from 'echarts'
   Vue.prototype.$echarts = echarts
   

3. 建立echarts组件（数据部门）

        tooltip: {
             padding: 0,
             enterable: true,
             transitionDuration: 0,
             textStyle: {
               color: '#000',
               decoration: 'none',
             },
           },
                     geo: {
             map: 'china',
             show: true,
             roam: false,
             zoom: 1.3, //当前视角的缩放比例
             aspectScale: 0.86,
             layoutCenter: ["50%", "50%"], //地图位置
             layoutSize: '100%',
             itemStyle: {
               normal: {
                 shadowColor: 'rgba(80,225,247,0.6)',
                 shadowOffsetX: 1,
                 shadowOffsetY: 5,
                 opacity: 1,
                 shadowBlur: 10
               },
               emphasis: {
                 areaColor: 'rgba(0,243,255,1)',
               }
             },
             regions: [{
               name: '南海诸岛',
               itemStyle: {
                 areaColor: 'rgb(17,37,76)',
   
                 borderColor: 'rgb(17,37,76)',
                 normal: {
                   opacity: 0,
                   label: {
                     show: false,
                     color: "#009cc9",
                   }
                 },
               },
               label: {
                 show: false,
                 color: '#FFFFFF',
                 fontSize: 12,
               },
             }],
           },
           
                   series: [
             {
               name: '散点',
               type: 'effectScatter',
               coordinateSystem: 'geo',
               // 显示的点
               data: this.convertData(data),
               // 气泡大小
               symbolSize: 9,
               symbol: 'circle',
               label: {
                 //   显示位置
                 normal: {
                   show: false
                 },
                 emphasis: {
                   show: false
                 }
               },
               showEffectOn: 'render',
               itemStyle: {
                 normal: {
                   color: {
                     type: 'radial',
                     x: 0.5,
                     y: 0.5,
                     r: 0.5,
                     colorStops: [{
                       offset: 0,
                       color: 'rgba(12,46,80,0.1)'
                     },
                     {
   
                       offset: 0.8,
                       color: 'rgba(14,245,209,0.2)'
                     }, {
                       offset: 1,
                       color: 'rgba(14,245,209,1)'
                     }
                     ],
                     // 圆点圈的显示
                     global: false // 缺省为 false
                   },
                 }
               },
   
             },
   
             // 常规地图
             {
               type: 'map',
               map: 'china',
               geoIndex: 1,
               aspectScale: 0.85,
               layoutCenter: ["50%", "50%"], //地图位置
               layoutSize: '100%',
               showLegendSymbol: false, // 存在legend时显示
               selectedMode: "false",
               zoom: 1.3, //当前视角的缩放比例
               // roam: true, //是否开启平游或缩放
               scaleLimit: { //滚轮缩放的极限控制
                 min: 1,
                 max: 2
               },
               tooltip: {
                 show: false,
               },
               label: {
                 normal: {
                   show: false
                 },
                 emphasis: {
                   show: false
                 }
               },
               roam: false,
               itemStyle: {
                 normal: {
                   areaColor: {
                     type: 'radial',
                     x: 0.5,
                     y: 0.5,
                     r: .8,
                     colorStops: [{
                       offset: .26, color: 'rgba(16,27,63,1)' // 0% 处的颜色
                     }, {
                       offset: 1, color: 'rgba(21,73,121,1)'// 100% 处的颜色
                     }],
                     global: false // 缺省为 false
                   },
   
                   borderColor: 'rgba(0,243,255,0.4)',
                   borderWidth: 2.5,
   
                 },
                 emphasis: {
                   areaColor: 'rgb(16,27,63)',
                   label: {
                     color: "#fff"
                   }
                 }
               },
             },
           ]
   

4. echarts中存在省份弹框,可以在tooltip信息中加入

 // 弹层
          extraCssText: 'white-space:pre-wrap',
          formatter: function (params) {
            let nameX = params.name
            return `<div class="modeChardimg123"><div class="modeChardimg"><h3>${nameX}</h3><div class="proName"><span>项目金额：</span><span>4000万</span></div><div class="promName"><span>项目概况：</span><span>建设内容分9个单元:门诊医技综合楼、病房楼、传染病专科楼、精神病专科楼、公共服务中心楼……</span></div></div></div>`
          }

项目中如果需要封装的echarts，下方提供封装方式（仅供参考）：

<template>
  <div :id="chartId" :style="{ width: width, height: height }" class="chart">
  </div>
</template>

<script>
import * as echarts from 'echarts'
import "../js/china" // 中文导入
export default {
  name: "MyChart",
  props: {
    chartId: {
      type: String,
      required: true
    },
    width: {
      type: String,
      default: "500px"
    },
    height: {
      type: String,
      default: "500px"
    },
    chartOptions: {
      type: Object,
      required: true
    },
    confimDisabled: {
      type: Boolean,
      default: false,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart(this.chartId, this.chartOptions);
    })
  },
  methods: {
    initChart(id, data) {
      let _that = this;
      let myChart = document.getElementById(id)
      this.chartLine = echarts.init(myChart);
      this.chartLine.setOption(data)
      window.addEventListener('resize', function () {
        _that.chartLine.resize()
      })
      if (this.confimDisabled) {
        let that = this
        let chart = echarts.init(document.getElementById(id))
        chart.on('legendselectchanged', function (obj) {
          that.$emit("exportClick", obj);
        })
      }
    },
  },
  watch: {
    data: {
      handler(newValue, old) {
        this.initData(this.chartId, newValue, old)
      },
      deep: true
    }
  }
};
</script>
<style scoped>
.chart {
  display: inline-block;
}
</style>