随笔54-echarts地图

1.引入echarts和需要的地图js文件

import '@/assets/map/china.js'
 import * as echarts from 'echarts' 

2.设置echarts地图的对象

  beOverdueOption: {
       tooltip: {
         show: false,
         trigger: 'item',
         formatter: '{b}',
       },
       grid: {
         // top: '50%',
       },
       geo: {
         map: 'china',
         zoom: 1.1,
         aspectScale: 0.75 /*长宽比*/,
         roam: false,
         itemStyle: {
           normal: {
             shadowColor: 'rgb(58,115,192)',
             shadowOffsetX: 6,
             shadowOffsetY: 6,
           },
           emphasis: {
             areaColor: 'red', //悬浮区背景
           },
         },
       },
       series: [
         {
           name: 'china',
           type: 'map',
           mapType: 'china',
           roam: false,
           z: 2,
           zoom: 1.1,
           selectedMode: false, //multiple多选
           label: {
             normal: {
               show: true,
               textStyle: {
                 color: '#1DE9B6',
               },
             },
           },
           itemStyle: {
             borderWidth: 1,
             borderColor: '#75cef9',

             areaColor: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 800,
               colorStops: [
                 {
                   offset: 0,
                   color: 'rgb(5,85,109)', // 0% 处的颜色
                 },
                 {
                   offset: 0.5,
                   color: 'rgb(15,180,185)', // 0% 处的颜色
                 },
                 {
                   offset: 1,
                   color: 'rgb(7,96,123)', // 100% 处的颜色
                 },
               ],
               global: true,
             },
             emphasis: {
               areaColor: 'rgb(15,180,185)',
               borderColor: 'rgb(7,96,123)',
               //鼠标hover样式
               label: {
                 show: true,
                 textStyle: {
                   color: '#fff',
                 },
               },
               // areaStyle: { color: 'black' },
             },
           },
         },

         {
           name: '坐标',
           type: 'scatter',
           coordinateSystem: 'geo',
           symbol: function (params, item) {
             // console.log(params, 'paramsparamsparams11')
             // console.log(item.data.sty, 'data')
             if (item.data.sty == 1) {
               return 'image://' + require('@/assets/img/screen1/xny.png')
             } else if (item.data.sty == 2) {
               return 'image://' + require('@/assets/img/screen1/cy.png')
             } else if (item.data.sty == 3) {
               return 'image://' + require('@/assets/img/screen1/hdyt.png')
             }
           },

           // symbol: 'image://' + require('@/assets/img/screen1/chuanx.png'),
           symbolSize: [30, 30],
           label: {
             normal: {
               show: false,
               // textStyle: {
               //   color: '#fff',
               //   fontSize: 9,
               // },
             },
           },
           // itemStyle: {
           //   normal: {
           //     color: '#D8BC37', //标志颜色
           //   },
           // },
           data: [],

           showEffectOn: 'render',
           rippleEffect: {
             brushType: 'stroke',
           },
           hoverAnimation: true,
           zlevel: 1,
         },
       ],
     }, 

3.把对象注册到指定的dom元素

    initTem() {
     var that = this
     // var _beOverdue = echarts.init(this.$refs.beOverdue)
     // _beOverdue.dispose()
     var _beOverdue = echarts.init(that.$refs.beOverdue)
     _beOverdue.setOption(that.beOverdueOption)
     _beOverdue.on('click', function (params) {
       params.event.stop()
       // console.log(params.data)
       that.getParam(params.data)
     })
     window.addEventListener('resize', () => _beOverdue.resize(), false)
   },