vue2结合echarts实现中国地图(省)，以及数据交互

1、效果

vue2使用echarts实现地图加载

2、准备

安装echarts

npm install echarts --save

 页面准备

<template>
  <div class="map" ref="mapRef"></div>
</template>
<script>
const echarts = require('echarts');
// import mapJson from './assets/china.json';
import mapJson from 'echarts/map/json/china.json';
export default {
  data() {
    return {
      
    };
  },
  created() {
    
  },
  mounted() {
    
  },
  methods: {

  }
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
</style>

3、开始

直接上代码

<template>
  <div class="map" ref="mapRef"></div>
</template>
<script>
const echarts = require('echarts');
// import mapJson from './assets/china.json';
import mapJson from 'echarts/map/json/china.json';
export default {
  data() {
    return {
      option: {},
      mapRef: null
    };
  },
  created() {
    this.saveOption();
  },
  mounted() {
    this.mapRef = echarts.init(this.$refs.mapRef);
    echarts.registerMap('china', mapJson);
    this.getData();
    this.mapRef.on('click', params => {
      console.log('params', params);
      if (params.componentType === 'series') {
        const dataIndex = params.dataIndex;
        const seriesIndex = params.seriesIndex;
        const currentShowLabel = this.option.series[seriesIndex].data[dataIndex].label.show;
        console.log('currentShowLabel', currentShowLabel);
        this.option.series[seriesIndex].data[dataIndex].label.show = !currentShowLabel;
        this.mapRef.setOption(this.option, true);
      }
    });
    window.addEventListener('resize', this.echartsResize, false);
  },
  methods: {
    echartsResize() {
      this.mapRef.resize();
    },
    saveOption() {
      const option = {
        // echarts大小位置
        grid: {
          left: '0px',
          right: '80px',
          top: '10px',
          bottom: '10px'
        },
        geo: {
          map: 'china',
          zoom: 1,
          center: [102.848234, 32.82333],
          scaleLimit: {
            min: 1,
            max: 2
          },
          label: {
            color: '#fff',
            show: true
          },
          emphasis: {
            label: {
              color: '#fff',
              show: true
            },
            itemStyle: {
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#073684' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#2B91B7' // 100% 处的颜色
                  }
                ]
              }
            }
          },
          roam: true,
          itemStyle: {
            areaColor: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#073684' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#061E3D' // 100% 处的颜色
                }
              ]
            },
            borderColor: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#00F6FF'
                },
                {
                  offset: 1,
                  color: '#87ADCB'
                }
              ],
              false
            ),
            shadowColor: 'rgba(10,76,139,1)',
            shadowOffsetY: 0,
            shadowBlur: 60,
            borderWidth: 1
          },
          tooltip: {
            show: false
          }
        },
        // 要显示的散点数据
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              period: 4,
              brushType: 'stroke',
              scale: 4
            },
            label: {
              show: true,
              color: '#fff'
            },
            symbol: 'pin', // 定位图标样式
            symbolSize: 40,
            // 点的名称和经纬度
            data: [
              {
                name: 'xxxx医院',
                value: [106.093437, 30.791804],
                // 单独修改圆环上的文字
                label: {
                  show: true,
                  position: 'top',
                  backgroundColor: '#153872',
                  padding: 10,
                  fontSize: 16,
                  overflow: 'break',
                  formatter: [
                    '{a|xxxx医院}',
                    '{b|开方数量：50次}',
                    '{b|开方收入：100000元}'
                  ].join('\n'), // 圆环显示文字
                  rich: {
                    a: {
                      color: '#d8a04c',
                      fontSize: 20,
                      lineHeight: 20
                    },
                    b: {
                      // backgroundColor: {
                      //   image: 'xxx/xxx.jpg'
                      // },
                      // height: 40
                      color: '#ffffff',
                      fontSize: 16,
                      lineHeight: 20
                    }
                  }
                },
                itemStyle: {
                  color: '#fe2321'
                }
              },
              {
                name: 'xxxx医院',
                value: [105.863126, 32.43237],
                // 单独修改圆环上的文字
                label: {
                  show: false,
                  position: 'top',
                  backgroundColor: '#153872',
                  padding: 10,
                  fontSize: 16,
                  overflow: 'break',
                  formatter: [
                    '{a|xxxx民医院}',
                    '{b|开方数量：99次}',
                    '{b|开方收入：200000元}'
                  ].join('\n'), // 圆环显示文字
                  rich: {
                    a: {
                      color: '#d8a04c',
                      fontSize: 20,
                      lineHeight: 20
                    },
                    b: {
                      // backgroundColor: {
                      //   image: 'xxx/xxx.jpg'
                      // },
                      // height: 40
                      color: '#ffffff',
                      fontSize: 16,
                      lineHeight: 20
                    }
                  }
                },
                itemStyle: {
                  color: '#fe2321'
                }
              }
            ]
          }
        ]
      };
      this.option = option;
    },
    getData() {
      this.mapRef.setOption(this.option);
    }
  }
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
</style>

4、其他

当点击红色的定位图标的时候，可以看到一下的信息

可以根据这些信息进行其他的数据展示。比如发送请求==。

5、相关资料:

Documentation - Apache ECharts