vue项目中引入echarts-map地图

如何在vue项目中使用地图

在初始的项目中安装下载echarts依赖：
https://blog.****.net/marslover521/article/details/85000788

通过上面的参考链接可以简单实现一个echarts图表，完成后再继续以下操作：

1.引入china.js

main.js

import echarts from 'echarts'
//引入中国地图依赖
import 'echarts/map/js/china'

2.使用china

xxx.vue

<template>
  <div class="fl mapDiv">
    <div class="mapCon">
      <div class="title">城市品种个数</div>
      <div id="mapChart" class="mapChart"></div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
// import Heatmap from "heatmap.js";
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let data = [
        { name: "海门", value: 119 },
        { name: "鄂尔多斯", value: 112 },
        { name: "招远", value: 112 },
        { name: "舟山", value: 112 },
        { name: "齐齐哈尔", value: 114 },
        { name: "盐城", value: 115 },
        { name: "赤峰", value: 116 },
        { name: "青岛", value: 118 },
        { name: "乳山", value: 118 }
      ];
      var mapChart = this.$echarts.init(document.getElementById("mapChart"));
      var option = {
        backgroundColor:'#fff',
        tooltip: {
          trigger: "item"
        },
        geo: {
          map: "china",
          right: "2%",
          left: "30%",
          label: {
            normal: {
              show: true,
              color: "#fff"
            },
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              areaColor: "rgba(128, 128, 128, 0)",
              borderColor: "#3CC3FF"
            },
            emphasis: {
              areaColor: "#3EF3F4"
            }
          }
        },
        series: [
          {
            name: "品种个数",
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#ddb926"
              }
            }
          },
          {
            name: "品种个数",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              data.sort(function(a, b) {
                  return b.value - a.value;
                }).slice(0, 6)
            ),
            //标记大小，地图上的圆点
            symbolSize: function(val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              //地图黄点显示内容
              normal: {
                formatter: "{b}",
                position: "right",
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#f4e925",
                shadowBlur: 10,
                shadowColor: "#333"
              }
            },
            zlevel: 1
          }
        ]
      };
      mapChart.setOption(option);
      mapChart.resize();
    }
  }
};
</script>

<style>
.mapDiv {
  width: 50%;
  height: 50%;
  padding: 10px;
  box-sizing: border-box;
}
.mapCon .title {
  position: absolute;
  z-index: 1;
  height: 34px;
  line-height: 34px;
  font-size: 18px;
  font-weight: 700;
  padding-left: 14px;
  border-left: 6px solid #abd3d5;
  box-sizing: border-box;
}
.mapCon,
.mapChart {
  height: 100%;
  width: 100%;
}
</style>