vue中展示echarts中国地图

在vue项目中展示中国地图可以使用echarts库，根据配置数据区分不同颜色展示地图等功能。
先看效果

一、安装Echarts

npm install echarts@4.9.0 --save 我这里安装的版本号是4.9.0

二、组件中引入js文件

// 引入echarts
import echarts from "echarts";
// 引入js
import "echarts/map/js/china.js";

三、放置一个地图容器

在组件页面中放置一个地图的容器标签，可以给设定宽高样式

<div style="display: flex; justify-content: center"><div id="map-china" style="width: 1000px; height: 800px"></div>
</div>

四、创建echarts实例并配置地图相关参数

详细配置如下

initMap() {// 初始化echarts实例this.chinachart = echarts.init(document.getElementById("map-china"));// 进行相关配置this.chartOption = {// geo配置详解： https://echarts.baidu.com/option.html#geogeo: {// 地理坐标系组件用于地图的绘制map: "china", // 表示中国地图// roam: true, // 是否开启鼠标缩放和平移漫游zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）label: {show: true,},itemStyle: {// 地图区域的多边形 图形样式。borderColor: "rgba(0, 0, 0, 0.2)",emphasis: {// 高亮状态下的多边形和标签样式shadowBlur: 20,shadowColor: "rgba(0, 0, 0, 0.5)",},},},series: [{name: "各区域人数", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）type: "map",geoIndex: 0,label: {show: true,},// 这是需要配置地图上的某个地区的数据（下面是定义的假数据）data: [{ name: "湖南", value: 3957 },{ name: "北京", value: 2665 },{ name: "上海", value: 1647 },{ name: "江西", value: 79 },{ name: "河南", value: 1592 },{ name: "山西", value: 80 },{ name: "四川", value: 1399 },{ name: "湖北", value: 1194 },{ name: "江苏", value: 1162 },{ name: "内蒙古", value: 1152 },{ name: "安徽", value: 354 },{ name: "辽宁", value: 719 },{ name: "广东", value: 1697 },{ name: "浙江", value: 602 },{ name: "济南", value: 535 },{ name: "陕西", value: 516 },{ name: "贵州", value: 470 },{ name: "山东", value: 429 },{ name: "云南", value: 429 },{ name: "广西", value: 421 },{ name: "吉林", value: 400 },{ name: "南京", value: 353 },{ name: "重庆", value: 337 },{ name: "黑龙江", value: 282 },{ name: "海南", value: 7 },{ name: "新疆", value: 279 },{ name: "福建", value: 213 },{ name: "河北", value: 192 },{ name: "天津", value: 166 },{ name: "宁夏", value: 3 },{ name: "甘肃", value: 8 },{ name: "青海", value: 11 },{ name: "西藏", value: 2 },],},],tooltip: {// 鼠标移到图里面的浮动提示框// formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatterformatter(params, ticket, callback) {// params.data 就是series配置项中的data数据遍历let localValue, perf, downloadSpeep, usability, point;if (params.data) {localValue = params.data.value;} else {// 为了防止没有定义数据的时候报错写的localValue = 0;}let htmlStr = `<div style='font-size:18px;'> ${params.name}</div><p style='text-align:left;margin-top:-10px;'>区域对应数据value：${localValue}<br/></p>`;return htmlStr;},backgroundColor:"#ff7f50",//提示标签背景颜色textStyle:{color:"#fff"} //提示标签字体颜色},// visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMapvisualMap: {// 左下角的颜色区域type: "piecewise", // 定义为分段型 visualMapmin: 0,max: 1000,itemWidth: 40,bottom: 10,left: 10,pieces: [// 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，// 以及每一段的文字，以及每一段的特别的样式{ gt: 999, label: ">1000人", color: "#82121b" }, // (1000, ]{ gt: 100, lte: 999, label: "100-999人", color: "#bb2222" }, // (100, 999]{ gt: 10, lte: 99, label: "10-99人", color: "#fe7b6c" }, // (10, 99]{ gt: 0, lte: 9, label: "1-9人", color: "#ffaa85" }, // (0, 9]],},};// 使用刚指定的配置项和数据显示地图数据this.chinachart.setOption(this.chartOption);},

五、页面渲染完毕初始化地图

mounted() {this.initMap();
},

vue中展示echarts中国地图相关推荐

VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
vue中使用echarts中国地图
一效果图二上代码封装的完整的地图组件,里面注释了很多就不解释了 <template><div class="mapContent"><div r ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
vue中使用echarts实现地图颜色渐变及自定义浮窗内容
在这篇文章里vue中使用echarts自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客,总结了echarts的一些简单用法.这篇文章,一个是在原来的自定义浮窗内容上实现了地图的颜色渐变,一个是简化 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
react中引入echarts中国地图
1.首先写一个容器div去装地图注意设置div的长和高!! <div className="map" style={{width:"500px";hei ...
Angular项目中使用echarts中国地图
首先要在Angular项目中安装echarts的依赖: npm install echarts --save npm install ngx-echarts --save 第二.在创建包含地图的Ang ...
Vue中使用echarts绘制地图，以及只显示南海问题
下载echarts依赖下载依赖我想大家都会:cnpm / npm install echartsyar add echarts typescript项目 npm install @types/ech ...
vue中引用echarts全国地图
<template><div><div ref="mapInfo" style="width:750px; height: 540px&qu ...

vue中展示echarts中国地图

一、安装Echarts

二、组件中引入js文件

三、放置一个地图容器

四、创建echarts实例并配置地图相关参数

五、页面渲染完毕初始化地图

vue中展示echarts中国地图相关推荐

最新文章

热门文章