ECharts中国地图篇-名称经纬度调整
一、
网址: http://echarts.baidu.com/download.html
点击: 完整
下载文件: echarts.min.js
网址: http://echarts.baidu.com/download-map.html
点击: 中国地图 - JS
下载文件: china.js
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=EDGE"><title>ECharts</title><link rel="stylesheet" type="text/css" href="css/main.css"/><script src="js/jquery-1.9.1.min.js"></script><script src="js/echarts.min.js"></script><script src="js/china.js"></script><style>#china-map {width:1000px; height: 1000px;margin: auto;}</style></head><body> <div id="china-map"></div><script>var myChart = echarts.init(document.getElementById('china-map'));var option = {tooltip: {
// show: false //不显示提示标签formatter: '{b}', //提示标签格式backgroundColor:"#ff7f50",//提示标签背景颜色textStyle:{color:"#fff"} //提示标签字体颜色},series: [{type: 'map',mapType: 'china',label: {normal: {show: true,//显示省份标签textStyle:{color:"#c71585"}//省份标签字体颜色}, emphasis: {//对应的鼠标悬浮效果show: true,textStyle:{color:"#800080"}} },itemStyle: {normal: {borderWidth: .5,//区域边框宽度borderColor: '#009fe8',//区域边框颜色areaColor:"#ffefd5",//区域颜色},emphasis: {borderWidth: .5,borderColor: '#4b0082',areaColor:"#ffdead",}},data:[{name:'福建', selected:true}//福建为选中状态]}],};myChart.setOption(option);myChart.on('mouseover', function (params) {var dataIndex = params.dataIndex;console.log(params);});</script></body>
</html>
三、效果图
四、修改省份标签位置:
打开china.js文件,修改”properties”:{“cp”:[X坐标,Y坐标],…}
ECharts中国地图篇-名称经纬度调整相关推荐
- echarts 中国地图 世界地图
最近项目中用到了echarts 中国地图 世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...
- Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言 最近其实一直在用Echa ...
- Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
- Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
- HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
- 【echarts 中国地图增加南海九段线】
echarts 中国地图增加南海九段线 最近在开发echarts 中国地图时,客户提出中国地图要完整,需要增加南海九段线. 这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置 ...
- 【echarts 中国地图射线版本】vue实现中国地图航线动画效果,地图上添加散点效果【详细注释,通俗易懂】
先上效果图 前置条件,必看 首先你需要安装echarts并引入 然后你需要下载china.json文件并注册引入,不然不生效 当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
- VUE 中实现echarts中国地图 人口迁徙
VUE 中实现echarts中国地图 人口迁徙 效果图: 安装Echarts依赖 要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
- Echarts中国地图修改
前言 在使用Echarts图表时需要修改中国地图中的样式以及内容,在网上查找了一些资料并且整理了一下. Echarts中国地图 地图样式修改 标题修改 数值功能删除,但保留数据计算 按钮功能去除 地图 ...
- echarts 中国地图散点图渲染
准备 echarts 中国地图的json(在最后) GitHub的demo地址,可以直接拉下来 先注册地图 import * as echarts from 'echarts'; import { d ...
最新文章
- Flume TailDir 基本流程
- docker镜像创建redis5.0.3容器集群
- 自己动手构建iSCSI磁盘阵列
- SQL大数据查询优化
- python3 解析html_Python3.x网页抓取HTMLParser
- 反思应对焦虑:尽人事 听天命
- 软工1816 · Alpha冲刺(9/10)
- 计算机发展史的内容概述,计算机及其发展史概述
- 安卓实现局部界面遮罩效果
- 关于Linux/kernel.h中的offsetof和container_of宏
- android svg按钮图标下载,安卓android中小图标使用优化(svg矢量图与iconfiy)
- 脉冲计数器单片机c语言编程,基于单片机的光电计数器
- gerber文件怎么导贴片坐标_如何学习贴片机编程
- c# 毕设计算机毕设
- 西工大计算机学院李春科,西北工业大学“青春逐梦 激情飞扬”2014友谊校区元旦晚会成功举办...
- H3C BGP与IGP交互配置
- Vue + Element UI 实现权限管理系统(更换皮肤主题)
- 给夜神模拟器设置好了代理之后,无法上网了,在设置代理之前都能上网的
- Windows服务器时间不断修改(时间不同步已解决)
- 【Android】带你细看Android input系统中ANR的机制