vue3 ts编写echart是tooltip无法展示的解决

 更新时间:2022年10月19日 10:59:46   作者:Aurora_juan  
这篇文章主要介绍了vue3 ts编写echart是tooltip无法展示的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue3 ts编写echart是tooltip无法展示

用ts 定义的一个ref 初始化ehart实例

tooltip参考网上的写法 改了很多次 页面还是不能展示

tooltip片段代码如下

tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器,坐标轴触发有效
          type: 'line', // 默认为直线,可选为:'line' | 'shadow'
          lineStyle: {
            color: '#57617B'
          }
        },
        formatter:
          '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%',
        backgroundColor: 'rgba(0,0,0,0.7)', // 背景
        padding: [8, 10], // 内边距
        extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);' // 添加阴影
      },

echarts社区都可以展示怎么到这里就这样了

强大的百度

解决办法

用 markRaw 让echarts从监听对象变成普通对象!!

myEhart.value = markRaw(echarts.init(cyEchartRef.value))
      myEhart.value.setOption(echartOption)
      // myEhart.off('click')
      myEhart.value.on('click', function(params) {
        fetchDataFun(params.value)
        getLight(params.value)
      })

可以成功展示啦~ 

vue对echarts的tooltip自定义内容

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

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

tooltip 格式化后显示效果

格式化代码部分:

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'
        }
      }]
    })
  }
},

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • uniapp微信小程序WebApi_openid、phone接口获取代码详解

    uniapp微信小程序WebApi_openid、phone接口获取代码详解

    本文主要记录了微信小程序接口调用的过程,首先查看uniapp文档和微信API文档,获取openid和phone,然后通过uniapp实现获取openid和电话号码,但遇到了合法域名屏蔽的问题,最后通过将微信访问迁移到后台解决,需要的朋友可以参考下
    2024-10-10
  • vue搜索和vue模糊搜索代码实例

    vue搜索和vue模糊搜索代码实例

    这篇文章主要介绍了vue搜索和vue模糊搜索,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue3+vite动态加载路由,本地路由和线上路由匹配方式

    vue3+vite动态加载路由,本地路由和线上路由匹配方式

    这篇文章主要介绍了vue3+vite动态加载路由,本地路由和线上路由匹配方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 深入理解Vue的数据响应式

    深入理解Vue的数据响应式

    Vue.js的核心包括一套“响应式系统”。“响应式”,是指当数据改变后,Vue会通知到使用该数据的代码。例如,视图渲染中使用了数据,数据改变后,视图也会自动更新。
    2021-05-05
  • 在vue中使用Autoprefixed的方法

    在vue中使用Autoprefixed的方法

    这篇文章主要介绍了在vue中使用Autoprefixed的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 基于element-ui中el-select下拉框选项过多的优化方案

    基于element-ui中el-select下拉框选项过多的优化方案

    这篇文章主要介绍了基于element-ui中el-select下拉框选项过多的优化方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue项目实现webpack配置代理,解决跨域问题

    vue项目实现webpack配置代理,解决跨域问题

    这篇文章主要介绍了vue项目实现webpack配置代理,解决跨域问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 关于element el-input的autofocus失效的问题及解决

    关于element el-input的autofocus失效的问题及解决

    这篇文章主要介绍了关于element el-input的autofocus失效的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue2使用element-ui,el-table不显示,用npm安装方式

    vue2使用element-ui,el-table不显示,用npm安装方式

    这篇文章主要介绍了vue2使用element-ui,el-table不显示,用npm安装方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 在Vue3项目中使用Vuex进行状态管理的详细教程

    在Vue3项目中使用Vuex进行状态管理的详细教程

    在 Vue 3 中使用 Vuex 进行状态管理是一个很好的实践,特别是在涉及到多个组件间共享状态的情况,下面是如何在 Vue 3 项目中设置和使用 Vuex 的教程,包括 state, mutations, actions, getters 的概念及其用途,需要的朋友可以参考下
    2024-09-09

最新评论