本章主题提示框（Tooltip）是一种最常用的可视化组件，可以帮助用户交互式地了解数据的详细信息。 郭宝坤惯例： 上来先看个demo
<template>
<div id="chart"></div>
</template>
<script>
import * as echarts from 'echarts'
let myChart = null,
tooltip = {
//刚开始什么都不写
},
xAxis= {
type: 'category',
data: ['司理理', '林婉儿']
},
series = [
{ name: '魅力值', type: 'bar', data: [99, 95] },
{ name: '武力值', type: 'bar', data: [70, 20] }
];
const options = {
tooltip,
xAxis,
yAxis: {},
series
};
~function init() {
myChart = echarts.init(document.getElementById('chart')); //实际情况这里需要等dom加载完了
myChart.setOption(options)
}()
</script>
效果图：
我们可以明显的看出司理理姑娘比较优秀...
触发方式 ( item / axis / none )
上面tooltip 只展示了其中一项（魅力值）， 因为tooltip 默认触发方式是 'item' 其实它有三种值可选，让我们看下其它两种
// item: 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
// axis: 坐标轴触发，主要在柱状图，折线图等会使用 '类目轴' 的图表中使用。
// none: 什么都不触发， 这个跟show: false 有什么区别 ？？ （知道的小伙伴留个言）
tooltip = {
trigger: 'axis',
};
可以看到 axis 显示了司理理的 "所有" 特性值
这里解释下类目轴与非类目轴：类目轴就是横坐标标签类型为类目（type: 'category'）的坐标轴 非类目轴 常见有 时间（time），数值（value），对数（log）3种
比如上面我们 x轴 的 司理理 和 林婉儿 就是类目轴 那些比如2018~2021 就是非类目轴
优化样式
接下来我们看下如何修改tootip 外观样式
tooltip = {
...
backgroundColor: 'rgba(50,50,50,0.7)', //背景色
textStyle: {
color: '#fff', //文字颜色
align:'left', //左对齐
//overflow: 'truncate' 超出时显示... （需要设置width）
}
}
效果图：
排序
tooltip = {
...
order: 'valueAsc' //根据数据值, 升序排列。
}
效果图：
可以看到比较小的武力值排在了上面， 默认是根据系列顺序排的
extraCssText
官方翻译为：额外附加到浮层的 css 样式。 这个不起眼的属性可以设置很多东西！！
tooltip = {
...
extraCssText: 'width: 130px; height: 150px;'
}
效果图：
注意： 这个属性优先级高于本体样式
tooltip = {
...
extraCssText: ' border-color: blue;',
borderColor: 'red',
},
这样渲染出来的边框色是蓝色的， 跟写的顺序无关。
formatter
有时候可能会需要对后面数值加个特殊符号， 比如冒号、括号、连接线之类的，这时候需要用到formatter
tooltip = {
...
formatter: '{a0} ({c0})<br />{a1}: {c1}',
}
上面的a0 c0... 叫做模板变量，echarts提供的模板变量有 {a}, {b}，{c}，{d}
不同图表类型下的 {a}，{b}，{c}，{d} 含义可能不一样， 大概意思如下
- a: 系列名称
- b: 数据名称
- c: 数值
- d: 百分比 （饼图经常用到） 而上面的a0 c0 代表的是下标0， 它与series的下标相对应， 如写成a1在前 a0在后， 那么tootip显示就是武力值在上， 魅力值在下， 这个根据需要可以用来排序
最后的轻语
` 飞上枝头的都风趣， 占了巢的都在窃喜 `
