Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据
时间： 20:03:10
&&&& 阅读：22611
&&&& 评论：
&&&& 收藏：0
标签：在项目开发中，有需要用到地图的地方，百度的echarts地图插件就是个不错的选择，
这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据；
一、鼠标HOVER时的事件：
参照官方文档解释,
可以看出这款插件有丰富的鼠标事件可供选择：
　　调用鼠标HOVER事件的方法很简单,只需把以下代码放到charts（）调用的函数的最底部即可
1 var ecConfig = require(‘echarts/config‘);
myChart.on(ecConfig.EVENT.HOVER, function (param){
var selected = param.
//write your code here
//console.log(selected);打印参数
//hoverin();调用自定义函数
//document.getElementById(‘wrong-message‘).innerHTML =
二、tooltip的数据自定义；
　　这块研究了一段时间，都是浅浅的研究，
　　tooltip就是鼠标放在地图上显示的提示，如图红框里的就是tooltip的内容；
这里总结的主要是这块数据的自定义;
官方文档介绍说需要修改formatter；
option = {
tooltip : {
trigger: ‘item‘,
formatter: ‘{b}‘
文档中说明：formatter支持函数自定义数据及模板
那么，我们可以把上面的代码改造一下：
首先自定义一些数据：（例子）这里是图片的url
var $imgs = [
{area: ‘北京‘, url:‘/template/33/pc/images//logo2.png‘},
{area: ‘天津‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘上海‘, url:‘/template/33/pc/images//logo2.png‘},
{area: ‘重庆‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘河北‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘河南‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘云南‘, url:‘/template/33/pc/images//logo2.png‘},
{area: ‘辽宁‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘黑龙江‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘湖南‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘安徽‘, url:‘/template/33/pc/images//logo2.png‘},
{area: ‘山东‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘新疆‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘江苏‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘浙江‘, url:‘/template/33/pc/images//logo2.png‘},
{area: ‘江西‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘湖北‘, url:‘/template/33/pc/images//logo2.png‘},
{area: ‘广西‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘甘肃‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘山西‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘内蒙古‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘陕西‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘吉林‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘福建‘, url:‘/template/33/pc/images//logo2.png‘},
{area: ‘贵州‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘广东‘, url:‘/template/33/pc/images//logo2.png‘},
{area: ‘青海‘, url:‘/template/33/pc/images//logo2.png‘},
{area: ‘西藏‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘四川‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘宁夏‘, url:‘/template/33/pc/images//logo2.png‘},
{area: ‘海南‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘台湾‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘香港‘, url:‘/template/33/pc/images//logo3.png‘},
{area: ‘澳门‘, url:‘/template/33/pc/images//logo3.png‘}
当鼠标HOVER的时候，去判断取哪些值来显示；
tooltip : {
trigger: ‘item‘,
formatter: function (params,ticket,callback){
var $pna = params.
var res = ‘‘;
for(var i = 0;i&$imgs.i++){
if($imgs[i].area == $pna){
res = ‘&img src="‘+ $imgs[i].url +‘" /&‘;//设置自定义数据的模板，这里的模板是图片
//console.log(res);
setTimeout(function (){
// 仅为了模拟异步回调
callback(ticket, res);//回调函数，这里可以做异步请求加载的一些代码
return ‘loading‘;
最终完成的效果如图
&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！一个echarts图版，多个按钮控制数据刷新
第一次接触echarts，现在做的样子是这样
通过按钮控制图的刷新。我刚开始的想法是：点击以后渐进性ajax的刷新，但是有一个严重的问题，echarts图渲染比较慢（浏览器页面基本别想点击了）.
所以，我让后台把数据写在了一个json中（好吧，我又欺负他了）。这样，我在加载第一个图的时候，让数据存储在了本地：window.localStorage.setItem()，然后在其他页面读取的时候不用在加载后台数据。
在上下按钮的来回点击时，又涉及到了''联动''，在联动方面，我让数据读取的时候，读取当前层级的索引值，然后获取其他层级的有背景颜色的索引值，这样就固定了单一的数据，然后触发html 代码效果预览var index3=$('.date3').find('.active3').index()-1;
//获取按钮的当前点击的索引值
index2=$('.date2').find('.active2').index()-1;
//获取上一层级的索引值
var json=JSON.parse(window.localStorage.getItem('data'));
//获取本地存储
option.xAxis.data = eval(json.data.category[index3]);
//设置x轴数据
option.series = eval(json.data.series[index2][index3]);
//设置具体图形数据
option.legend.data = eval(json.data.legend);
//设置echarts头部
myChart.hideLoading();
//加载运动隐藏
myChart.setOption(option);
//添加加载图
很少写帖子，知识还很欠缺，有大牛原意指导的欢迎
嗯嗯，代码没完全贴出来 //：顶一下，似乎看不了效果
顶一下，似乎看不了效果
9 总笔记数
6121 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：使用Echarts总结之——使用柱状图和地图与后台数据交互 - 博客频道 - CSDN.NET
不以物喜，不以己悲
分类：基础问题_JAVA
一、引入js
当然首先肯定是要引入相关的echart,
简单的开发基本上一个&script language=&javascript& type=&text/javascript& src=&${base}/echarts/dist/echarts-all.js&&&/script&就足够了
至于需要哪些echart相关文件放入到项目中，通过官网下载echarts(这里是echarts-2.27)，将build目录下所有文件拷贝到项目中，然后引用echarts-all.js就可以
&&&&& 1》开发柱状图：
&&&&&&&&&&&&&&& 1、jsp或html页面，写一个存放图的地方
&&&&&&&&&&&&&&&&&&&&&&&&&& 如：&div id=&myEchart& style=&height:500&&&/div&
&&&&&&&&&&& 2、js内容：主要也就是调用主要的option，这个可以直接从Echat自带的实例中获取，用哪个取哪个
&&&&&&&&&&&&&&&&&&&&&&& 如柱状图例子：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& var myChart,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& function queryDataTest(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //获取图表位置
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& myChart = echarts.init(document.getElementById(&myEchart&));
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& option = {..........}//这里内容可以直接从Echat自带的列子中取
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& myChart.setOption(option);//将图表内容格式内容放入到myChart位置
&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& myChart.hideLoading(); &
&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& getChartData();//aja后台交互
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //后台交互
&&&&&&&&&&&&&&&&&&&&&&&&&&&&& function&& getChartData(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //获得图表的options对象
&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& var options = myChart.getOption();
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& var param1 = $(&#param1
&& & & & & & & & & & & & & & & & & & & var param2= $(&#param2&).val();
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& var _data = {&param1&:param1,.....};这里可以加请求的参数
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //通过ajax获取数据
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& $.ajax({
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& type:&post&,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& async:false,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& url:base + &/monitor/RegUser_test.do&,//请求路径
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& dataType:&json&,//返回数据形式为json
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& data:_data,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& success:function(result){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& if(result){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
options.legend.data&=&result.& //legend赋值数据
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& options.xAxis[0].data=&
result[0].xdata；//x轴赋值数据
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& options.series[0].data= result[0].data；//y轴赋值数据
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& myChart.hideLoading();&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& myChart.setOption(options);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }，
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& error:function(errorMsg){
&& &&& &&& & & & & & & & & & & & & & & & & & & & & & & & & & alert(&图表请求数据失败啦!&);
&& &&& &&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& myChart.hideLoading();
&& &&& & & & & & & & & & & & & & & & & & & & & & & }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& })
&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&& 3.java 后台代码
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& List&EchartData& echartDataList = new ArrayList&EchartData&();
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& EchartData echart = new EcharData();
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& echart.setLegend(&增长量&);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& echart.setXdata(new ArrayList&String&(Arrays.asList(&北京&,&天津&.................)));//里面值填充数组 datas = new String[]{&北京&,&天津&....}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& echart.setData(new ArrayList&Integer&(Arrays.asList(2,7,8....)));//里面值填充数组 datas = new Integer[]{2,7,8.....}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& echartDataList.add(echart);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& return JSONArray.fromOjbect(echartDataList);//将值一json格式返回
&&&&&&&&&&&&&&&&&&&&&& EchartData.java 代码
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& private S
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& private List&String&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& private List&Integer&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& public EchartData(){}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& public EchartData(String legend, List&String& xdata, List&Integer& data){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& this.legend =
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ......
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 生成get /set &
&OK 效果图：
&&&&&&& 1》开发地图：
&&&&&&&&&&&&&&& 步骤都一样，赋值的时候
&&&&&&&&&&&&&&&&&&&&&&&&&& 关键是在赋值的时候，地图 的数据是& data:[{name:'北京',value:20}............]这样的形式name和value,并且省直辖市的名称必须按照自带的名称一样，不然数据出不来，顺序可以随便排序
&&&&&&&&&&&&&&&&&&&&&&&&& 注：省份字段名（北京, 天津, 上海, 重庆, 河北, 河南, 云南, 辽宁, 黑龙江, 湖南, 安徽, 山东, 新疆, 江苏, 浙江, 江西, 湖北, 广西, 甘肃, 山西, 内蒙古, 陕西, 吉林, 福建, 贵州, 广东, 青海, 西藏, 四川, 宁夏, 海南, 台湾, 香港, 澳门）
&&&&&&&&&&&&&&&&&&&&&&&&&&&& java后台代码：可以用一个list封装数据
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& List&DataAnlysPicDomain&& dataAnlysList =&regUserService.getDataAnlysList(参数);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&JSONArray.fromObject(dataAnlysList);
&&&&&&&&&&&&&&&&&&&&&&&&&&&& DataAnlysPicDomain.java
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& private S
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& private I
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& get set方法
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 在ajax请求直接
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& success:function(result){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& if(result){
&& &&& &&& &&& &&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& options.series[0].data =//赋值
&& &&& &&& &&& &&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& myChart.hideLoading(); &
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& myChart.setOption(options);
&& &&& &&& &&& & & & & & & & & & & & & & & & & & & & }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&
kukulongzai_123
排名：第17155名
（15）（9）（5）（8）（1）（7）（1）（3）（4）（1）（4）（7）}