echarts中tooltip,echarts自定义tooltip显示内容
echarts中tooltip,echarts自定义tooltip显示内容详细介绍
本文目录一览： echarts自定义tooltip显示内容
echarts 中自定义 tooltip 的属性是 formatter ，它是一个方法，主要是讲一下怎么将自定义的值显示在 tooltip 中，因为自己刚开始用的时候，还是查了半天的。
当未定义的时候，数据如下：
tooltip 显示如下：
当 hover 最后一条数据的时候，输出如下：
此时再次 hover 的时候，显示就变为
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}
{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控制map的tooltip显示或隐藏
??功能需求：根据当前用户权限，控制地图只高亮显示某一个区域的信息，其他区域置为背景色并且鼠标事件不响应。
??首先尝试分级设置，先在option级tooltip设置不显示，然后在geo的regions高亮显示的每个项设置tooptip显示，结果显示Echarts并不像css那样支持优先级覆盖，或者说option级设置的权限最高。
??基于文档说明，能通过事件动态显示tooltip组件：
??1. 禁止echarts的默认事件触发
??2. 自定义事件响应 。mouseover触发 show ，在这加入相应的条件判断就能实现动态响应了，单要注意的是，需要根据情况选择特定的方式，这里我用的是方式二，因为我地图是基于series-map进行的创建虽然在series当中设置了geoIndex，但测试后发现之后方式二才能正常响应；mouseout触发 hide
echarts tooltip自动轮播 高亮显示
柱状图tooltip自动轮播
let myRank= this.$echarts.init(this.$refs.rank);
let option={
legend: {
data: [{
name: '销售总量',
icon: 'circle'
? ? }],
textStyle: {
color: '#fff',
fontSize: 14,
fontFamily: 'PingFangSC',
fontWeight: 300
? ? }
},
tooltip: {
show:true,
trigger: 'axis',
axisPointer: {// 坐标轴指示器，坐标轴触发有效
? ? ? type: 'shadow'? ? ? ? // 默认为直线，可选为：'line' | 'shadow'
? ? }
},
grid: [
{
height: 240,
top: 45,
left:100,
width: 420,
},
{
height: 240,
width: 420,
top: 45,
left:100,
}
],
xAxis: {
name: "（万元）",
nameTextStyle: {
color: '#fff',
fontSize: 16
? ? },
axisLine: {
lineStyle: {
color: '#0177d4'
? ? ? }
},
axisLabel: {
color: '#fff',
fontSize: 16
? ? },
splitLine: {
show:false,
lineStyle: {
color: '#0177d4'
? ? ? }
},
interval:30,
max:120
? },
yAxis: {
data: ['民族','少儿','科技','美术','教育','万卷','人民','春风'],
axisLine: {
lineStyle: {
color: '#0177d4'
? ? ? }
},
axisLabel: {
color: '#fff',
fontSize: 14
? ? }
},
series: [{
name: '销售总量',
type: 'bar',
barWidth: 18,
itemStyle:{
normal:{
color:new this.$echarts.graphic.LinearGradient(0,0,0,1, [{
offset: 0,
color: '#00b0ff'
? ? ? ? }, {
offset: 0.8,
color: '#7052f4'
? ? ? ? }],false)
}
},
data: [1.0,1.63,1.66,1.86,10.80,12.69,30.34,118.0]
}]
}
var faultByHourIndex= 0;//播放所在下标
var faultByHourTime= setInterval(function() {//使得tootip每隔三秒自动显示
? myRank.dispatchAction({
type: 'showTip',// 根据 tooltip 的配置项显示提示框。
? ? seriesIndex: 0,
dataIndex: faultByHourIndex
});
faultByHourIndex++;
// faultRateOption.series[0].data.length 是已报名纵坐标数据的长度
? if (faultByHourIndex>= option.series[0].data.length) {
faultByHourIndex= 0;
}
},3000 );
myRank.setOption(option)
饼状图高亮
var count= 0;
app.timeTicket= setInterval(function () {
myPeople.dispatchAction({
type: 'downplay',
seriesIndex: 0
? });
myPeople.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: (count++)% 10
? });
},1000);
echarts的tooltip展示自定义值
echarts经常需要展示自定义的数据，如下图所示，本来坐标数据是日期和百分比，但是要求折线图的tooltip却要展示具体数据，展示结果如下
解决方法
1.组件引用
2.数据拼凑
3.改写组件
这一步中通过获取传入得key值即可，
echarts X轴数据太多间隔显示，tooltip能不能全部显示
echartsX轴数据太间隔显示tooltip让全部显示：1、要使用默认tooltip应写label记录值2、控制display：block/none试3、用公静态变量存储着值4、触发显示事件tooltip值清空5、鼠标移listview静态变量赋值给tooltip.
echarts tooltip提示框大小怎么设置
先把ds.Tables[0].Rows[0][j].ToString()中的值赋给一个字符串，然后在让它在tooltip中显示就OK了！
如：string str="";
for(int j=0;j
<ds.tables[0].columns.count;j++)
{
str=ds.Tables[0].Rows[0][j].ToString();
}
this.toolTip1.SetToolTip(this.label1,str);
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 += '
';
} else {
res += '
' + params[i].seriesName + ' : ' + params[i].value;
}
}
setTimeout(function() {
// 仅为了模拟异步回调
callback(ticket, res);
}, 1000)
return 'loading';
}
echarts tooltip 自定义formatter怎么设置颜色
官方文档里面好像没有这个API
默认的tooltip不是canvas而是div;
所以直接在formatter里面添加span设置好颜色就可以了
tooltip: {
trigger: 'axis',
formatter: '
}
关于echarts的tooltip动态显示数据的问题
用回调函数，params.dataIndex可以获取到数据的index，比如数据是：
data1 = [10, 52, 200, 334, 390, 330, 220];
那前一个柱子的数据是data1[params.dataIndex - 1]
简单实例见网页链接
关键代码是