Echarts中国地图修改
前言
在使用Echarts图表时需要修改中国地图中的样式以及内容,在网上查找了一些资料并且整理了一下。
Echarts中国地图
地图样式修改
- 标题修改
- 数值功能删除,但保留数据计算
- 按钮功能去除
- 地图字体大小设置
目前没有办法解决更改区域颜色
// 中国地图扫码数量 //
var num = document.getElementById("chartNum");
var chartNum = echarts.init(num);
var app = {};
option = null;
function randomData() {return Math.round(Math.random()*1000);
}
option = {title: {text: '扫码数量',subtext: '',left: 'center'},tooltip: {// show: false,trigger: 'item'},legend: {orient: 'vertical',left: 'left',// data:['iphone3','iphone4','iphone5']},visualMap: {show: false, //关闭数值功能,但保留数据计算min: 0,max: 2500,left: 'left',top: 'bottom',text: ['高','低'], // 文本,默认为数值文本calculable: true},toolbox: { // 按钮功能show: false,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},series: [{name: '',type: 'map',mapType: 'china',showLegendSymbol: false, //去除地图指示点roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启label: {normal: {show: true, //显示省份标签textStyle: { //省份字体设置fontSize: 7,}},emphasis: { //鼠标悬浮效果show: true}},itemStyle: {normal: {// borderWidth: .5,区域边框宽度borderColor: '#009fe8',//区域边框颜色//areaColor:"#d5ecff", 区域颜色},emphasis: {show: true,}},data:[{name: '北京',value: randomData() },{name: '天津',value: randomData() },{name: '上海',value: randomData() },{name: '重庆',value: randomData() },{name: '河北',value: randomData() },{name: '河南',value: randomData() },{name: '云南',value: randomData() },{name: '辽宁',value: randomData() },{name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },{name: '安徽',value: randomData() },{name: '山东',value: randomData() },{name: '新疆',value: randomData() },{name: '江苏',value: randomData() },{name: '浙江',value: randomData() },{name: '江西',value: randomData() },{name: '湖北',value: randomData() },{name: '广西',value: randomData() },{name: '甘肃',value: randomData() },{name: '山西',value: randomData() },{name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },{name: '吉林',value: randomData() },{name: '福建',value: randomData() },{name: '贵州',value: randomData() },{name: '广东',value: randomData() },{name: '青海',value: randomData() },{name: '西藏',value: randomData() },{name: '四川',value: randomData() },{name: '宁夏',value: randomData() },{name: '海南',value: randomData() },{name: '台湾',value: randomData() },{name: '香港',value: randomData() },{name: '澳门',value: randomData() }]},]
};;
if (option && typeof option === "object") {chartNum.setOption(option, true);
}
图表自适应
//单个图标自适应
window.onresize = chartTrend.resize;
//多个图表自适应
window.addEventListener("resize", function () {chartNum.resize(); chartTrend.resize();
});
Echarts中国地图修改相关推荐
- Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言 最近其实一直在用Echa ...
- Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
- echarts 中国地图 世界地图
最近项目中用到了echarts 中国地图 世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...
- 【echarts 中国地图射线版本】vue实现中国地图航线动画效果,地图上添加散点效果【详细注释,通俗易懂】
先上效果图 前置条件,必看 首先你需要安装echarts并引入 然后你需要下载china.json文件并注册引入,不然不生效 当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
- Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
- VUE 中实现echarts中国地图 人口迁徙
VUE 中实现echarts中国地图 人口迁徙 效果图: 安装Echarts依赖 要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
- HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
- 【echarts 中国地图增加南海九段线】
echarts 中国地图增加南海九段线 最近在开发echarts 中国地图时,客户提出中国地图要完整,需要增加南海九段线. 这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置 ...
- echarts 中国地图散点图渲染
准备 echarts 中国地图的json(在最后) GitHub的demo地址,可以直接拉下来 先注册地图 import * as echarts from 'echarts'; import { d ...
最新文章
- python周末列表的表示形式合并_Python 列表合并题
- C# 导出 Excel 数字列出现‘0’的解决办法
- html if语句_轻量html模版渲染库 cJinja
- 单片机单口不可用或被占用_单片机为什么一直用C语言,不用其他编程语言?只有学过的知道...
- 如何灵活使用 ActionBar, Google 音乐ActionBar 隐藏和显示效果
- FineUI小技巧(3)表格导出与文件下载
- .net c#购物车模块分析
- ICESat2学习笔记4 :Windows下使用HDFView查看ICESat-2 hdf5文件
- 表单及阿里巴巴矢量图
- iOS 微信支付开发流程
- android 通知 广告,解决三星/小米等Android手机通知栏推送广告的问题
- 春风得意的 jQuery
- ABAP 设置鼠标光标
- 用计算机来打字学猫叫,电脑打字轻松技巧 怎么联系快速打字
- java excel 边框颜色_poi生成excel整理(设置边框/字体/颜色/加粗/居中/)
- 微服务8--ELasticsearch搜索引擎
- liquibase报错 waiting for changelog lock
- DVWA测试XSS跨站脚本攻击三种类型
- vue 指定元素滚动到页面可视区域
- MySQL新增数据,存在就更新,不存在就添加(Mybatis)
热门文章
- 寻找北极星位置:look_for_the_edge_and_north_star
- 使用批处理文件(.bat)批量在文件名前面加序号(递增)
- 说说早期目标检测-----------ssd那些事
- 剑指offerQ24二叉树中和为某一值的路径
- 22 个出口节点对 Tor 网络发动中间人攻击
- 习惯的力量:35岁以前养成好习惯
- 《SQL数据分析——从基础破冰到面试题解》题解1
- 你在找人吗?亦或是被找?让Cocos君来帮忙!
- win32编程与c语言的关系,Windows 编程简介 c/c++/win32
- 在gym的BipedalWalker-v2环境里面训练了agent