Echarts 设置触发器=项的工具提示中的轴值格式
我有一个折线图,在x轴上绘制月份,在y轴上绘制每个月的值。 看起来像这样 我的选项配置是Echarts 设置触发器=项的工具提示中的轴值格式,echarts,Echarts,我有一个折线图,在x轴上绘制月份,在y轴上绘制每个月的值。 看起来像这样 我的选项配置是 option = { title: { text: 'Title', }, tooltip: { trigger: 'item', axisPointer: { label: { formatter: 'format1', }, }, }, legend: {}, xAxis: { axisPointe
option = {
title: {
text: 'Title',
},
tooltip: {
trigger: 'item',
axisPointer: {
label: {
formatter: 'format1',
},
},
},
legend: {},
xAxis: {
axisPointer: {
label: {
formatter: 'format2',
},
},
axisLabel: {
formatter: 'format3',
},
type: 'category',
splitLine: {
show: true,
},
axisLine: {
show: true,
},
},
yAxis: [
{
position: 'right',
type: 'value',
splitLine: {
show: true,
},
axisLine: {
show: true,
},
},
],
dataset: {
source: [
{
month: 1420070400000,
value1: 5,
value2: 0,
value3: 3,
value4: 4,
},
{
month: 1422748800000,
value1: 10,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1425168000000,
value1: 11,
value2: 0,
value3: 3,
value4: 4,
},
{
month: 1427846400000,
value1: 15,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1430438400000,
value1: 20,
value2: 0,
value3: 3,
value4: 4,
},
{
month: 1433116800000,
value1: 5,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1435708800000,
value1: 10,
value2: 0,
value3: 3,
value4: 4,
},
{
month: 1438387200000,
value1: 15,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1441065600000,
value1: 20,
value2: 0,
value3: 3,
value4: 4,
},
{
month: 1443657600000,
value1: 0,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1446336000000,
value1: 10,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1448928000000,
value1: 2,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1451606400000,
value1: 2,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1454284800000,
value1: 2,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1456790400000,
value1: 2,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1459468800000,
value1: 2,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1462060800000,
value1: 12,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1464739200000,
value1: 22,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1467331200000,
value1: 2,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1470009600000,
value1: 12,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1472688000000,
value1: 2,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1475280000000,
value1: 2,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1477958400000,
value1: 22,
value2: 1,
value3: 3,
value4: 4,
},
{
month: 1480550400000,
value1: 2,
value2: 1,
value3: 3,
value4: 4,
},
],
dimensions: ['month', 'value1', 'value2', 'value3', 'value4'],
},
series: [
{
type: 'line',
tooltip: {
formatter: 'format4',
},
},
{
type: 'line',
tooltip: {
formatter: 'format4',
},
},
{
type: 'line',
tooltip: {
formatter: 'format4',
},
},
{
type: 'line',
tooltip: {
formatter: 'format4',
},
},
],
};
我正在使用trigger:'item'
作为工具提示,我的工具提示与屏幕截图中的工具提示类似。
我需要将工具提示中的月份值格式化为MMM-YYYY
格式,我将使用以下格式化程序函数
function formatter(params) {
console.log(params);
return dayjs(params.value.month).format('MMM, YYYY');
}
如果我在系列[index].tooltip.formatter
中指定格式化程序,它将用格式化程序返回的值替换整个工具提示,而不仅仅是月份值
如何在工具提示中格式化月份值,使工具提示的其他内容保持默认状态
实时演示链接:Echart允许您修改工具提示中的所有字段,而不仅仅是一个字段。因此,您需要在使用工具提示格式化程序时生成所有剩余字段。所有必需的详细信息将显示在参数中。您可以使用下面的格式化程序
function formatter(params) {
console.log(params);
return `${params.seriesName}<br>${params.marker} ${dayjs(params.value.month).format('MMM, YYYY')`enter code here`}: ${params.value[params.seriesName]}`;
}
函数格式化程序(params){
控制台日志(params);
返回`${params.seriesName}
${params.marker}${dayjs(params.value.month.format('MMM,yyyyy')`在此处输入代码`:${params.value[params.seriesName]};
}