项目中有需求，需重新定义echarts的提示tooltips,里面有个formatter属性，可重新定义提示内容

最新推荐文章于 2024-10-29 16:16:42 发布

weixin_46156770

最新推荐文章于 2024-10-29 16:16:42 发布

阅读量349

点赞数

分类专栏： vue JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_46156770/article/details/117411907

版权

vue 同时被 2 个专栏收录

41 篇文章

订阅专栏

JavaScript

18 篇文章

订阅专栏

在项目中遇到Echarts的tooltips提示需求，通过设置formatter属性能实现自定义提示内容。然而，在使用Vue时，需要注意在formatter内部绑定this上下文，通常需要使用`_this = this`来确保能访问到Vue实例。尽管如此，仍可能出现无法预期的问题，目前原因不明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
   <div class="echarts">
        <div id="mychart" style="width: 100%; height: 420px;"></div>
      </div>
</template>

<script>
  methods:{
   //初始化echart
      initChart() {
        let _this = this
        let chart = this.$echarts.init(document.getElementById('mychart'));
        chart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              let name = params.name
              let radarList = _this.radarData
              for (let i = 0; i < params.data.value.length; i++) {
                name += '<br/>' + radarList[i]['name'] + ' : ' + '最大值' + radarList[i]['max'] + '，当前值'
                  + params.data.value[i];
              }
              return name;
            }
          },
          grid: {
            left: '1%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          radar: {
            name: {
              textStyle: {
                color: '#fff',
                borderRadius: 3,
              }
            },
            indicator: this.radarData,
          },
          series: [{
            name: this.radarName,
            type: 'radar',
            areaStyle: {
              color: "#5fb89f",
            },
            data: [
              {
                value: this.valueData,
                name: this.radarName
              },
            ]
          }]
        })
      },
}
</script>

在这里插入图片描述
里面的formatter属性可以拿到值后重新定义，this.radarData中的this不能取到vue实例，需_this = this
才可以取到值，虽然获取到了值，但是不知道什么原因