echarts 地图功能实现

1. 引入echarts插件(注意编码格式,个人建议UTF-8对中文的兼容性更好一点)

2.建立一个有高度和宽度的dom(建议div)

3.获取地图json文件,设置option,展示地图。各个省的地图json数据官网有下载。

废话不多说,直接上代码

<script type="text/javascript" src="./javaScript/echarts.min.js" charset="utf-8"/>

<div id="mainMap" style="width:400px;height:400px">

  

//用山东地图展示各个地市的人口数量
$.get(‘/map/shandong.json‘, function (mapJson) {
    echarts.registerMap(‘shandong‘, mapJson);
    var chart = echarts.init(document.getElementById(‘mainMap‘));//在id为mainMap的dom元素中显示地图
    chart.setOption({
    	tooltip: {
        	trigger: ‘item‘,
        	formatter: function(params) {//回调函数,参数params具体格式参加官方API
        		//鼠标放到某个地市上,显示这个地市的名称加人口数3
				//例如 params.name:当前地市名称。params.value:你传入的json数据与当前地市匹配的一项。
				//params.data.value:你传入的json数据与当前地市匹配的一项中‘value‘对应的数据
        		return params.name+":"+params.data.value;
        	}
		},
        series: [{
            type: ‘map‘,
            map: ‘shandong‘,//要和echarts.registerMap()中第一个参数一致
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
        	},
        	data : dataParam//人口数据:例如[{name:‘济南‘,value:‘100万‘},{name:‘菏泽‘,value:‘100万‘}......]
        }]
    }),
    chart.on(‘click‘, function (params) {//回调函数,点击时触发,参数params格式参加官方API
    	alert(params.name);//弹出当前点击城市的名称
    });
});

  效果图: 

 

时间: 2024-10-09 01:46:19

echarts 地图功能实现的相关文章

AngularJS 项目里使用echarts 2.0 实现地图功能

项目中有一页是显示全国地图, echarts官网的地图实例里,有一个模拟迁徙的实例,比较符合项目需求.所以大部分配置项是参考此实例. angular 就不过多介绍了, Google出品的mvc(或者说mvvm)框架. 双向数据绑定,指令等特性很好用. echarts 是百度的开源图表插件, 功能丰富,展示形式多样. 首先定义一个directive .directive('echartsMap', ['$timeout', function ($timeout) { return { restri

前端数据可视化echarts.js使用指南

一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据可视化的框架琳琅满目,例如:D3.js.hightcharts.js.echarts.js………….由于公司对这个项目的需求是1.开发时间短,所以也就限制了D3.js的使用.2.要尽量的减少开发的成本,所以也就不能使用hightcharts.js(hightcharts是一款个人免费,商业付费的框架

前端数据可视化echarts.js

一.使用背景 前端的数据可视化这一方面,目前市面上的数据可视化的框架琳琅满目,例如:D3.js.hightcharts.js.echarts.js----.由于公司对这个项目的需求是1.开发时间短,所以也就限制了D3.js的使用.2.要尽量的减少开发的成本,所以也就不能使用hightcharts.js(hightcharts是一款个人免费,商业付费的框架).所以最终选择了echarts.js 二.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相

沫沫金Echarts移动端demo

鄙视百度!!! 官网给的Demo支持自动大小,确不给完整的源码XXX 自己动手,丰衣足食 http://echarts.baidu.com/demo.html#bar-tick-align 用最基本的柱状图官网代码 简单两步,实现移动端自适应大小 //1.下载Echarts <script src="dep/Echarts/echarts-all-3.js"></script> //2.chart容器宽度自适应 <!-- 为ECharts准备一个具备大小(

大数据时代的图表可视化利器——highcharts,D3和百度的echarts

还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗?还记得那些酷炫拽的it报告图表吗?在这个大数据越来越盛行的年代,怎样去表达一些用户的关系,人物的关联,甚至是事情的发展,都让我们有更多的表达方式.其中最简单直接,形象明了的就是用图表说明问题了. 如果在以前,要实现各种图表,可能很多人会选择flash.但是flash成本较高,图表多的时候很耗性能.后来越来越多的纯js框架出现,让大家有了更多的选择.所以接下来我想推荐几个不错的图表js框架给大家用.

echarts高级使用

上一篇文章中介绍了echarts中柱状图的使用,从demo中我们可以看到不管是柱状图还是饼状图或者是折线图,都是导入js,准备option参数.为了使用方便我们下一步要做的就是封装了. 我们把图形类型和图形数据与图形显示分离开来,封装独立的js文件,只要传给他图形类型参数和图形数据参数就能显示出对应的图形,这样就不会出现太多的冗余代码.接下来我们说封装js文件. 是柱状图封装柱状图的js饼状图封装饼状图的js呢,还是所有的图形封装成一个js呢?如果我们单独封装,就把option内容中变化的图形数

数据视化Echarts+百度地图API实现市县区级下钻

开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是很详细,对于刚接触Echarts的让人来说可能有些搞不明白,在这里我把Echarts下钻开发过程中总结的知识分享给大家,也能使自己加深印象,当然啦,对于一些在软件行业折腾了几年的老油条来说,这些都是一些非常基础的东西.但是还是希望能帮助到那些刚接触Echarts遇到类似问题需要帮助的人.如果哪里写的

Echarts字体和线条颜色设置操作笔记

这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧.我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码.这样更方便阅读及读者知道,是否对自己有所帮助,其重点是如何在模板动态网页或JSP网站中插入Echarts图片.        1.修改标题及背景颜色    2.设置柱形图颜色 3.修改坐标轴字体颜色        4.设置Legend颜色 5.修改折线颜色    6.修改油表盘字体大小及颜色 7.柱状图文本鼠标浮动上的颜色设置

Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义数据

在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到charts()调用的函数的最底部即可 1 var ecConfig = require('echarts/config'); 2 myChart.on(ecConfig.EVENT.HOVER