echarts-tooltip

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,
      },
    ],
  };

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用\[1\]:通过cnpm获取echarts的最新稳定版可以使用以下命令进行安装:$ cnpm install echarts --save。引用\[2\]:另外,你也可以通过npm安装echarts,使用命令npm install echarts --save。引用\[3\]:安装完成后,你可以在项目代码中使用require('echarts')来引入echarts库。例如,在你的代码中可以这样使用echarts:var echarts = require('echarts');然后,你可以使用echarts.init方法初始化一个echarts实例,并通过setOption方法设置图表的配置选项。例如:var myChart = echarts.init(document.getElementById('main'));myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: \['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'\] }, yAxis: {}, series: \[{ name: '销量', type: 'bar', data: \[5, 20, 36, 10, 10, 20\] }\] }); #### 引用[.reference_title] - *1* *3* [NPM 方法使用Echarts](https://blog.csdn.net/Serena_tz/article/details/125595553)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [echarts的安装及使用](https://blog.csdn.net/ingenuou_/article/details/123179231)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值