
如上效果图:
以下未代码:
<!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 移动端地图数据可视化教程
如上效果图: 以下未代码: <!doctype html> <html lang="en"> <head> <meta charset ...
- [资料搜集狂]D3.js数据可视化开发库
偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...
- echarts实现中国地图数据展示
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
- ECharts的geojson地图数据下载(根据城市区划代码的前六位查询)
链接如下: http://echarts.baidu.com/echarts2/doc/example/geoJson/china-main-city/522200.json 想要对应城市的geojs ...
- 基于Echarts的中国地图数据展示
发布时间:2018-10-31 技术:javascript+html5+canvas 概述 基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...
- SharpNodeSettings项目,可配置的数据采集,统一的工业数据网关,OPC UA服务器开发,PLC数据发布到自身内存,redis,opc ua,以及数据可视化开发
本项目隶属于 HslCommunication 项目的SDK套件,如果不清楚HslCommunication组件的话,可以先了解那个项目,源代码地址:https://github.com/dathli ...
- Echarts数据可视化series-map地图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- 【教程】高德地图使用ECharts实现数据可视化
关于百度地图结合ECharts实现数据可视化的资料已经很多了,毕竟是官方提供支持的,这里就不再赘述.今天我们来讲一下让高德地图与ECharts结合来实现数据可视化图表的展示. 一.ECharts 高德 ...
- Echarts数据可视化series-scatter散点图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
随机推荐
- BZOJ 2527 Meteors | 整体二分
BZOJ 2527 Meteors 题意 一个圆环上有m个位置,编号为1~m,分别属于n个国家. 有k个时刻,每个时刻都会给圆环上的一个区间中每个位置的值加上一个数. 每个国家有一个目标,问对于每个国 ...
- 【poj3016】 K-Monotonic
http://poj.org/problem?id=3016 (题目链接) 题意 给出一个数列,将一个数${a_i}$更改为${b_i}$的代价为${|a_i-b_i|}$.求将数列改为不递减的最小代 ...
- 遇到问题----java----myeclipse或者eclipse发布的项目时配置文件不更新或者无配置文件
myeclipse或者eclipse发布的项目时配置文件不更新或者无配置文件. 正常的web项目有目录 src/main/resources 和 src/main/java 这两个目录默认在编译发布时 ...
- js中相等、大小 不同类型之间是如何进行对比的。
上个小问题 [] > [] false [] < [] false [] == [] false // why? 再上个加强版 '6xxx' < '5xx' false '6xxx' ...
- 笛卡尔树Cartesian Tree
前言 最近做题目,已经不止一次用到笛卡尔树了.这种数据结构极为优秀,但是构造的细节很容易出错.因此写一篇文章做一个总结. 笛卡尔树 Cartesian Tree 引入问题 有N条的长条状的矩形,宽度都 ...
- 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 ...
- OpenJudge1001Exponentiation
问题描述 Problems involving the computation of exact values of very large magnitude and precision are co ...
- 五、java面向对象编程_3
目录 十五.Object类 1.toString 2.equals 十六.对象转型(casting) 十七.动态绑定(多态) 十八.抽象类(abstract) 十九.final关键字 二十.接口 十五 ...
- 怎么在.net里面解析JSON文件?
我在网上搜了好多的文章,讲了很多的方法.但是无一例外的都看不懂...可能是因为我在这方面是个白痴吧... 所幸的是,我搜到了一个博客,写的很是清晰,比我之前看的大片文章写的好多了,在这里:http:/ ...
- java中的悲观锁和乐观锁实现
悲观锁就是认为并发时一定会有冲突发生,采用互斥的策略.比如java中的synchronized. 而乐观锁是假设并发时不会有冲突发生,如果发生冲突,则操作失败,并不断重试.乐观锁的机制就是CAS(Co ...