基于echarts的中国地图

HTML:

<div id="china_map" style=‘margin-top: -120px;width:100%x;height:600px;‘></div>

以下是echarts地图相关代码

dataList () {

// 初始化echarts实例

this.chinachart = echarts.init(document.getElementById(‘china_map‘))

// 进行相关配置

var chartOption = {

tooltip: { // 鼠标移到图里面的浮动提示框

// formatter详细配置: https://echarts.baidu.com/option.html#tooltip.formatter

formatter (params) {

// params.data 就是series配置项中的data数据遍历

let localValue,

perf,

downloadSpeep,

usability,

point

if (params.data) {

localValue = params.data.value

perf = params.data.perf

downloadSpeep = params.data.downloadSpeep

usability = params.data.usability

point = params.data.point

} else { // 为了防止没有定义数据的时候报错写的

localValue = 0

perf = 0

downloadSpeep = 0

usability = 0

point = 0

}

let htmlStr = `

<div style=‘font-size:18px;‘> ${params.name}</div>

<p style=‘text-align:left;margin-top:-10px;‘>

区域对应数据value:${localValue}<br/>

性能perf:${perf}<br/>

下载速度downloadSpeep:${downloadSpeep}<br/>

可用性usability:${usability}<br/>

监测点数point:${point}<br/>

</p>

`

return htmlStr

}

// backgroundColor:"#ff7f50",//提示标签背景颜色

// textStyle:{color:"#fff"} //提示标签字体颜色

},

// visualMap的详细配置解析:https://echarts.baidu.com/option.html#visualMap

visualMap: { // 左下角的颜色区域

type: ‘piecewise‘, // 定义为分段型 visualMap

min: 0,

max: 1000,

itemWidth: 40,

bottom: 60,

left: 20,

pieces: [ // 自定义『分段式视觉映射组件(visualMapPiecewise)』的每一段的范围,以及每一段的文字,以及每一段的特别的样式

{gt: 900, lte: 1000, label: ‘非常好‘, color: ‘#6ad86e‘}, // (900, 1000]

{gt: 500, lte: 900, label: ‘正常‘, color: ‘#9adcfa‘}, // (500, 900]

{gt: 310, lte: 500, label: ‘警告‘, color: ‘#ffeb3b‘}, // (310, 500]

{gt: 200, lte: 300, label: ‘较差‘, color: ‘#ff9800‘}, // (200, 300]

{gt: 10, lte: 200, label: ‘非常差‘, color: ‘orangered‘}, // (10, 200]

{value: 0, label: ‘无数据‘, color: ‘#999‘} // [0]

]

},

geo: { // 地理坐标系组件用于地图的绘制

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‘: 599,

‘perf‘: ‘0.501s‘, // 性能

‘downloadSpeep‘: ‘1.221MB/s‘, // 下载速度

‘usability‘: ‘100%‘, // 可用性

‘point‘: ‘250‘ // 监测点

}, {

‘name‘: ‘上海‘,

‘value‘: 142

}, {

‘name‘: ‘黑龙江‘,

‘value‘: 44

}, {

‘name‘: ‘新疆‘,

‘value‘: 999,

‘perf‘: ‘0.501s‘, // 性能

‘downloadSpeep‘: ‘1.221MB/s‘, // 下载速度

‘usability‘: ‘100%‘, // 可用性

‘point‘: ‘250‘ // 监测点

}, {

‘name‘: ‘深圳‘,

‘value‘: 92

}, {

‘name‘: ‘湖北‘,

‘value‘: 810

}, {

‘name‘: ‘四川‘,

‘value‘: 453

}]

}

]

}

// 使用刚指定的配置项和数据显示地图数据

this.chinachart.setOption(chartOption)

// 对window窗口变化加监听事件

window.addEventListener(‘resize‘, () => {

this.chinachart.resize()

})

}


原文地址:https://www.cnblogs.com/wasbg/p/12263126.html

时间: 2024-10-15 20:51:50

基于echarts的中国地图的相关文章

基于VUE+TS中引用ECharts的中国地图和世界地图密度表

首先先附上官网 http://echarts.baidu.com/option.html#series-line.label 以及密度表对应geo配置文档 http://echarts.baidu.com/option.html#geo 以下仅是个人在开发中逐步摸索出来的.demo目前没出问题.如果有错误地方请留言指出  (若转载请标注出处) 直接上效果图,对应代码在效果图下面 安装: 1. npm install echarts --save2. npm install --save @typ

1、ECharts(中国地图篇)的使用

一.网址:            http://echarts.baidu.com/download.html点击:            完整下载文件:        echarts.min.js 网址:            http://echarts.baidu.com/download-map.html点击:            中国地图 - JS下载文件:        china.js 二.代码示例 <!DOCTYPE html> <html> <head&g

echarts实现中国地图数据展示

在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地图的JS文件,可以在网盘下载,链接: https://pan.baidu.com/s/1j_edGU2ka9YeHBTErqDWdg 密码: ft9n 也可以在github上克隆下来:https://github.com/Luna829/incubator-echarts/blob/master/m

echarts画中国地图并上色

任务是画一个中国地图,并在指定区域上颜色,学姐说用arcgis画,乖乖,4个g的安装文件,算了, 还是echarts大法好..如果想熟悉这个牛X的工具,请移步https://www.w3cschool.cn/echarts_tutorial/ 如果是写论文作图需要添加应用哦 最终效果如下: 参考了这个网址:https://www.cnblogs.com/luna666/p/9007263.html 另外还有个百度官方的例子:http://www.echartsjs.com/gallery/edi

echarts画中国地图,省市区地图分享

中国地图 四川地图 重庆地图 源码分享: https://github.com/livelyPeng/ec-map 原文地址:https://www.cnblogs.com/plBlog/p/11725632.html

25、继续echarts实现中国地图

1. 以上是实现的效果 下边是实现的代码,上一篇地图没有颜色,是因为没有引入zrender包,因为echarts画地图是基于zrender实现的 <!DOCTYPE html> <html> <header> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="jquery-1.7.2.min.js"></script>

基于D3JS绘制中国地图

仿照D3JS官网上的美国地图制作了一个中国版的地图. D3JS官网上的版本: http://bl.ocks.org/NPashaP/a74faf20b492ad377312 中国版的地图效果: 如要制作其他国家或其他具体省份-市区级的地图,只需替换掉javascript中的SVG地图数据即可.地图上每个省份的统计数据是随机生成的,可根据需求导入实际业务数据. 分享一个SVG地图数据的网站:https://commons.wikimedia.org/wiki/Category:SVG_maps_o

[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区

最近发生了很多事情,去到了一个新环境学习.但是不论在哪里,我都需要不忘初心,坚持做自己喜欢的事情,在CSDN写博客.教学.爱娜.生活等等.        这篇文章主要是通过Echarts可视化介绍入门知识.中国地图和贵州地区各省份的数据分析.其中贵州地图才是这篇文章的核心内容.这是一篇入门文章,希望对您有所帮助,如果文章中存在不足之处,还请海涵~        官网地址:http://echarts.baidu.com/index.html 一. 入门介绍-第一张图 强烈推荐大家阅读官网的教程进

Echarts 中国地图(包括china.js文件)

用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 1 <!DOCTYPE html> 2 <html> 3 <head> 4 首先,引入jquery.js echarts.js china.js(必要) 5 <script src="/jquery.js"></script> 6 <script src="ech