用易懂的方式教我设置Echart中的自定义tooltip。最后再给我一段tooltip格式为:图例颜色+数据名+数据单位+数据的代码给出测试图
时间: 2024-02-27 22:51:28 浏览: 229
Echarts的toolbox自定义按钮
5星 · 资源好评率100%
好的,首先你需要了解什么是 Echarts 的 tooltip。tooltip 是 Echarts 中的一个组件,用于展示数据的详细信息。默认情况下,它会在鼠标悬停在图表上时自动弹出。
接着,我们来看一下如何设置自定义 tooltip。在 Echarts 中,你可以设置 tooltip 的 formatter 属性,用于自定义 tooltip 的内容。formatter 是一个回调函数,它会接收到一个参数,参数包含了 tooltip 中的所有信息,比如数据、图例、坐标等。
下面是一个例子,展示如何设置自定义 tooltip:
```javascript
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params) {
var res = '<div>' + params[0].name + '</div>'; // x 轴名称
for (var i = 0, l = params.length; i < l; i++) {
var color = params[i].color; // 图例颜色
var name = params[i].seriesName; // 数据名
var value = params[i].value; // 数据值
var unit = params[i].series.unit || ''; // 数据单位
res += '<div style="color:' + color + '">' + name + ': ' + value + unit + '</div>';
}
return res;
}
},
```
在这个例子中,我们设置了一个 trigger 为 'axis' 的 tooltip,并且通过 formatter 函数来自定义 tooltip 的内容。在 formatter 函数中,我们首先将 x 轴的名称加入到 tooltip 中,然后遍历所有的数据,取出图例颜色、数据名、数据值和数据单位,并将它们拼接成一个字符串,最后返回这个字符串作为 tooltip 的内容。
最后,我们来给出一段测试代码,测试图的 tooltip 格式为:图例颜色+数据名+数据单位+数据。
```javascript
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
var res = '<div>' + params[0].name + '</div>';
for (var i = 0, l = params.length; i < l; i++) {
var color = params[i].color;
var name = params[i].seriesName;
var value = params[i].value;
var unit = params[i].series.unit || '';
res += '<div style="color:' + color + '">' + name + ': ' + value + unit + '</div>';
}
return res;
}
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
xAxis: {
type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 次'
}
},
series: [
{
name:'邮件营销',
type:'bar',
data:[120, 132, 101, 134, 90, 230, 210],
unit: '次'
},
{
name:'联盟广告',
type:'bar',
stack: '广告',
data:[220, 182, 191, 234, 290, 330, 310],
unit: '次'
},
{
name:'视频广告',
type:'bar',
stack: '广告',
data:[150, 232, 201, 154, 190, 330, 410],
unit: '次'
},
{
name:'直接访问',
type:'bar',
data:[320, 332, 301, 334, 390, 330, 320],
unit: '次'
},
{
name:'搜索引擎',
type:'bar',
data:[820, 932, 901, 934, 1290, 1330, 1320],
unit: '次'
}
]
};
```
希望这些能够帮助你设置 Echarts 中的自定义 tooltip。
阅读全文