echarts实现中国地图(Vue)

1,安装echartsnpminstallecharts–save2,引入importechartsfrom”echarts”;import’echarts/map/js/china.js’//引入中国地图数据(*********重中之重)3,配制option{visualMap:{//地图图例show:true,left:26,bottom

大家好,又见面了,我是你们的朋友全栈君。

效果如下
在这里插入图片描述
1,安装echarts

npm install echarts --save

2,引入

import echarts from "echarts";       
import 'echarts/map/js/china.js'    //引入中国地图数据 (*********重中之重)

3,配制option

{

        visualMap: {           //地图图例
          show:true,
          left: 26,
          bottom: 40,
          showLabel:true,
          pieces: [        //根据数据大小,各省显示不同颜色
            {
              gte: 100,
              label: ">= 1000",
              color: "#1f307b"
            },
            {
              gte: 500,
              lt: 999,
              label: "500 - 999",
              color: "#3c57ce"
            },
            {
              gte: 100,
              lt:499,
              label: "100 - 499",
              color: "#6f83db"
            },
            {
              gte: 10,
              lt: 99,
              label: "10 - 99",
              color: "#9face7"
            },
            {
              lt:10,
              label:'<10',
              color: "#bcc5ee"
            }
          ]
        },
        geo: {                 //中国地图设置
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1,
          top: 120,
          label: {
            normal: {
              show:true,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [
          {
            name: "突发事件",
            type: "map",
            geoIndex: 0,
            data:[]
          }
        ]
      }

Vue地图组件—源码如下(引入调用即可使用)

<template>
  <div id="china_map_box">
      <div id="china_map"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import 'echarts/map/js/china.js' 
export default {
  data() {
    return {
      //echart 配制option  
      options: {
        tooltip: {
          triggerOn: "mousemove",   //mousemove、click
          padding:8,
          borderWidth:1,
          borderColor:'#409eff',
          backgroundColor:'rgba(255,255,255,0.7)',
          textStyle:{
            color:'#000000',
            fontSize:13
          },
          formatter: function(e, t, n) {
            let data = e.data;
            //模拟数据
            data.specialImportant = Math.random()*1000 | 0;
            data.import = Math.random()*1000 | 0;
            data.compare = Math.random()*1000 | 0;
            data.common = Math.random()*1000 | 0;
            data.specail = Math.random()*1000 | 0;

            let context = `
               <div>
                   <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
                   <p class="tooltip_style"><span class="tooltip_left">事件总数</span><span class="tooltip_right">${data.value}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">特别重大事件</span><span class="tooltip_right">${data.specialImportant}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">重大事件</span><span class="tooltip_right">${data.import}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">较大事件</span><span class="tooltip_right">${data.compare}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">一般事件</span><span class="tooltip_right">${data.common}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">特写事件</span><span class="tooltip_right">${data.specail}</span></p>
               </div>
            `
            return context;
          }
        },
        visualMap: {
          show:true,
          left: 26,
          bottom: 40,
          showLabel:true,
          pieces: [
            {
              gte: 100,
              label: ">= 1000",
              color: "#1f307b"
            },
            {
              gte: 500,
              lt: 999,
              label: "500 - 999",
              color: "#3c57ce"
            },
            {
              gte: 100,
              lt:499,
              label: "100 - 499",
              color: "#6f83db"
            },
            {
              gte: 10,
              lt: 99,
              label: "10 - 99",
              color: "#9face7"
            },
            {
              lt:10,
              label:'<10',
              color: "#bcc5ee"
            }
          ]
        },
        geo: {
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1,
          top: 120,
          label: {
            normal: {
              show:true,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [
          {
            name: "突发事件",
            type: "map",
            geoIndex: 0,
            data:[]
          }
        ]
      },
      //echart data
      dataList: [
        {
          name: "南海诸岛",
          value: 100,
          eventTotal:100,
          specialImportant:10,
          import:10,
          compare:10,
          common:40,
          specail:20
        },
        {
          name: "北京",
          value: 540
        },
        {
          name: "天津",
          value: 130
        },
        {
          name: "上海",
          value: 400
        },
        {
          name: "重庆",
          value: 750
        },
        {
          name: "河北",
          value: 130
        },
        {
          name: "河南",
          value: 830
        },
        {
          name: "云南",
          value: 110
        },
        {
          name: "辽宁",
          value: 19
        },
        {
          name: "黑龙江",
          value: 150
        },
        {
          name: "湖南",
          value: 690
        },
        {
          name: "安徽",
          value: 60
        },
        {
          name: "山东",
          value: 39
        },
        {
          name: "新疆",
          value: 4
        },
        {
          name: "江苏",
          value: 31
        },
        {
          name: "浙江",
          value: 104
        },
        {
          name: "江西",
          value: 36
        },
        {
          name: "湖北",
          value: 52
        },
        {
          name: "广西",
          value: 33
        },
        {
          name: "甘肃",
          value: 7
        },
        {
          name: "山西",
          value: 5
        },
        {
          name: "内蒙古",
          value: 778
        },
        {
          name: "陕西",
          value: 22
        },
        {
          name: "吉林",
          value: 4
        },
        {
          name: "福建",
          value: 18
        },
        {
          name: "贵州",
          value: 5
        },
        {
          name: "广东",
          value: 98
        },
        {
          name: "青海",
          value: 1
        },
        {
          name: "西藏",
          value: 0
        },
        {
          name: "四川",
          value: 44
        },
        {
          name: "宁夏",
          value: 4
        },
        {
          name: "海南",
          value: 22
        },
        {
          name: "台湾",
          value: 3
        },
        {
          name: "香港",
          value: 5
        },
        {
          name: "澳门",
          value: 555
        }
      ]
    };
  },
  methods: {
    //初始化中国地图
    initEchartMap() {
      let mapDiv = document.getElementById('china_map');
      let myChart = echarts.init(mapDiv);
      myChart.setOption(this.options);
    },
    //修改echart配制
    setEchartOption(){
       this.options.series[0]['data'] = this.dataList;
    }
  },
  created() {
    this.setEchartOption();
  },
  mounted() {
      this.$nextTick(()=>{
          this.initEchartMap();
      })
    
  }
};
</script>

<style scoped>
    #china_map_box {
        height: 100%;
        position: relative;
    }
    #china_map_box #china_map{
        height: 100%;
    }
     #china_map_box .china_map_logo{
        position: absolute;
        top: 0;
        left: 0;
        width:45px;
     }
</style>
<style>
  #china_map .tooltip_style{
      line-height:1.7;
      overflow: hidden;
  }
  #china_map .tooltip_left{
      float: left;
  }
  #china_map .tooltip_right{
      float: right;
  }

