Echarts mc地图


echarts官网实例:

https://gallery.echartsjs.com/editor.html?c=xSNlA5O-zl

效果:

代码:

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="vintage.js"></script>
</head>
<body>
<div id="container" style="height:900px;"></div>
<script>
var myCharts = echarts.init(document.getElementById('container'),'vintage');
option = {
color: '#128d15',
xAxis: {
name: '东(x轴)',
maxInterval: 500,
nameTextStyle: {
color: '#f00',
}
},
yAxis: {
name: '北(z轴)',
maxInterval: 500,
nameTextStyle: {
color: '#f00',
}
},
series: [{
symbolSize: 10,
label: {
show: true,
position: 'right',
formatter: '{b}',
},
data: [{
name: '家',
value: [245, 224],
},
{
name: '雪屋',
value: [-1215, 554],
},
{
name: '繁花似锦',
value: [1544, 350],
},
{
name: '丛林',
value: [-2419, 29],
},
{
name: '刷怪笼',
value: [919, -710],
},
{
name: '被袭击的村庄',
value: [1334, 664],
},
{
name: '地狱门(村庄下面)',
value: [153, 64],
},
{
name: '红土山',
value: [223, -1747],
},
{
name: '沼泽',
value: [-1922, 4451],
},
{
name: '海底神殿',
value: [215, 1095],
}, ],
type: 'scatter'
}]
};
myCharts.setOption(option);
</script>
</body>
</html>

使用说明:

//series.data即为自己地图坐标数组
//主题使用vintage,否则背景不为效果所示
//echarts切换主题:
    1.echarts官网下载自己所需要的主题包,这里以vintage为例
    2.引入js
      <script type="text/javascript" src="vintage.js"></script>
    3.初始化echarts时,加入主体标识
      var myCharts = echarts.init(document.getElementById('container'),'vintage');

echarts版本为4.4.0


结束

Echarts mc地图的更多相关文章

  1. 数据视化Echarts+百度地图API实现市县区级下钻

    开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...

  2. echarts的地图点击事件

    1.echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用. 参考 ...

  3. Echarts 设置地图上文字大小及颜色

    Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...

  4. echarts中国地图散点涟漪效果

    echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...

  5. echarts中国地图

    echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...

  6. echarts的地图省份颜色自适应变化

    在使用echarts的地图的时候省份的颜色可能随着数据的多少显示不同的颜色,但是当后台返回的数据的变化较大时可能就不好控制了,所以需要设置根据后台的数据进行自适应 将后台返回的数据中的value放入一 ...

  7. 几个不错的echarts +百度地图 案例

    https://echarts.baidu.com/examples/editor.html?c=map-polygon https://echarts.baidu.com/examples/edit ...

  8. ECharts 实现地图散点图上(转载)

    转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上)  小红  2016-04-28  ECharts, 教 ...

  9. echarts map 地图在react项目中的使用

    需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...

随机推荐

  1. JS中关于构造函数、原型链、prototype、constructor、instanceof、__proto__属性

    在Javascript不存在类(Class)的概念,javascript中不是基于类的,而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中引入 ...

  2. Acunetix Web Vulnerability Scanner(WVS)(Acunetix网络漏洞扫描器)

    Acunetix网络漏洞扫描软件检测您网络的安全性安全测试工具Acunetix Web Vulnerability Scanner(WVS) (Acunetix网络漏洞扫描器)技术 网络应用安全扫描技 ...

  3. static、final修饰的变量和方法能否被继承的问题

    首先定义父类和子类 public class Parent { protected static String a = "static"; final String b = &qu ...

  4. 2018-2019-2 网络对抗技术 20165206 Exp7 网络欺诈防范

    - 2018-2019-2 网络对抗技术 20165206 Exp7 网络欺诈防范 - 实验任务 (1)简单应用SET工具建立冒名网站 (1分) (2)ettercap DNS spoof (1分) ...

  5. python and 用法

    >>> 1 and [] and [1] [] >>> 1 and [2] and [1] [1] >>> 0 and [1] and [2] 0

  6. python 字符串str和json格式转换

    最近在写一个脚本,需要处理从excel中读取的数据,发现读取的json格式数据进行转换时报错 ValueError: Expecting property name enclosed in doubl ...

  7. nginx相关总结

    1. Nginx 无法启动解决方法 在查看到 logs 中报了如下错误时: 0.0.0.0:80 failed (10013: An attempt was made to access a sock ...

  8. python3+django2 个人简单博客实现 -正在施工

  9. XAMPP【phpmyadmin】外网访问被拒绝解决办法

    问题场景: 在阿里云搭建一个apache服务器,正常访问XAMPP目录下的页面. 服务器本地是可以正常访问的 但是远程 就不可以访问了: 出现这样的画面: 解决方法 1.按照提示找到httpd-xam ...

  10. mybatis分页插件使用

    一:导入依赖 <!--分页插件--> <dependency> <groupId>com.github.pagehelper</groupId> < ...