首页 前端知识 echarts中针对不同数据点单独设置tooltip提示框不生效具体解决办法

echarts中针对不同数据点单独设置tooltip提示框不生效具体解决办法

2024-02-20 10:02:39 前端知识 前端哥 892 411 我要收藏

1.问题描述

项目开发过程中,echarts图中series内有不同类型的数据,想对不同类型数据单独设置tooltip,发现提示框不生效。

2.原因说明

  • 原因1:单独设置不生效可能在主体部分没有先给出tooltip的设置,若下图中的位置没有先设定好tooltip,单独设置tooltip的时候也无法生效。
    在这里插入图片描述

  • 原因2:一般单独设置tooltip都是在series中对每个type的数据进行设置,但是设置过程中tooltip中需要注意trigger必须为’item’,否则不生效,官方文档有说明如下:
    在这里插入图片描述
    series外的主体部分设置tooltip.show为false是因为主体的样式可能会影响后续单独样式的设置,因此我设置为false,后续series内的tooltip需要设置为serier.tooltip.show为true。
    在这里插入图片描述

3.完整代码案例实现

<template>
    <div>
      <div ref="chart" id="lineChart" style="height: 400px; width: 800px"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'; // 引入echarts, * as echarts 表示引入所有的方法
  
  
  export default {
    data() {
      return {
        chart: null,
        dialogVisible: false,
        tipTitle: null
      }
    },
    mounted() {
      this.init()
  
    },
    methods: {
      init() {
        this.chart = echarts.init(this.$refs.chart);
  
        // 绘制图表
        const option = {
          tooltip: { // 在主体中定义 tooltip
            show: false, // 不显示tooltip
            trigger: 'none', // 去除默认的 'axis' 触发方式
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: 'scatter',
            type: 'scatter',
            tooltip: {
              show: true,  //此处由于前面定义了全局的tooltip,所以这里必须设置为true才能生效
              trigger: 'item', // 单独设置样式时必须为item才能生效
              backgroundColor: 'rgba(110, 112, 121, 0.9)', //对该系列数据单独设置tooltip背景颜色
              formatter: (params) => {
                console.log('params-->>',params);
                return  params.seriesName + '<br/>' + params.data[0] + ' : ' + params.data[1];
              },
              textStyle: {
                color: '#fff'
              }
            },
            data: [
              [0, 1],
              [1, 5],
              [2, 3],
              [3, 4],
              [4, 2],
              [5, 8],
              [6, 6]
            ]
          }, {
            name: 'line',
            type: 'line',
            tooltip: {
              show: true,
              trigger: 'item', 
            },
            data: [1, 3, 2, 5, 4, 6, 8]
          }]
        };
        this.chart.setOption(option);
      },
  
    }
  }
  </script>
  
  
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2356.html
标签
评论
发布的文章

AJAX(二)jQuery

2024-03-05 09:03:04

jQuery操作DOM(3)

2024-03-05 09:03:36

jQuery - 获取内容和属性

2024-03-05 09:03:34

深拷贝浅拷贝方法总结

2024-03-05 09:03:27

JQuery简介与解析

2024-03-01 12:03:31

Java Web(十)--jQuery

2024-03-05 09:03:24

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!