vue中对echarts的tooltip自定义内容

约定不等于承诺〃 2022-12-22 04:50 205阅读 0赞

先看一下后端返回的数据结构

change: { 
    	date: { 
    		date_x: ["2020-11-12"], 
    		date_y: [10],
    		date_describe: [5]
    	}
    }

tooltip 格式化后显示效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]  
格式化代码部分：

drawPass(){ 
      // 基于准备好的dom，初始化echarts实例
      let ref = this.$refs.pass
      let discrible = this.pwd_data_describe
      if (ref && ref !== undefined) { 
        let myChart = this.$echarts.init(ref)
        // 绘制图表
        myChart.setOption({ 
          tooltip: { 
            show: true,
            formatter: function (param) { 
              console.log(param)
              return param.name + '<br/>' + param.value + '<br/>描述：距上一次修改天数为 ' + discrible[param.seriesIndex]
            }
          },
          xAxis: { 
            type: 'category',
            data: this.pwd_data_x,
          },
          yAxis: { 
            type: 'value'
          },
          series: [{ 
            data: this.pwd_data_y,
            type: 'line',
            symbol: 'triangle',
            symbolSize: 20,
            lineStyle: { 
              color: '#cc302e',
              width: 4,
              type: 'dashed'
            },
            itemStyle: { 
              borderWidth: 3,
              borderColor: '#ff6f6c',
              color: '#ff9392'
            }
          }]
        })
      }
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/fcc9084b33644a0db25655b90ca98d65.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue-echarts-v3 legend的自定义

[在这里插入图片描述][20190917151526934.png] [20190917151526934.png]: https://img-blog.csdnim...

刺骨的言语ヽ痛彻心扉/ 2024年04月19日 10:55/ 0 赞/ 61 阅读

相关 echarts自定义tooltip提示框内容

最近做一个展示需要在显示的tooltip上加上单位。。。需要自定义tooltip提示框内容效果如下先看效果和代码设置： ![watermark_type_ZHJvaWRz

秒速五厘米/ 2023年10月03日 15:47/ 0 赞/ 21 阅读

相关 leaflet自定义toolTip样式

`leaflet`自带`tooltip`相关api，支持传入自定义内容，但容器不支持自定义样式，通过`leaflet`[源码][Link 1]`_initLayout`函数可以

我不是女神ヾ/ 2023年07月08日 02:44/ 0 赞/ 30 阅读

相关 vue elementui 日历内容自定义

<el-calendar v-else v-model="toMonth"> <template slot="dateCell" slot-sc

向右看齐/ 2023年01月15日 03:39/ 0 赞/ 406 阅读

相关 vue中对echarts的tooltip自定义内容

先看一下后端返回的数据结构 change: { date: { date_x: ["2020-11-12"], date_y:

约定不等于承诺〃/ 2022年12月22日 04:50/ 0 赞/ 206 阅读

相关 Echart自定义tooltip带小圆点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lh

系统管理员/ 2022年11月17日 11:22/ 0 赞/ 294 阅读

相关自定义Echarts地理分布图tooltip显示内容

> 在为某省开发手机版环境监测系统中需要在Echarts tooltip 中展示特定的内容，echarts默认的展示方案并不能满足我们的需求，因此就需要我们进行手动改造。最

﹏ヽ暗。殇╰゛Y/ 2022年07月03日 13:57/ 0 赞/ 558 阅读

相关 echarts组件自定义---tooltip

tooltip: { trigger: 'axis', axisPointer: {

冷不防/ 2022年04月13日 04:54/ 0 赞/ 367 阅读

相关自定义echarts中tooltip提示框显示的内容和格式

自定义echarts中tooltip提示框显示的内容和格式公司最近在做的项目里,所有图表全部都是用echarts组件做的,包括柱状图,折线图,雷达图,扇形图,圆环图(饼

蔚落/ 2022年04月03日 18:12/ 0 赞/ 489 阅读

相关 echart自定义tooltip

给echart的tooltip数据提示部分增加单位 tooltip: { trigger: 'axis', axisPoi

青旅半醒/ 2021年07月26日 17:41/ 0 赞/ 787 阅读