首页 > 其他分享 >e-chart实现上下图标使用一个tooltip移入事件

e-chart实现上下图标使用一个tooltip移入事件

时间:2024-03-27 11:00:28浏览次数:28  
标签:axisPointer false show splitLine chart tooltip type 图标

有的需求需要一次移入事件展示多个图标的tooltip方便用户查看,效果如下

链接如下 : e-chart
主要配置是

 tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },

完整option代码

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },
  title: [],
  grid: [
    {
      top: 50,
      width: '100%',
      bottom: '45%',
      left: 10,
      containLabel: true
    },
    {
      top: '55%',
      width: '100%',
      bottom: 0,
      left: 10,
      containLabel: true
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false
      }
    },
    {
      type: 'value',
      gridIndex: 1,
      splitLine: {
        show: false
      }
    }
  ],
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel: {
        interval: 0,
        rotate: 30
      },
      splitLine: {
        show: false
      }
    },
    {
      gridIndex: 1,
      type: 'category',
      data: ['Mon1', 'Tue1', 'Wed1', 'Thu1', 'Fri1', 'Sat1', 'Sun1'],
      axisLabel: {
        interval: 0,
        rotate: 30
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      type: 'bar',
      stack: 'chart',
      z: 3,
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    },
    {
      type: 'bar',
      stack: 'component',
      xAxisIndex: 1,
      yAxisIndex: 1,
      z: 3,
      data: [80, 92, 91, 34, 120, 130, 130]
    }
  ]
};

 

 

 

标签:axisPointer,false,show,splitLine,chart,tooltip,type,图标
From: https://www.cnblogs.com/fanjlqinl/p/18098465

相关文章

  • vue3,实现如何在element plus Collapse折叠面板中,只有在点击图标时才展开
        这个的类名是tailwindcss的,主要看这里,对应上面的图片<el-collapse-itemname="1"class="relative"><template#title><divclass="w-full"><div@click="handleChangeURL"......
  • 使用 React 和 ECharts 创建地球模拟扩散和飞线效果
    在本博客中,我们将学习如何使用React和ECharts创建一个酷炫的地球模拟扩散效果。我们将使用ECharts作为可视化库,以及React来构建我们的应用。地球贴图在文章的结尾。最终效果准备工作首先,确保你已经安装了React,并创建了一个新的React应用。如果你还没有安装R......
  • chrome扩展通过点击图标控制侧边栏的显示和隐藏
    manifest.json:{"manifest_version":3,"name":"ChatGPT学习","version":"0.0.6","description":"欢迎加入我们一起学习ChatGPT","icons":{"16":"./src/image......
  • react 中echarts-for-react使用resize解决图表自适应问题
     importReact,{PureComponent}from"react";importReactEchartsfrom'echarts-for-react';import{useEventListener}from'ahooks';useEventListener('resize',()=>{ref?.current?.getEch......
  • win11资源管理器卡死(任务栏应用图标朦胧/系统时间不更新/应用图标点击无响应)
    目录传送门前言一、临时快速解决办法二、永久解决三、其他解决推荐传送门SpringMVC的源码解析(精品)Spring6的源码解析(精品)SpringBoot3框架(精品)MyBatis框架(精品)MyBatis-PlusSpringDataJPASpringCloudNetflixSpringCloudAlibaba(精品)ShiroSpringSecurityjava的......
  • 微信小程序使用echarts(三)
    一、新问题在根据前两个步骤完成小程序图表的显示之后,发现echarts过大,导致小程序超过2m二、解决过程1、根据官网上的提示进行图表定制,同时注意官网上的echarts.js版本和定制版本需要一致,以防出现版本原因导致的其他问题2、在定制完成,并且将定制的echarts.min.js替换掉原来的ec......
  • 【技术贴】Windows 11桌面出现“了解此图片”图标?一招教你轻松解决!
        亲爱的朋友们,大家好!近期,随着Windows11的更新与普及,一些用户反映他们的电脑桌面上意外出现了一个名为“了解此图片”的图标,并且桌面背景还会不请自来地自动更换,让人感到既困惑又无奈。    如果你也遇到了同样的问题,而且正在寻找一种简单快捷的方法来摆脱......
  • 【独立开发前线】Vol.16 推荐6个生成产品ICON图标产品LOGO的网站
    对于独立开发者而言,很大一个问题就是需要设计ICON和LOGO,今天为大家推荐6款神器,帮你快速搞定它们;1.IconKitchenIconKitchen2.Logofa.stLogoFast|MakeBeautifulLogosFastandFree3.Logostore.aiLogoStoreAI4.LogotouseLogoToUse-Freehigh-qualityLo......
  • vue3项目中使用echarts实现中国地图大区任意分区
    最终效果:背景:项目需要在中国地图上显示各大区的库存情况,使用echarts将下载的中国地图挂载后,好家伙,全是一块块的省份,再定睛一看,我这项目需求的大区咋只有6个,好好好,看来得探索一波如何将各省份自定义为大区了。1.echarts、中国地图json文件下载echarts下载:npminstallecha......
  • echarts.js画折线图
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><scriptsrc="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script></head><body><divid="w......