</style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/125254.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 最详细的APAP论文代码分析

    最详细的APAP论文代码分析最详细的APAP论文代码分析代码见:https://cs.adelaide.edu.au/~tjchin/apap/此次实验选用的代码是2013年的版本:由于文档中的代码块截图不一定清楚,需要的可以去上面的网址下载代码对照着看。一、代码1.1、加载文件在程序开始前调用close、clear等函数清除原先工作空间的操作,然后将此次实验所需的文件文件添加到环境中。1.2、编译Mex文件经过对代码块添加测试代码,证明了此处的代码块并未执行,在命令行仅仅输出了对文件的判断,而未输出if-end

  • 实习生 Git 不熟练,还没脸去问是种什么体验…

    实习生 Git 不熟练,还没脸去问是种什么体验…文章目录尴尬Git概述git分区原理Git常用指令设置用户签名初始化本地库查看本地库状态添加暂存区提交本地库修改文件查看历史版本版本Git分支操作分支基本操作查看分支创建分支分支开发切换分支合并分支合并冲突解决Git团队协作机制团队协作跨团队协作远程仓库别名推送本地仓库到远程仓库克隆远程仓库到本地拉取远程库内容尴尬昨儿个我导师给了我个Git相关的小任务,不得不说我导师是真的好,他怕我不会还演示了一遍,奈何我只会gitclone。。。还好他演示的时候把命令都留在终端上了,折腾了半小时.

  • Java的Executor框架和线程池实现原理

    Java的Executor框架和线程池实现原理一,Java的Executor框架1,Executor接口publicinterfaceExecutor{voidexecute(Runnablecommand);}Executor接口是Executor框架中最基础的部分,定义了一个用于执行Runnable的execute方法,它没有实现类只有另一个重要的子接口ExecutorService2,Exe

    2022年10月28日
  • android之存储篇_ContentProvider存储

    ContentProvider是安卓平台中,在不同应用程序之间实现数据共享的一种机制。一个应用程序如果需要让别的程序可以操作自己的数据,即可采用这种机制。并且此种方式忽略了底层的数据存储实现,ContentProvider提供了一种统一的通过Uri实现数据操作的方式。其步骤为:  1. 在当前应用程序中定义一个ContentProvider。  2. 在当前应用程序的AndroidMani

  • dropout层

    dropout层之前了解的网络都是在全连接层加dropout层,防止模型过拟合。在看deepfm的模型的时候,发现在每一层都可以加入dropout层对dropout层的深入理解做分类的时候,Dropout层一般加在全连接层防止过拟合提升模型泛化能力。而很少见到卷积层后接Dropout(原因主要是卷积参数少,不易过拟合)er类似卷积神经网络,只是在最后的全连接层使用dropout,循环神经…

  • cubieboard学习笔记

    cubieboard学习笔记ubieboard学习笔记2014-05-09hginvent阅5345转16转藏到我的图书馆微信分享:入手开发板,刷机肯定是少不了的,就像我们平时刷安卓手机一样。开发板也有很多适配的固件。比如Cubieboard3Cubietruck就有安卓,debian,ubuntu等定制的固件。Cubieboard3Cubi…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号