一篇小白也能看懂的Echarts中国地图(Map)配置文章---保姆级教学

现在大市场的情况下需求数据可视化的前端开发技术越来越多,本人也是深受这个漩涡中的一人,为此专门写了一篇中国地图配置项上的帖子,解决各位看官遇到的基础问题。话不多说开整

1.首先下载echarts安装包,在main.js中导入安装包，记得下载老的版本号,关于为什么后续会在讲解

`

import Vue from 'vue'
import App from './App.vue'

import * as echarts from 'echarts'  (切记不要直接引入 需要模块化导入 )
import axios from 'axios'
Vue.prototype.$echarts = echarts
Vue.prototype.$axios = axios
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
 
`

2.接下来是结构部分HTML

 <template>
  <div class='main'>
      <div id="main" style="width: 100%; height: 500px;"></div> 
  </div>
</template>

3.接下来这一步一定一定要注意了,地图能不能显示完全取决在这一步！！！

 import '../node_modules/echarts/map/js/china'   ##因为最新版本的Echarts包里面没有中国地图的JS文件,我在这里下载的是4.8.0版本号的 

4.这里就是所有的配置项,没啥好说的配置的注释说明都有啦,各位看官自己看就好啦

export default {
  // name: "Home",
  data() {
    return {
      myChart:'',
      MapOption:{
      datas:[]
      }
    }
  },
  mounted() {
   this.Rander()
  },
  methods:{
    RanDom(){
      return Math.floor(Math.random()*100)
    },
    // 渲染视图
    Rander(){
      console.log(this.RanDom());
    this.myChart = this.$echarts.init(document.querySelector('#main'))
    this.datas = [{ name: "北京", value: this.RanDom() },
        { name: "天津", value: this.RanDom() },
        { name: "河北", value: this.RanDom() },
        { name: "山西", value:this.RanDom() },
        { name: "内蒙古", value: this.RanDom() },
        { name: "辽宁", value: this.RanDom() },
        { name: "吉林", value: this.RanDom() },
        { name: "黑龙江", value: this.RanDom()},
        { name: "上海", value: this.RanDom() },
        { name: "江苏", value: this.RanDom() },
        { name: "浙江", value: this.RanDom() },
        { name: "安徽", value: this.RanDom() },
        { name: "福建", value: this.RanDom() },
        { name: "江西", value: this.RanDom() },
        { name: "山东", value: this.RanDom() },
        { name: "河南", value: this.RanDom() },
        { name: "湖北", value: this.RanDom() },
        { name: "湖南", value: this.RanDom() },
        { name: "重庆", value: this.RanDom() },
        { name: "四川", value: this.RanDom() },
        { name: "贵州", value: this.RanDom() },
        { name: "云南", value: this.RanDom() },
        { name: "西藏", value: this.RanDom() },
        { name: "陕西", value: this.RanDom() },
        { name: "甘肃", value: this.RanDom() },
        { name: "青海", value: this.RanDom() },
        { name: "宁夏", value: this.RanDom() },
        { name: "新疆", value: this.RanDom() },
        { name: "广东", value: this.RanDom() },
        { name: "广西", value: this.RanDom() },
        { name: "海南", value: this.RanDom() }, 
        { name: "台湾", value: this.RanDom() },
        { name: "澳门", value: this.RanDom() },
        { name: "香港", value: this.RanDom() },{ name: "南海诸岛", value: 0 }]

    let MapOption = {
      //标题样式
      title: {
        text: '中国各地区GDP总值',
        x: "10%",
        y: '0%',
        textStyle: {
          fontSize: 20,
          color: "#333"
        },
      },
      //这里设置提示框 (鼠标悬浮效果)
      tooltip: {
        //数据项图形触发
        trigger: 'item',
        //提示框浮层的背景颜色。 (鼠标悬浮后的提示框背景颜色)
        backgroundColor: "rgba(255,215,23,0.3)",
        //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
        formatter: '地区：{b}<br/>现有确诊病例：{c}',
        textStyle:{
          color:'red'
        }
      },
      //视觉映射组件 (旁边的小地图配置项)
      visualMap: {
        bottom: '100',
        left: '5%',
        // 数据的范围
        min: 10,
        max: 100,
        text: ['高', '低'],
        realtime: true,  //拖拽时，是否实时更新
        calculable: true,  //是否显示拖拽用的手柄
        textStyle:{
          color:'red'
        },
        inRange: {
          // 颜色分布
          color: ['white', 'rgba(181,164,135,0.3)']
        }
      },
      series: [
        {
          name: '确诊',
          type: 'map',
          mapType: 'china',
          //是否开启鼠标缩放和平移漫游
          roam: true,
          itemStyle: {
            borderColor:'red',
            borderWidth:'10',
            borderType:'dotted',
            //地图区域的多边形 图形样式
            normal: {
              //是图形在默认状态下的样式
              label: {
                show: true,//是否显示标签
                formatter:(params)=>{
          
                  var str = `${params.name}`  + '\n' +  `${params.value}`
                  // console.log(params);
                  return str
                },
                textStyle: {
                  color: "black"
                }
              }
            },
            zoom: 1,
            //地图缩放比例,默认为1
            emphasis: {
              //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
              label: {show: true}
            },
           
          },
          top: '0%',
          left: '15%',
          data: this.datas
        }
      ]
    }
    this.myChart.setOption(MapOption)
    }
  }
}
</script>

5.最终产品展示