echarts图表tooltip设置hover效果

ppylox
·11/23/2021·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

ECharts中通过tooltip配置实现柱状图hover显示数值。formatter参数params在单图表时为对象,多图表(柱状图+折线图)时为数组,可用params[0].value取值。配置trigger:"axis"和axisPointer控制hover效果,示例包含背景色、文字样式、shadow指示器及自定义formatter返回HTML内容。

正常情况下添加柱状图后,需要hover的时候显示每个柱子的值,可以通过在tooltip下面的formatter方法实现,formatter的参数params为某个柱状图的数组,如果同时存在柱状图和折线图,那么此时params是一个数组,第0个和第1个分别代表X轴对应某点的值数组。如果要取值就可以直接使用params[0].value。

 

如果不加tooltip,那么就无法在hover每个柱子的时候看到每个柱子的值,只能通过坐标轴大致判断是多少,加了tooltip后能在hover某根柱子的情况下看到具体的值,可以通过trigger:\n"axis" 以及 axisPointer 来配置hover时tooltip的效果。

 

比如以下是一个完整的tooltip配置:

 

// 提示框\n\n        tooltip: {\n\n          show: true,\n\n          trigger: "axis",\n\n          backgroundColor: "rgba(0,0,0,0.75)",\n\n          borderColor: "rgba(0,0,0,0.75)",\n\n          textStyle: {\n\n            color: "#ffffff",\n\n          },\n\n          axisPointer: {\n\n            type: "shadow",\n\n            shadowStyle: {\n\n              color: "rgba(0,0,0,0.08)",\n\n            },\n\n          },\n\n          padding: 10,\n\n          formatter: (params) => {\n\n            return `<div style="text-align: left">\n\n            <div>名称:${params[0].value?params[0].value:'--'}</div>\n\n            <div>年龄:${params[1].value?params[1].value + '%': '--'}</div>\n\n            </div>`;\n\n          },\n\n        },

相关文章

评论 (0)

暂无评论,来写第一条吧