如上效果图：
以下未代码：
<!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 ...
随机推荐
- 20135319zl字符集报告
字符集实验 ASCII 首先,查找ZHULI五个字符对应的ASCII码,5a 48 55 4c 49. 然后,用vim打开一个空文档,按下":",输入%!xxd 然后,输入 000 ...
- LGP4577【JSOI2018】战争
题解: 求出$A$ 和$-B$ 的$Minkowsiki$和再$O(logn)$判断一个点是否在凸包内: $Minkowsiki$的求法比较容易忘,要多多温习才可以: #include<bits ...
- 在前台jsp页面中取得并使用后台放入域中变量的方法
定义成 js变量后,在js中也可以自由使用.
- getopt_long
http://blog.csdn.net/lanyan822/article/details/7692013 在程序中难免需要使用命令行选项,可以选择自己解析命令行选项,但是有现成的,何必再造轮子.下 ...
- linux查看当前文件夹的大小
1.(方法一)ls -lht会列出当前目录下每个文件的大小,同时也会给出当前目录下所有文件大小总和 [查看谬个文件的大小,] 2.(方法二)du -sh *也会列出当前文件夹下所有文件对应的大小 [把 ...
- K8S调度之节点亲和性
Node Affinity Affinity 翻译成中文是"亲和性",它对应的是 Anti-Affinity,我们翻译成"互斥".这两个词比较形象,可以把 po ...
- matlab和C语言实现最小二乘法
参考:https://blog.csdn.net/zengxiantao1994/article/details/70210662 Matlab代码: N = ; x = [ ]; y = [ ]; ...
- 博世传感器调试笔记（二）加速度及陀螺仪传感器BMI160
一.功能参数简介bosch Sensortec公司推出的最新BMI160惯性测量单元将最顶尖的16位3轴超低重力加速度计和超低功耗3轴陀螺仪集成于单一封装.MI160采用14管脚LGA封装,尺寸为2. ...
- StringBuffer类和String 类的 equals 和 ==
注意: equals(Object obj)equals方法的参数是任意对象 Object类的equals方法就是用==判断的,即判断两个对象是否为同一个对象 StringBuffer类没有重写equ ...
- bzoj千题计划114：bzoj1791: [Ioi2008]Island 岛屿
http://www.lydsy.com/JudgeOnline/problem.php?id=1791 就是求所有基环树的直径之和 加手工栈 #include<cstdio> #incl ...
