echart tooltip.formatter用法,

有时候我们需要自己定义echart图表中的悬浮框的内容,所以就需要用到formmatter这个属性。我们先看下api中怎么说的。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
从这里我们可以了解到,formatter可以作为函数来使用
即:formatter:function(params,){
return “自己想要展示的数据和方式可以添加标签之类的”
}

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在 Vue3 中动态更新 Echarts tooltip 的方法如下: 1. 首先,在 Vue3 中,需要使用 ref 来引用一个变量,这个变量可以是基本数据类型或对象类型。我们需要在组件中创建一个 ref 变量来引用 Echarts 实例,然后将其传递给 Echarts 的 option 中。 2. 在 Echarts 的 option 中,我们需要设置 tooltip 的 trigger 为 'axis',并且在 tooltipformatter 函数中返回一个字符串模板。 3. 我们可以使用 watchEffect 监听 ref 变量的变化,在变量变化时,更新 Echarts 的 option,从而动态更新 tooltip。 代码示例: ``` <template> <div ref="chart" style="height: 400px;"></div> </template> <script> import * as echarts from 'echarts'; import { ref, watchEffect } from 'vue'; export default { setup() { const chartRef = ref(null); const chart = ref(null); // 创建 Echarts 实例 watchEffect(() => { if (!chartRef.value) return; chart.value = echarts.init(chartRef.value); // 设置 Echarts option chart.value.setOption({ tooltip: { trigger: 'axis', formatter: (params) => { return params.data.name + ': ' + params.data.value; }, }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', }], }); }); // 监听数据变化,动态更新 tooltip watchEffect(() => { if (!chart.value) return; const data = [820, 932, 901, 934, 1290, 1330, 1320]; chart.value.setOption({ series: [{ data, }], tooltip: { formatter: (params) => { return params.data.name + ': ' + params.data.value + '<br/>' + 'Total: ' + data.reduce((a, b) => a + b); }, }, }); }); return { chartRef, }; }, }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值