echartstooltip,echartstooltip参数
echarts自定义tooltip显示内容
echarts 中自定义 tooltip 的属性是 formatter ，它是一个方法，主要是讲一下怎么将自定义的值显示在 tooltip 中，因为自己刚开始用的时候，还是查了半天的。
当未定义的时候，数据如下：
tooltip 显示如下：
当 hover 最后一条数据的时候，输出如下：
此时再次 hover 的时候，显示就变为
Echarts控制map的tooltip显示或隐藏
??功能需求：根据当前用户权限，控制地图只高亮显示某一个区域的信息，其他区域置为背景色并且鼠标事件不响应。
??首先尝试分级设置，先在option级tooltip设置不显示，然后在geo的regions高亮显示的每个项设置tooptip显示，结果显示Echarts并不像css那样支持优先级覆盖，或者说option级设置的权限最高。
??基于文档说明，能通过事件动态显示tooltip组件：
??1. 禁止echarts的默认事件触发
??2. 自定义事件响应 。mouseover触发 show ，在这加入相应的条件判断就能实现动态响应了，单要注意的是，需要根据情况选择特定的方式，这里我用的是方式二，因为我地图是基于series-map进行的创建虽然在series当中设置了geoIndex，但测试后发现之后方式二才能正常响应；mouseout触发 hide
echarts------tooltip formatter使用方法
tooltip formatter 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
1. 字符串模板
模板变量有?{a},?{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在? trigger ?为?'axis'?的时候，会有多个系列的数据，此时可以通过?{a0},?{a1},?{a2}?这种后面加索引的方式表示系列的索引。 不同图表类型下的?{a}，{b}，{c}，{d}?含义不一样。 其中变量{a},?{b},?{c},?{d}在不同图表类型下代表数据含义为：
折线（区域）图、柱状（条形）图、K线图 :?{a}（系列名称），{b}（类目值），{c}（数值）,?{d}（无）
散点图（气泡）图 :?{a}（系列名称），{b}（数据名称），{c}（数值数组）,?{d}（无）
地图 :?{a}（系列名称），{b}（区域名称），{c}（合并数值）,?{d}（无）
饼图、仪表盘、漏斗图:?{a}（系列名称），{b}（数据项名称），{c}（数值）,?{d}（百分比）
formatter:'{b0}: {c0}br /{b1}: {c1}'
2. 回调函数
回调函数格式：
(params:Object|Array,ticket: string,callback:(ticket: string, html: string)) =string | HTMLElement | HTMLElement[]
支持返回 HTML 字符串或者创建的 DOM 实例。
第一个参数?params?是 formatter 需要的数据集。格式如下：
{
componentType:'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data:Object,
// 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
value: number|Array|Object,
// 坐标轴 encode 映射信息，
// key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
// value 必然为数组，不会为 null/undefied，表示 dimension index 。
// 其内容如：
// {
//? ? x: [2] // dimension index 为 2 的数据映射到 x 轴
//? ? y: [0]
?// dimension index 为 0 的数据映射到 y 轴
// }
encode:Object,
// 维度名列表
dimensionNames:Array,
// 数据的维度
?index，如 0 或 1 或 2 ...
// 仅在雷达图中使用。
dimensionIndex: number,
// 数据图形的颜色
color: string,
// 饼图的百分比
percent: number,
}
详情见 (echarts------tool--formatter)
echarts的tooltip展示自定义值
echarts经常需要展示自定义的数据，如下图所示，本来坐标数据是日期和百分比，但是要求折线图的tooltip却要展示具体数据，展示结果如下
解决方法
1.组件引用
2.数据拼凑
3.改写组件
这一步中通过获取传入得key值即可，
echarts tooltip 自定义formatter怎么设置颜色
项目上用了Echarts图表库，但是提示框里的文字想要有高亮显示 （如图 红色字体），查了查官方文档结合实例，终于找到了解决办法。
使用tooltip的formatter内容格式器，可以通过定义函数的方式解决。
formatter: function(params, ticket, callback) {
console.log(params)
var res = '' + params[0].name;
for (var i = 0, l = params.length; i l; i++) {
if(i == 2) {
res += 'br/span style="color:red;"' + params[i].seriesName + ' : ' + params[i].value + '/span';
} else {
res += 'br/' + params[i].seriesName + ' : ' + params[i].value;
}
}
setTimeout(function() {
// 仅为了模拟异步回调
callback(ticket, res);
}, 1000)
return 'loading';
}
echarts X轴数据太多间隔显示，tooltip能不能全部显示
echarts X轴数据太多间隔显示，tooltip让全部显示的方法：
1、不要使用默认的tooltip了，可以对应写一个label记录值，
2、然后控制它的display：block/none 可以试一下，
3、用一个公有的静态变量存储着这个值，
4、然后触发不显示事件时，把tooltip的值清空。
5、最后鼠标移动到listview时，把这个静态变量赋值给这个tooltip.就可以了。