echarts tooltip

rom1c丶 发布于 2014/07/21 15:24
阅读 2K+
收藏 0

@Kener-林峰 你好,我想问下面的效果怎么实现:

iphone3 : 
北京:390, 天津:17, 上海:324, 重庆:79, 河北:149, 河南:209, 云南:842, 辽宁:692, 黑龙江:540, 湖南:442, 安徽:629, 山东:492, 新疆:620, 江苏:587, 浙江:786, 江西:303, 湖北:575, 广西:955, 甘肃:601, 山西:494, 内蒙古:60, 陕西:492, 吉林:528, 福建:528, 贵州:260, 广东:450, 青海:510, 西藏:601, 四川:129, 宁夏:17, 海南:895, 台湾:764, 香港:56, 澳门:909

这个地图tooltip好单调,我想鼠标放在北京展示的效果如下:

北京:390,达成计划70%;

鼠标放在地图的区域的时候展示2个数据(390,70%),怎么实现?echarts的图形能在ipad 商展示吗?

加载中
0
Kener-林峰
Kener-林峰

formatter为function为所欲为

本月内发布一个平板设备上的bug fix。以前就支持,2.0引入了bug把平板设备的事件弄挂了。

0
rom1c丶
rom1c丶

引用来自“Kener-林峰”的评论

formatter为function为所欲为

本月内发布一个平板设备上的bug fix。以前就支持,2.0引入了bug把平板设备的事件弄挂了。

谢谢,我做出来了。 还有有很多示例作参考。

我有一个疑问@Kener-林峰 ,地图的点击时间都是引入了:

var ecConfig = require('echarts/config');

可是我是单文件引入我该如何处理呢。直接引入config.js吗?

很多时候我都是要先用标准初始化,然后再改为单文件。我觉得这样好复杂,我就想简单粗暴能用最简单的实现弄出我的效果,代码怎么少这么写。我看官网全是标准初始化,非标很多细节都需要我去自己试验。希望作者开发一个类型的图形时候也附带一个关于单文件直接引入的示例。


0
rom1c丶
rom1c丶
$(function(){
	 $.ajax({
			type:"post",
			async:false,
			url:"${ctx}/tomap!getEchatsFitstData.do",
			dataType:"json",
			success:function(result)
			{
				   var json=$.parseJSON(result);
				   var toolTipJson=$.parseJSON(result);
				   var toolTipText=toolTipJson.toolTipText;
				   var myChart = echarts.init(document.getElementById('mainMap'));			  
					myChart.showLoading({
						text: '正在努力的读取数据中...',    //loading话术
					});
					option = {
						    title : {
						        text: ' ',
						        x:'center'
						    },
						    tooltip : {
						        trigger: 'item',
								formatter:function(params,ticket,callback){
									for ( var i = 0; i < toolTipText.length; i++) {
										if(toolTipText[i].name == params[1]){
											params[3]=toolTipText[i].completionValue;
											break;
											//return params[1]+":达成值:"+toolTipText[i].completionValue+";达成率:"+toolTipText[i].completionRate;
										}
									}
									return params[1]+":达成保费:"+toolTipText[i].completionValue+";达成率:"+toolTipText[i].completionRate+"%";
								}
						    },
						    legend: {
						        orient: 'vertical',
						        x:'left',
						        data:['iphone3']
						    },
						    dataRange: {
						        min: 0,
						        max: 100,
						        x: 'left',
						        y: 'bottom',
						        text:['高','低'],           // 文本,默认为数值文本
						        calculable : true
						    },
						    toolbox: {
						        show : true,
						        orient : 'vertical',
						        x: 'right',
						        y: 'center',
						        feature : {
						            mark : {show: true},
						            dataView : {show: true, readOnly: false},
						            restore : {show: true},
						            saveAsImage : {show: true}
						        }
						    },
						    series : [
						        {
						            name: 'iphone3',
						            type: 'map',
						            mapType: 'china',
						            roam: false,
						            selectedMode : 'single',
						            itemStyle:{
						                normal:{label:{show:true}},
						                emphasis:{label:{show:true}}
						            },
						            data:json.dataValue
						        }
						    ]
						};
					myChart.setOption(option);
					
					myChart.hideLoading();
						     	
			},
			error:function(data)
			{
				
			}
	    });	
 	})


把我做的一点toolTip共享,大家以后有的话也可以瞅瞅。



返回顶部
顶部