echarts-tooltip

m0_74019046

于 2024-05-19 20:00:44 发布

阅读量1.3k

点赞数 10

分类专栏： echarts 文章标签： echarts 爬虫前端

本文链接：https://blog.csdn.net/m0_74019046/article/details/139043745

版权

echarts 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

tooltip 提示框组件

tooltip的content部分默认是用html去绘制的，所以要使用div作为echarts的容器。
要使用canvas绘制，要必须使用canvas模式。

tooltip后如果渲染的元素是canvans,tooltip不能显示出来。

  let options = {
    tooltip: {},
    xAxis: {
      data: [1, 2, 3, 4, 5, 6],
    },
    yAxis: {},
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: data.d1,
      },
      {
        id: 1,
        name: "d2",
        type: "line",
        data: data.d2,
      },
    ],
  };
  <div id="canvas"></div>

在这里插入图片描述

renderMode 浮层的渲染模式

默认以 'html 即额外的 DOM 节点展示 tooltip；此外还可以设置为 ‘richText’ 表示以富文本的形式渲染。
使用富文本渲染模式， renderMode: “richText”,

 let options = {
    // html要用div做容器
    tooltip: {
      renderMode: "richText",
    },
    xAxis: {
      data: [1, 2, 3, 4, 5, 6],
    },
    yAxis: {},
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: data.d1,
      },
      {
        id: 1,
        name: "d2",
        type: "line",
        data: data.d2,
      },
    ],
  };
  <div id="canvas"></div>

在这里插入图片描述

tooltip触发方式

trigger 触发位置
可选值：
1.item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
2. axis:坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
3. none:什么都不触发。
triggerOn 触发方式
‘mousemove’，‘click’，‘mousemove|click’，‘none’

  let options = {
    // html要用div做容器
    tooltip: {
      renderMode: "richText",
      triggerOn: "mousemove|click",
      trigger: "axis",
    },
    xAxis: {
      data: [1, 2, 3, 4, 5, 6],
    },
    yAxis: {},
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: data.d1,
      },
      {
        id: 1,
        name: "d2",
        type: "line",
        data: data.d2,
      },
    ],
  };

在这里插入图片描述

tooltip样式和位置的修改

样式的调节

在html模式下可以使用className来调节，使用canvas模式就必须用富文本来调节。
在这里插入图片描述
使用className调节，有些样式在配置项里有，因此**要修改样式的优先级，**有些样式css里无法配置，要通过tooltip的配置项配置。

 tooltip: {
      renderMode: "html",
      triggerOn: "mousemove|click",
      trigger: "axis",
      className: "content",
      textStyle:{
          color:"#fff"
     }
 },

<style>
//这里不要使用局部样式使用局部样式 就会变成 .content [xxxxxx],不好修改。
 .content {
    background-color: red !important;
 }
</style>

在这里插入图片描述

位置的调节

可以通过position来调节位置,position设置的位置是固定的。

    tooltip: {
      renderMode: "html",
      triggerOn: "mousemove|click",
      trigger: "axis",
      className: "content",
      textStyle: {
        color: "#fff",
      },
      position: [0, 0],
    },

在这里插入图片描述
postion可以配合css来调整位置。

  tooltip: {
     renderMode: "html",
     triggerOn: "mousemove|click",
     trigger: "axis",
     className: "content",
     textStyle: {
       color: "#fff",
     },
     position: [0, 0],
  },

<style>
.content {
  background-color: red !important;
  left: 50% !important;
  top: 50% !important;
}
</style>

在这里插入图片描述

postion 的函数形式

函数的形参

      position: function () {
        console.log(arguments);
      },

第一个参数存放着当前鼠标所在的位置poiner，
第二个参数是data,
第三个参数是tooltip 的 dom 对象,
第四格式rect,只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
第五个是size,包括 dom 的尺寸和 echarts 容器的当前尺寸
在这里插入图片描述
例子：设置tooltip的位置为鼠标所在的位置

 tooltip: {
      renderMode: "html",
      triggerOn: "mousemove|click",
      trigger: "axis",
      className: "content",
      textStyle: {
        color: "#fff",
      },
      position: function (pointer, data, dom, rect, size) {
        return [pointer[0], pointer[1]];
      },
}

在这里插入图片描述

数值的调节

数值包括标题部分、前面的标题和后面的值。
formatter调节整个文字
valueFormatter可以单独调节value
在这里插入图片描述
formatter调节整个文字
字符串模板形式
模板变量有 {a}, {b}，{c}，{d}，{e}

    tooltip: {
      renderMode: "html",
      triggerOn: "mousemove|click",
      trigger: "axis",
      className: "content",
      textStyle: {
        color: "#fff",
      },
      position: function (pointer, data, dom, rect, size) {
        return [pointer[0], pointer[1]];
      },
      formatter: "{a},{b},{c},{d}",
    },

