echarts showTip持续显示

素颜马尾好姑娘i 2024-02-29 06:31 31阅读 0赞

学习自

> [https://github.com/apache/echarts/issues/9242][https_github.com_apache_echarts_issues_9242]

tooltip设置`alwaysShowContent`，悬浮上去后会一直显示

tooltip: {
        
       trigger: 'axis',
       alwaysShowContent: true,
    },

`seriesIndex`表示是`series`的第几个，`dataIndex`是`data`属性的索引  
我这里的需求是固定显示最后一个数据的tooltip，给外层div绑定一个`mouseleave`，鼠标移开后调用`dispatchAction`触发tooltip

<div
          class="echarts-div"
          @mouseleave="dispatchAction">
          <Echarts
            class="real-echart"
            :option="option"
            autoresize
            ref="chart"></Echarts>
        </div>

watch: {
        
        option: {
        
          handler() {
        
            this.$nextTick(() => {
        
                this.$refs.chart.dispatchAction({
        
                  type: 'showTip',
                  seriesIndex: 0,
                  dataIndex:
                    Math.max(
                      ...this.option.series.map((item) => item.data.length)
                    ) - 1,
                });
            });
          },
          deep: true,
        },
      },
      methods: {
        
        dispatchAction() {
        
          this.$refs.chart.dispatchAction({
        
            type: 'showTip',
            seriesIndex: 0,
            dataIndex:
              Math.max(...this.option.series.map((item) => item.data.length)) - 1,
          });
        },
      },

[https_github.com_apache_echarts_issues_9242]: https://github.com/apache/echarts/issues/9242

发表评论取消回复

表情：

评论列表（有 0 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读

相关【Echarts】一文快速上手Echarts（持续更新）

> 目录 > > 一、引入Echarts > > 二、选择一个Echarts图 > > 1、引入部分 > > 2、属性部分 > > 3、方法部分 > > 三、常见参

女爷i/ 2024年04月01日 12:05/ 0 赞/ 97 阅读

相关【Echarts】常见问题总结（持续更新）

> 目录 > > 一、Echarts图X轴文字显示不全 > > 1、问题 > > 2、解決 > > 3、其他原因 > > 二、ECharts图与title重合 >

清疚/ 2024年03月31日 12:18/ 0 赞/ 127 阅读

相关 echarts showTip持续显示

学习自 > [https://github.com/apache/echarts/issues/9242][https_github.com_apache_echarts_i

素颜马尾好姑娘i/ 2024年02月29日 06:31/ 0 赞/ 32 阅读

相关 echarts tooltip 数值后显示 %

需求：要求 echarts 在鼠标 hover 时可以看到数据后面显示百分号（数据已是后台处理过的）。效果图： ![1733986-20190802150340710-9

绝地灬酷狼/ 2023年06月02日 09:28/ 0 赞/ 22 阅读

相关 ECharts 图表显示颜色修改

ECharts 图表显示颜色修改需求：改变Echarts引入图表的显示颜色解决方案：通过查询Echarts配置手册，color设置色板颜色列表。

小咪咪/ 2023年02月23日 05:07/ 0 赞/ 25 阅读

相关 echarts动态数据不显示

先加载数据，最后在渲染绘制 ![image.png][] 参考： [https://segmentfault.com/q/1010000039039923][ht

柔光的暖阳◎/ 2023年01月09日 03:39/ 0 赞/ 134 阅读

相关 echarts饼图显示比例

var option1 = { title: { text: '性别占比',

阳光穿透心脏的1/2处/ 2022年12月25日 15:52/ 0 赞/ 316 阅读

相关 echarts隐藏之后再显示

设置隐藏后，再显示重新设置一下图表的宽度以及高度。 var bor = document.getElementById("container"); b

ゞ浴缸里的玫瑰/ 2022年12月24日 02:59/ 0 赞/ 148 阅读

相关 echarts常见问题记录（持续更新）

echarts一些问题记录 resize实时改变图表尺寸 formatter解析html标签图表布局位置调

川长思鸟来/ 2022年10月28日 03:50/ 0 赞/ 420 阅读

相关 ECharts图表显示数字

ECharts图表显示数字效果图代码效果图 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow

迈不过友情╰/ 2022年09月15日 06:07/ 0 赞/ 250 阅读