echarts geo 下的regions 单独修改地图省份界线样式与颜色

废话不多说直接上图片与代码:

import echarts from 'ecahrts'; // 引入echarts文件
import "./china"  // 引入中国js文件const chartsChina = (that, el, chartData, Fun = () =>{} ) => {that.chart = echarts.init(document.getElementById(el);that.chart.on('click', function(params) { // 通过ecahrts的点击事件,将点击的信息传给函数 Fun;Fun(params);}chartData = [{name:"广东省",coord: [ 113.12244, 23.009505 ],value: 1}]const convertData = function(data) { // 根据数据设置地图圆点的颜色let res = [];for(var i = 0; i < data.length; i++) {res.push({name: data[i].name;value: data[i].coord,  // 坐标data:  data[i].value,itemStyle: {normal:{ color: data[i].value == "1" ? "#0090FF" : data[i].value == "2" ? "#E59800" :  "#F24949" }}});}return res;}option = {backgroundColor: '#000',title: {top: 20,text: '中国地图',subtext: '',x: 'center',textStyle: {color: '#ccc'}},legend: {show: false},tooltip: {show: false},geo: {map: 'china',aspectScale: 0.75, //长宽比roam: false,show: true,silent: true,zlevel: 1,top: '10%',left: '20%',regions: [{ // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.name: "广东省", // 对应的是import "./china"  数据中的名称如: name: "广东省"(下面有截图)itemStyle: {normal: {opacity: 1, // 透明度borderColor: "#fff", // 省份界线颜色borderWidth: 3, // 省份界线的宽度areaColor: 'red', // 整个省份的颜色},},}],itemStyle: { // 设置地图的样式normal: {// areaColor: '#013C62', // 地图样色// shadowColor: '#182f68', // 阴影// shadowOffsetX: 0,// shadowOffsetY: 25borderColor: "#000404",borderWidth:3,areaColor: {type: 'linear-gradient',x: 1000,y: 600,x2: 1000,y2: 0,colorStops:[{offset: 0,color: '#0A155D' // 0%处颜色},{offset: 1,color: '#007Ac1'}],global: true // 缺省为 false},opacity:1,},emphasis: {show: false,areaColor: '#FF8420'}}},series: [{type: 'map',map: 'china', roam: false,show: true,silent: true,top: '11%',left: '20.5%',aspectScale: .75, //长宽比label: {                            emphasis: {textStyle: {color: '#fff',show: true}}},itemStyle: {normal: {borderColor: "rgba(147, 235, 248, 0)",borderWidth:0,areaColor: {x: 1000,y: 600,x2: 1000,y2: 0,colorStops:[{offset: 0,color: '#082248' // 0%处颜色},{offset: 1,color: '#082248'}],global: true // 缺省为 false},opacity:1,},emphasis: {areaColor: '#0882248',show: false,}},z: 1,},{type: 'scatter',name: 'light',coordinateSystem: 'geo',zlevel: 2,symbolSize: 20,data: convertData(chartData),itemStyle: {normal: {color: '#ffff',}},label: {normal: {fontSize: 15,fontWeight: 'bolder',formatter(params) {return (params.name + ':' + params.data.data)},position: 'right',show: false},emphasis: {show: true}}}]};data: convertData(chartData)}]};
}

其实省份界线的样色特别的容易修改,只需要修改 geo.regions 下的属性即可,但是有一个问题,就是regions的设置只能在geo中设置,series中不可以设置,所以用到地图立体效果的时候还需要注意层级的设置,z:1 的层级小于 zlevel:1,如果不需要设置立体地图,则不需要注意这一点,可以直接设置 .
源码下载(附带完整的中国地图json)
如果这篇文章对您有所帮助,请帮忙点一个小小的赞,如果大家有更好的解决方法或者有任何疑问都可以私信我,
菜鸟一枚,如果有不对的地方,请在下面留言,我会尽快改正!!

echarts geo 下的regions 单独修改地图省份界线样式与颜色相关推荐

地图省界线什么样_echarts geo 下的regions 单独修改地图省份界线样式与颜色
废话不多说直接上图片与代码: 1593867638(1).jpg import echarts from 'ecahrts'; // 引入echarts文件 import "./china& ...
elementui 单独修改一个label的样式
样式修改不要全局,使用/deep/穿透 <el-form><el-form-item label="活动区域" class="change-label- ...
处理echarts地图省份坐标重叠的方法
//修改地图省份重叠问题 var chinaEchartsObj = echarts.getMap('china'); var geoJSONChina = chinaEchartsObj.geoJs ...
echarts geo地图示例_基于Echarts的中国地图数据展示
一.概述实际项目中大概率会遇到很多需要进行数据展示的地方,如折现图,柱状图等,今天给大家介绍一个更加炫酷的中国地图大数据展示,结合echarts免费开源第三方插件,可以实现自己的定制样式,定制提示. ...
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
Vue3 + Echarts 5 绘制带有立体感流线中国地图
本文绘制的地图效果图如下: 一.Echarts 使用五部曲 1.下载并引入 echarts Echarts 已更新到了 5.0 版本,安装完记得检查下自己的版本是否是 5.0 . npm instal ...
echarts关系图/力导向动态图(地图经纬度定位)
需求:项目要做一个动态展示服务器前置机间是否连通的界面. 先看下效果,分两种,一种带地图(经纬度),一种屏蔽地图显示: 这个是通过百度echarts的一个案列改造而来.下面附上官网地址.API地址.改 ...
R语言学习笔记︱Echarts与R的可视化包——地区地图
笔者寄语:感谢CDA DSC训练营周末上完课,常老师.曾柯老师加了小课,讲了echart与R结合的函数包recharts的一些基本用法.通过对比谢益辉老师GitHub的说明文档,曾柯老师极大地简化了一 ...
echarts 世界地图标点_Echarts自定义实现标点地图
发表于2021-1-16 16:30 悬赏1 未解决楼主请问如何修改下面的脚本能够实现Echarts自定义的标点地图(这段代码的option部分加上格式化出来的数据res能够在Echarts上能够 ...

echarts geo 下的regions 单独修改地图省份界线样式与颜色

echarts geo 下的regions 单独修改地图省份界线样式与颜色相关推荐

最新文章

热门文章