Echarts mc地图

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



结束

原文地址:https://www.cnblogs.com/zktww/p/11698160.html

时间: 2024-10-09 20:37:49

Echarts mc地图的相关文章

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

开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是很详细,对于刚接触Echarts的让人来说可能有些搞不明白,在这里我把Echarts下钻开发过程中总结的知识分享给大家,也能使自己加深印象,当然啦,对于一些在软件行业折腾了几年的老油条来说,这些都是一些非常基础的东西.但是还是希望能帮助到那些刚接触Echarts遇到类似问题需要帮助的人.如果哪里写的

echarts Map(地图) 不同颜色区块显示

echarts Map(地图) 不同区块显示 这里以重庆地图为例 配置项: var option = { title : { text: '重庆市', subtext: '', x:'left' }, tooltip : { trigger: 'item', formatter: '{b}', itemSize:'14px' }, legend: { orient: 'vertical', x:'center', data:['重庆市区县'] }, dataRange: { x: 'left',

echarts合并地图,把中国各个省份分成&#39;华北&#39;,&#39;东北&#39;,&#39;华东&#39;,&#39;华中&#39;,&#39;华南&#39;,&#39;西南&#39;,&#39;西北&#39;七个大区

最近公司有个需求是按照大区,即把中国分成华北','东北','华东','华中','华南','西南','西北'七个大区, 但是echarts地图只有省市,还没有大区,只能自己网上找资料再按需求写了 echarts地图合并关键点是把coordinates和encodeOffsets合并,而且这两个必须都合并,且最多只能合并到二维数组,合并到三维数组就不行了. 实例结果截图 代码: <!DOCTYPE html> <html lang="zh"> <head>

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

https://echarts.baidu.com/examples/editor.html?c=map-polygon https://echarts.baidu.com/examples/editor.html?c=effectScatter-bmap 空气质量等,可以通过值来控制点的大小和光环. https://echarts.baidu.com/examples/editor.html?c=heatmap-bmap 人流密度图.热力图等 我的echarts+百度地图 左上角可以切换地图和

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

在使用echarts的地图的时候省份的颜色可能随着数据的多少显示不同的颜色,但是当后台返回的数据的变化较大时可能就不好控制了,所以需要设置根据后台的数据进行自适应 将后台返回的数据中的value放入一个新的数组中,然后取出数组中的最大值来设置给echarts的visulMap的max属性,并将最小值设置给min属性,当后台没有数据返回的时候会报错,所以要进行一下判断 这里取最大值和最小值使用的是扩展运算符配合Math.max/Math.min来实现的 //data是后台返回的数据var leng

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

一个让echarts中国地图包含省市轮廓的技巧

背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂本文. 可能官方也提供过整体的地图库,但可能个人能力有限,并没有找到相关信息或者其他解决方案,如果知道的园友请告诉我. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safa

Echarts Map地图类型使用

使用的时候出现了一个BUG, China地图的底色没有绘制出来,现在把一个小的DEMO给大家,以供参考,并附上参考文章(http://blog.csdn.net/danielinbiti/article/details/44851781),祝好. <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body

Echarts map地图中需要的JSON 数据格式

var initData1 = [ { "name": "安徽", "value": 244 }, { "name": "北京", "value": 5019 }, { "name": "福建", "value": 120 }, { "name": "甘肃", "value&qu