如上效果图：

以下未代码：

<!doctype html>
<html lang="en">
 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="format-detection" content="telephone=no">
<title>ECharts地图选择器</title>
<script src="../../static/awareness_day/js/jquery.min.js"></script>
</head>
 
<body>
 
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:26rem"></div>
<script src="../../static/awareness_day/js/echarts.js"></script>
 
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
],
function(ec) {
var myChart = ec.init(document.getElementById('main'));
// 过渡---------------------
// myChart.showLoading({
// text: '正在努力的读取数据中...',
// effect: 'whirling'
// });
 
// ajax getting data...............
 
 
var colorbg;
var selected;
 
var option = {
backgroundColor: '#000',
borderWidth: 10,
borderColor: '#ffffff',
dataRange: {
min: 0,
max: 1000,
color: ['rgba(255,222,0,1)', 'rgba(110,0,0,1)'],
text: ['高', '低'],
splitNumber: 0,
calculable: false,
show: false,
},
series: [{
 
name: 'Map',
type: 'map',
mapLocation: {
x: '4%',
y: '8%',
height: 400
},
selectedMode: 'multiple',
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#9c1a1a',
color: '#6e0000',
label: {
show: false
 
}
},
emphasis: { // 也是选中样式
borderWidth: 1,
borderColor: '#a95901',
color: colorbg,
label: {
show: false,
textStyle: {
color: '#fff'
}
}
},
},
 
data: [{
name: '海南',
value: Math.round(Math.random() * 1000)
},
{
name: '广东',
value: Math.round(Math.random() * 1000)
},
{
name: '广西',
value: Math.round(Math.random() * 1000)
},
{
name: '福建',
value: Math.round(Math.random() * 1000)
},
// {
// name: '甘肃',
// selected: false
// },
{
name: '江西',
value: Math.round(Math.random() * 1000)
},
{
name: '湖南',
value: Math.round(Math.random() * 1000)
},
{
name: '浙江',
value: Math.round(Math.random() * 1000)
},
{
name: '贵州',
value: Math.round(Math.random() * 1000)
},
{
name: '云南',
value: Math.round(Math.random() * 1000)
},
{
name: '上海',
value: Math.round(Math.random() * 1000)
},
{
name: '江苏',
value: Math.round(Math.random() * 1000)
},
{
name: '安徽',
value: Math.round(Math.random() * 1000)
},
{
name: '湖北',
value: Math.round(Math.random() * 1000)
},
{
name: '重庆',
value: Math.round(Math.random() * 1000)
},
{
name: '四川',
value: Math.round(Math.random() * 1000)
},
{
name: '河南',
value: Math.round(Math.random() * 1000)
},
{
name: '山东',
value: Math.round(Math.random() * 1000)
},
{
name: '天津',
value: Math.round(Math.random() * 1000)
},
{
name: '河北',
value: Math.round(Math.random() * 1000)
},
{
name: '山西',
value: Math.round(Math.random() * 1000)
},
{
name: '北京',
value: Math.round(Math.random() * 1000)
},
{
name: '辽宁',
value: Math.round(Math.random() * 1000)
},
{
name: '吉林',
value: Math.round(Math.random() * 1000)
},
{
name: '黑龙江',
value: Math.round(Math.random() * 1000)
},
{
name: '内蒙古',
value: Math.round(Math.random() * 1000)
},
{
name: '陕西',
value: Math.round(Math.random() * 1000)
},
{
name: '宁夏',
value: Math.round(Math.random() * 1000)
},
{
name: '青海',
value: Math.round(Math.random() * 1000)
},
{
name: '甘肃',
value: Math.round(Math.random() * 1000)
},
{
name: '新疆',
value: Math.round(Math.random() * 1000)
},
{
name: '西藏',
value: Math.round(Math.random() * 1000)
},
{
name: '香港',
value: Math.round(Math.random() * 1000)
},
{
name: '澳门',
value: Math.round(Math.random() * 1000)
},
{
name: '台湾',
value: Math.round(Math.random() * 1000)
},
{
name: '南海诸岛',
value: Math.round(Math.random() * 1000)
},
],
},
 
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
 
</body>
 
</html>

echarts 移动端地图数据可视化开发教程的更多相关文章

  1. echarts 移动端地图数据可视化教程

    如上效果图: 以下未代码: <!doctype html> <html lang="en">   <head> <meta charset ...

  2. [资料搜集狂]D3.js数据可视化开发库

    偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...

  3. echarts实现中国地图数据展示

    在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...

  4. ECharts的geojson地图数据下载（根据城市区划代码的前六位查询）

    链接如下: http://echarts.baidu.com/echarts2/doc/example/geoJson/china-main-city/522200.json 想要对应城市的geojs ...

  5. 基于Echarts的中国地图数据展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...

  6. SharpNodeSettings项目，可配置的数据采集，统一的工业数据网关，OPC UA服务器开发，PLC数据发布到自身内存，redis，opc ua，以及数据可视化开发

    本项目隶属于 HslCommunication 项目的SDK套件,如果不清楚HslCommunication组件的话,可以先了解那个项目,源代码地址:https://github.com/dathli ...

  7. Echarts数据可视化series-map地图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  8. 【教程】高德地图使用ECharts实现数据可视化

    关于百度地图结合ECharts实现数据可视化的资料已经很多了,毕竟是官方提供支持的,这里就不再赘述.今天我们来讲一下让高德地图与ECharts结合来实现数据可视化图表的展示. 一.ECharts 高德 ...

  9. Echarts数据可视化series-scatter散点图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

随机推荐

  1. 解题：CF949D Curfew

    题面 整体的思路就是在均摊每个宿舍的人数,注意一个人可以跑好几次=.= 可以发现多的学生往中间跑一定能跑过宿管,所以只考虑学生们能不能及时跑到人不够的宿舍.对两边记录两个已经满足要求的宿舍,然后用前/ ...

  2. D. Huge Strings Codeforces Round #438 by Sberbank and Barcelona Bootcamp (Div. 1 + Div. 2 combined)

    http://codeforces.com/contest/868/problem/D 优化:两个串合并 原有状态+ 第一个串的尾部&第二个串的头部的状态 串变为第一个串的头部&第二个 ...

  3. HDU--4607

    题目: Park Visit 原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=4607 分析:求树的直径.所谓树的直径,指的是一棵树里任意两点之间的最远距 ...

  4. 洛谷P3201 [HNOI2009]梦幻布丁(链表 + 启发式合并)

    题目链接 给出 \(n\) 个布丁,每个补丁都有其颜色.现在有 \(m\) 次操作,每次操作将第 \(x_i\) 种颜色全部变为第 \(y_i\) 种颜色. 操作中可能会插入询问,回答目前总共有多少段 ...

  5. linux expect 的使用

    expect 可以让一些需要交互的命令自动完成,如 ssh 连接的适合需要输入密码. 也就是说,某些重复的操作我们可以使用该命令完成,比如 ssh 连接到服务器,然后进到某个项目目录,进行 git 的 ...

  6. struts2为什么action要继承actionSupport类

    我们为了方便实现Action,大多数情况下都会继承com.opensymphony.xwork2.ActionSupport类, 并重载(Override)此类里的String execute()方法 ...

  7. Chapter6(函数) --C++Prime笔记

    1.重载函数,也就是说一个名字可以对应几个不同的函数. 2.内置类型的未初始化局部变量将产生未定义的值. 3.局部静态对象在程序执行路径第一次进过对象定义语句时初始化,并且直到程序终止才被销毁. 内置 ...

  8. Kubernetes集群中Service的滚动更新

    Kubernetes集群中Service的滚动更新 二月 9, 2017 0 条评论 在移动互联网时代,消费者的消费行为已经“全天候化”,为此,商家的业务系统也要保持7×24小时不间断地提供服务以满足 ...

  9. python---django中权限框架设计

    一:admin下的权限了解 推文:如何正确使用 Django的User Model (一)默认权限表是在自带auth模块,中permission表中 可以使用has_perm方法获取用户是否有这个权限 ...

  10. CF&&CC百套计划2 CodeChef December Challenge 2017 Chef And Easy Xor Queries

    https://www.codechef.com/DEC17/problems/CHEFEXQ 题意: 位置i的数改为k 询问区间[1,i]内有多少个前缀的异或和为k 分块 sum[i][j] 表示第 ...