在这里插入图片描述
函数形式

    tooltip: {
      renderMode: "html",
      triggerOn: "mousemove|click",
      trigger: "axis",
      className: "content",
      textStyle: {
        color: "#fff",
      },
      position: function (pointer, data, dom, rect, size) {
        return [pointer[0], pointer[1]];
      },
      formatter: (params, callback) => {
        console.log(params);
      },
    },

params:
在这里插入图片描述
使用valueFormatter要注释掉formatter

    tooltip: {
      renderMode: "html",
      triggerOn: "mousemove|click",
      trigger: "axis",
      className: "content",
      textStyle: {
        color: "#fff",
      },
      position: function (pointer, data, dom, rect, size) {
        return [pointer[0], pointer[1]];
      },
      /* formatter: (params, callback) => {
        console.log(params);
      },*/
      valueFormatter: (value) => {
        return value + "个";
      },
    },

在这里插入图片描述
formatter例子：给数据排序，tooltip的第一项展示当前销量的最大值

 const data = {
    d1: [11, 21, 3, 15, 22, 11],
    d2: [14, 15, 16, 25, 12, 22],
  };
  let options = {
    // html要用div做容器
    tooltip: {
      renderMode: "html",
      triggerOn: "mousemove|click",
      trigger: "axis",
      className: "content",
      textStyle: {
        color: "#fff",
      },
      position: function (pointer, data, dom, rect, size) {
        return [pointer[0], pointer[1]];
      },
      formatter: (params, callback) => {
        console.log(params);
        const myParams = params.sort((pre, now) => {
          return now.data - pre.data;
        });
        return `<div>
          <div>日期${myParams[0].axisValue}</div>
          <div style="color:${myParams[0].color}">
            <img src="./miaosha.png">
            <span>${myParams[0].seriesName}</span>
            <span>${myParams[0].data}</span>
          </div>  
          <div style="color:${myParams[1].color}">
            <img src="./daifukuan.png">
            <span>${myParams[1].seriesName}</span>
            <span>${myParams[1].data}</span>
          </div>
       </div>`;
      },
    },
    xAxis: {
      data: [1, 2, 3, 4, 5, 6],
    },
    yAxis: {},
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: data.d1,
      },
      {
        id: 1,
        name: "d2",
        type: "line",
        data: data.d2,
      },
    ],
  };

在这里插入图片描述

指示器axiosPoiner

坐标轴指示器 axiosPoiner
坐标轴指示器是指示坐标轴当前刻度的工具。

 tooltip: {
      renderMode: "html",
      triggerOn: "mousemove|click",
      trigger: "axis",
      className: "content",
      textStyle: {
        color: "#fff",
      },
      position: function (pointer, data, dom, rect, size) {
        return [pointer[0], pointer[1]];
      },
      formatter: (params, callback) => {
        console.log(params);
        const myParams = params.sort((pre, now) => {
          return now.data - pre.data;
        });
        return `<div>
          <div>日期${myParams[0].axisValue}</div>
          <div style="color:${myParams[0].color}">
            <img src="./miaosha.png">
            <span>${myParams[0].seriesName}</span>
            <span>${myParams[0].data}</span>
          </div>  
          <div style="color:${myParams[1].color}">
            <img src="./daifukuan.png">
            <span>${myParams[1].seriesName}</span>
            <span>${myParams[1].data}</span>
          </div>
       </div>`;
      },
      axisPointer: {
        show: true,
        type:'shadow'
      },
    },

在这里插入图片描述

series里的数据也可以配置tooltip

series里的数据也可以配置tooltip,但是触发的时候只有一个，只能通过修改触发方式，来使两个都触发。如果同时触发的话图标自己的优先级大于tooltip公共设置的，


let options = {
    // html要用div做容器
    tooltip: {
      renderMode: "html",
      triggerOn: "mousemove",
      trigger: "item",
      className: "content",
      textStyle: {
        color: "#fff",
      },
      position: function (pointer, data, dom, rect, size) {
        return [pointer[0], pointer[1]];
      },
      axisPointer: {
        show: true,
        type: "shadow",
      },
    },
    xAxis: {
      data: [1, 2, 3, 4, 5, 6],
    },
    yAxis: {},
    series: [
      {
        tooltip: {
          renderMode: "html",
          triggerOn: "click",
          trigger: "item",
          formatter: "{a},{b},{c}",
        },
        id: 0,
        name: "d1",
        type: "line",
        data: data.d1,
      },
      {
        id: 1,
        name: "d2",
        type: "line",
        data: data.d2,
      },
    ],
  };

m0_74019046

关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
echarts-tooltip

tooltip的content部分默认是用html去绘制的，所以要使用div作为echarts的容器。要使用canvas绘制，要必须使用canvas模式。tooltip后如果渲染的元素是canvans,tooltip不能显示出来。
复制链接

扫一扫

专栏目录