如上效果图：
以下未代码：
<!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 ...
随机推荐
- hdu6057 Kanade's convolution 【FWT】
题目链接 hdu6057 题意 给出序列\(A[0...2^{m} - 1]\)和\(B[0...2^{m} - 1]\),求所有 \[C[k] = \sum\limits_{i \; and \; ...
- BZOJ1495 [NOI2006]网络收费 【树形dp + 状压dp】
题目链接 BZOJ1495 题解 观察表格,实际上就是分\(A\)多和\(B\)两种情况,分别对应每个点选\(A\)权值或者\(B\)权值,所以成对的权值可以分到每个点上 所以每个非叶节点实际对应一个 ...
- 【线段树】【P4198】 楼房重建
Description 小A在平面上(0,0)点的位置,第i栋楼房可以用一条连接(i,0)和(i,Hi)的线段表示,其中Hi为第i栋楼房的高度.如果这栋楼房上任何一个高度大于0的点与(0,0)的连线没 ...
- Python之旅：元组
作用:存多个值,对比列表来说,元组不可变(是可以当做字典的key的),主要是用来读#定义:与列表类型比,只不过[]换成()age=(11,22,33,44,55)本质age=tuple((11,22, ...
- D. Arpa and a list of numbers Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017)
http://codeforces.com/contest/851/problem/D 分区间操作 #include <cstdio> #include <cstdlib> # ...
- HDU 6070 二分+线段树
Dirt Ratio Time Limit: 18000/9000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Others)Tot ...
- 布谷鸟搜索算法CS
0 引言 布谷鸟搜索(Cuckoo Search,CS)是由 Xin-She Yang 和 Suash Deb 于 2009 年开发的自然启发式算法.CS 基于布谷鸟的寄生性育雏(brood para ...
- Chapter 5(串)
1.kmp #include <stdio.h> #include <stdlib.h> #include <stdbool.h> #include <str ...
- 自定义UITableViewCell的方法
1.纯XIB/storyboard自定义.对应一个Controller的storyboard上拖拽出一个自定义Cell,并加上ReuseIdentifitor 2.纯代码自定义,通过在contentV ...
- asp.net webapi http请求生命周期
先附上webapi http生命周期图. 原始的图片地址为:https://www.asp.net/media/4071077/aspnet-web-api-poster.pdf
