数据图表插件echarts(二)
2024-10-18 22:31:02
前言
上一篇文章简单介绍了一下百度公司前端部门写的一个js插件echarts,这是一款很强大的图表插件,里面的地图控件也是很强大的,支持离线的使用,并且数据也是离线的,使用很方便。下面我就简单介绍一下echarts中的地图控件
一、插件下载
echarts3是一个集成的插件,把很多东西都集成到一起了,使用很方便,从官网上下载一下,和普通js文件一样,直接添加到项目中,在HTML头部引用一下即可。
地图的插件也是一个js文件,数据是一个json文件,从官网下载下来,添加引用,但是一定注意引用的先后顺序。
1、echarts下载地址
http://echarts.baidu.com/download.html
2、地图下载
http://echarts.baidu.com/download-map.html (js文件和json文件)包括中国地图和世界地图,还有各个省份的地图数据。
二、插件引用
1、js的引用
<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
</script>
2、json的引用
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
三、完整的demo
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<title>河南省地图</title>
</head>
<body>
<div id="main" style="width:100%;height:800px;"></div>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/henan.js"></script>
<script type="text/javascript">
$(function () {
//获取地区的json数据
var henanJson = $.get('json/henan.json');
//加载省份的地图
echarts.registerMap('henan', henanJson);
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series: [{
type: 'map',
mapType: '河南'
}]
}); myChart.on('click', function (param) {
var selectedCity = param.name;
alert(selectedCity);
//点击获取对应的市的名称
var flag = false;
var selected = param.selected;
for (var p in selected) {
getVodList(mapUtil.findFbdm(selectedCity), selectedCity);
//加载右侧的列表
if (p == selectedCity) {
flag = true;
selectedCity = p;
}
}
if (flag) {
//重新画地图进入到该市的县级地图 (下钻到县级 )
var map = new Map();
map = getMap(selectedCity, 3);
initMap(map, selectedCity, 'xj');
$('#Header').css('display', ''); //显示隐藏的返回按钮
myChart.on('click', function (param) {
var selectedTown = param.target;
//点击获取对应的县的名称
getVodList(mapUtil.findFbdm(selectedTown), selectedTown);
//加载右侧的列表
});
}
});
});
</script>
</body>
</html>
四、显示结果
最新文章
- svn 几个常用命令(持续更新)
- Maven学习随笔一——Maven安装报错处理(mvn -v, 提示不是内部命令的问题)
- Vundle的安装
- struts2默认action
- C# List和String互相转换
- 清理Oracle安装目录里的一些日志信息
- [CLR via C#]18. Attribute
- 《EXO指数型组织》阅读脑图
- 删除Checkout with Multiple Addresses
- 史上最全的CSS样式整理
- 静态页面中如何传json数据
- 链栈之C++实现
- js--javascript中字符串常用操作总结、JS字符串操作大全
- 自己写的angularJs排序指令【原创】
- swift内存管理中的引用计数
- Java泛型、List接口整理
- English trip M1 - PC7 Can I Borrow Your Ping-Pong? Teacher:Patrick
- 使用路由和远程访问服务为Hyper-V中虚拟机实现NAT上网
- 采用太平洋AI集装箱箱号识别接口实现集装箱箱号识别
- webpack的代码分割/离