如上效果图：

以下未代码：

<!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. BZOJ 2527 Meteors | 整体二分

    BZOJ 2527 Meteors 题意 一个圆环上有m个位置,编号为1~m,分别属于n个国家. 有k个时刻,每个时刻都会给圆环上的一个区间中每个位置的值加上一个数. 每个国家有一个目标,问对于每个国 ...

  2. 【poj3016】 K-Monotonic

    http://poj.org/problem?id=3016 (题目链接) 题意 给出一个数列,将一个数${a_i}$更改为${b_i}$的代价为${|a_i-b_i|}$.求将数列改为不递减的最小代 ...

  3. 遇到问题----java----myeclipse或者eclipse发布的项目时配置文件不更新或者无配置文件

    myeclipse或者eclipse发布的项目时配置文件不更新或者无配置文件. 正常的web项目有目录 src/main/resources 和 src/main/java 这两个目录默认在编译发布时 ...

  4. js中相等、大小 不同类型之间是如何进行对比的。

    上个小问题 [] > [] false [] < [] false [] == [] false // why? 再上个加强版 '6xxx' < '5xx' false '6xxx' ...

  5. 笛卡尔树Cartesian Tree

    前言 最近做题目,已经不止一次用到笛卡尔树了.这种数据结构极为优秀,但是构造的细节很容易出错.因此写一篇文章做一个总结. 笛卡尔树 Cartesian Tree 引入问题 有N条的长条状的矩形,宽度都 ...

  6. Codeforces Round #426 (Div. 2) D 线段树优化dp

    D. The Bakery time limit per test 2.5 seconds memory limit per test 256 megabytes input standard inp ...

  7. OpenJudge1001Exponentiation

    问题描述 Problems involving the computation of exact values of very large magnitude and precision are co ...

  8. 五、java面向对象编程_3

    目录 十五.Object类 1.toString 2.equals 十六.对象转型(casting) 十七.动态绑定(多态) 十八.抽象类(abstract) 十九.final关键字 二十.接口 十五 ...

  9. 怎么在.net里面解析JSON文件？

    我在网上搜了好多的文章,讲了很多的方法.但是无一例外的都看不懂...可能是因为我在这方面是个白痴吧... 所幸的是,我搜到了一个博客,写的很是清晰,比我之前看的大片文章写的好多了,在这里:http:/ ...

  10. java中的悲观锁和乐观锁实现

    悲观锁就是认为并发时一定会有冲突发生,采用互斥的策略.比如java中的synchronized. 而乐观锁是假设并发时不会有冲突发生,如果发生冲突,则操作失败,并不断重试.乐观锁的机制就是CAS(Co ...