Echarts图表如何利用formatter自定义tooltip的内容和样式

这篇具有很好参考价值的文章主要介绍了Echarts图表如何利用formatter自定义tooltip的内容和样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在展示多数据图表的时候 有的时候需要图例也展示出一些内容来,例如官方这样子:鼠标悬停的时候展示该点数据

Echarts图表如何利用formatter自定义tooltip的内容和样式,echarts,前端,javascript

但是,官方提供的样式有时不适用所有的开发场景

我的项目需要实现鼠标悬停在某一点的时候,只展示该条线的数据,以及一些图表中未表现的数据。参照原型图,除了横轴和纵轴表示的时间和成功率之外,希望额外展示另两种数据,并且小圆点要和线的颜色相同

Echarts图表如何利用formatter自定义tooltip的内容和样式,echarts,前端,javascript

tooltipformatter:用来格式化图例文本,支持字符串模板和回调函数两种形式。
此处主要利用回调函数的形式去实现。具体写法请参照ECharts官网。

myChart.setOption({
  tooltip: {
    trigger: 'item', // axis显示该列下所有坐标轴对应数据,item只显示该点数据
    axisPointer: { // 坐标轴指示器,坐标轴触发有效
      type: 'line' // 默认为直线,可选为:'line' | 'shadow'
    },
    formatter: function(params) {
      var res = `
        <div>
          <div
            style='display: inline-block;
            width:  10px;
            height: 20px;
            color: ${params.color}'
            >●</div>
          <span>${'时间:2023-03-01 16:57:07'}</span>
        </div>
        <div>
          <div
            style='display: inline-block;
            width: 10px;
            height: 20px;
            color: ${params.color}'
          >●</div>
          <span>${'成功率:10.00%'}</span>
        </div>
        <div>
          <div
            style='display: inline-block;
            width: 10px;
            height: 20px;
            color: ${params.color}'
          >●</div>
          <span>${'订单总数量:0'}</span>
        </div>
        <div>
          <div
            style='display: inline-block;
            width: 10px;
            height: 20px;
            color: ${params.color}'
          >●</div>
          <span>${'订单成功数量:0'}</span>
        </div>
      `
      return params.name + res
    }
  },
  legend: {
    data: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'] // 顶部图例的名字
  },
  grid: { // 图例的位置
    top: 80,
    left: '4.2%',
    right: '5%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    splitLine: { show: false },
    boundaryGap: false,
    data: [67,43,78,12,34,32], // X轴
    axisTick: {
      alignWithLabel: true
    },
    axisLabel: {
      interval: 1
    }
  }],
  yAxis: [{
    type: 'value',
    axisLabel: {
      formatter: '{value} %'
    },
    name: '成功率',
    // 此处是固定Y轴的刻度以及刻度间距,没有的话则会根据数据自行展示
    max: 100, // 设置最大值
    min: 0, // 设置最小值
    interval: 10 // 设置刻度间距
  }],
  series: [10,20,30,40,50,60] // Y轴
})

 效果图如下

Echarts图表如何利用formatter自定义tooltip的内容和样式,echarts,前端,javascript

 文章来源地址https://www.toymoban.com/news/detail-789176.html

到了这里,关于Echarts图表如何利用formatter自定义tooltip的内容和样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Echarts图表之dispatchAction 操作 固定tooltip显示框

    echarts中支持的图表行为,通过dispatchAction触发。 使用dispatchAction操作来固定tooltip显示框,无需鼠标事件响应进入页面默认固定显示框,方便数据展示。   dispatchAction固定tooltip显示框需要 tooltip属性为axis    myChart.setOption(option);   //装配mychart  myChart.dispatchAction({         // 使

    2024年02月14日
    浏览(29)
  • echarts自定义tooltip,给tooltip增加百分号%

    支持返回 HTML 字符串或者创建的 DOM 实例。 (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) = string | HTMLElement | HTMLElement[] 在 trigger 为 ‘axis’ 的时候,或者 tooltip 被 axisPointer 触发的时候,params 是多个系列的数据数组。其中每项内容格式同上,并且, { componentT

    2024年02月15日
    浏览(48)
  • echarts自定义x轴和tooltip数据格式

    x轴和y轴数据格式如下 修改后xy轴数据格式如下 需求: 将json数据转成折线图需要的数据格式,并且x轴始终为0 - 23 点,并且折线图上的点数不会缺失,对应时间有点位的就展示,没有就空

    2024年01月19日
    浏览(38)
  • G2 图表 问题集合(自定义tooltip标题,折线图上增加标注点,x轴刻度自定义...)

    最近一直在处理G2 图表问题,发现这个图表除了官方文档,百度上很少能百度到具体的用法及案例,因此总结了此篇文章记录一下踩坑集合,记录问题同时也希望能帮助到广大网友 1.自定义tooltip title样式: 官方给出的案例是这样说的: 我想实现的效果: 很明显,我希望在标

    2024年02月09日
    浏览(29)
  • echarts雷达图图例自定义以及tooltip动态展示一维数据

     实现效果: 虽然上面实现了图例自定义,但是仔细看会发现图例与文字不在一条水平线上,利用富文本配置,对height进行调整,实现图例图片与文字对齐。 实现效果: 官方文档中默认显示该维度的所有数据 而遇到的需求是显示鼠标悬浮该轴的数据对比 实现:   虽然实现

    2024年02月16日
    浏览(33)
  • echarts散点图自定义tooltip,鼠标放上去展示多行数据

    先放效果图 如图,就是鼠标悬停在散点上(这里的散点我替换成了图片,具体做法参考这篇文章:echarts散点图的散点用自定义图片替代-CSDN博客)时,可以展示多行数据。之前查找资料的时候,很多用字符串模板的,即{a}{b}{c}之类的,但是经过实践之后发现这种方法对于散点

    2024年04月24日
    浏览(29)
  • 修改Echarts图表的标题和副标题的内容

    直接上代码       var graphicConfig = [         {           type: \\\"text\\\",           left: \\\"center\\\",           top: \\\"center\\\",           style: {             text: \\\"包日\\\", // 初始化为空字符串             textAlign: \\\"center\\\",             fill: \\\"#000\\\",             fontSize: 14,             fo

    2024年01月24日
    浏览(34)
  • 详解:当鼠标放上echarts图形时,显示数据、名称,或者自定义tooltip弹窗

     主要知识点:tooltip{}该配置项为:提示框组件相关设置 写入代码的位置如下,tooltip与xAxis同级 效果一实现代码 效果二实现代码: 更加灵活的自定义弹窗,可以自己写html,其中 params[0].marker 是柱形颜色的圆形,其他参数可以打印 params查看一下 然后拼接进html里 写入代码的位

    2024年02月11日
    浏览(29)
  • 利用ECharts实现winform中的可视化图表

    如今web端的图表可以说是非常丰富且用起来方便,ECharts已经非常成熟了,如果在winform中使用那就太好了。 使用winfrom程序封装一个web控件,然后进行展示就可以了,说干就干! 按照ECharts官网搞了一个折线图,效果如下 这里重点强调一下,不要使用webBrowser,因为这个东西的

    2024年02月03日
    浏览(53)
  • vue中echart的tooltip自定义显示内容

    目的:让tooltip显示自定义格式数据,甚至是显示横纵坐标以外的数据。 1. 先介绍一下常用情况 。 tooltip的trigger有三种选项“item”“axis”“none”,选择axis就是显示横坐标的内容。 这样设置,鼠标滑过对应点时,tooltip就会显示横坐标内容和对应纵坐标的温度和信号。 2. 若要

    2024年02月09日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包