vue3中echarts的tooltip组件不显示问题及解决

目录
  • vue3 echarts的tooltip组件不显示
    • 解决办法
  • Echarts|tooltip提示框组件参数

vue3 echarts的tooltip组件不显示

data() {
  return {
    chartInstance: ''
  }
},

mounted() {
  if(!this.chartInstance) this.chartInstance = echarts.init(this.$refs.myChart)
  this.chartInstance.setOption(option)
}

如图，我将echarts实例赋值给了响应式的变量this.chartInstance，这便是在vue3中出错的原因，即不能将echarts实例赋值给响应式变量。

解决办法

①

this.$echarts.init(this.$refs.myChart).setOption(option)

②如果我们需要多次在一个dom元素上绘制echarts，又不想让元素多次echarts实例化，可以使用getInstanceByDom方法

let el = this.$refs.myChart
if(this.$echarts.getInstanceByDom(el)) this.$echarts.getInstanceByDom(el).setOption(option)
else this.$echarts.init(el).setOption(option)

Echarts|tooltip提示框组件参数

Echarts数据可视化tooltip提示框组件详解：

tooltip ={                                      //提示框组件
    trigger: 'item',                            //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
    triggerOn:"mousemove",                      //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
    showContent:true,                           //是否显示提示框浮层
    alwaysShowContent:true,                     //是否永远显示提示框内容
    showDelay:0,                                  //浮层显示的延迟，单位为 ms
    hideDelay:100,                                //浮层隐藏的延迟，单位为 ms
    enterable:false,                             //鼠标是否可进入提示框浮层中
    confine:false,                               //是否将 tooltip 框限制在图表的区域内
    transitionDuration:0.4,                      //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
    position:['50%', '50%'],                    //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
    formatter:"{b0}: {c0}<br />{b1}: {c1}",     //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
    backgroundColor:"transparent",            //标题背景色
    borderColor:"#ccc",                        //边框颜色
    borderWidth:0,                              //边框线宽
    padding:5,                                  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
    textStyle:mytextStyle,                     //文本样式
};

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 项目中Echarts 5使用方法详解

    Vue 项目中Echarts 5使用方法详解

    目录 前言 创建项目 基本使用 安装 使用方法 柱状图 动态排序柱状图 前言 Echarts 是一个纯JavaScript的图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 创建项目 先使用vue-cli创建一个新的项目,配置按照自己的需要选择,默认的也可 vue create vue_echarts cd vue_echarts npm run serve 基本使用 安装 首先安装echarts npm i

  • vue3+Echarts页面加载不渲染显示空白页面的解决

    目录 vue3 Echarts页面加载不渲染显示空白页面 个人认为造成这个问题的原因 解决这个问题的方法 vue Echarts白屏或等一会才出现 原因 解决方法 vue3 Echarts页面加载不渲染显示空白页面 在父组件获取到数据后传递给子组件并没有及时的更新渲染图表. 在本地开发环境是没有一点问题,但发布到测试环境上每次页面加载都不渲染,点击浏览器刷新按钮后才会去渲染图表. 个人认为造成这个问题的原因 页面加载子组件dom元素此时还没有加载完成,所以看到的就是空白,只有刷新一下才可以. 解

  • vue3封装echarts组件最佳形式详解

    目录 思路 目录结构 组件代码 v-charts.vue useCharts.ts type.d.ts options/bar.ts 项目中使用 index.vue /hooks/useStatisDeviceByUserObject.ts 思路 项目中经常用到echarts,不做封装直接拿来使用也行,但不可避免要写很多重复的配置代码,封装稍不注意又会过度封装,丢失了扩展性和可读性.始终没有找到一个好的实践,偶然看到一篇文章,给了灵感.找到了一个目前认为用起来很舒服的封装. 结合项目需求,针对不

  • vue3+ts+echarts实现按需引入和类型界定方式

    目录 vue3+ts+echarts实现按需引入和类型界定 vue3按需引入echarts问题及使用 vue3+ts+echarts实现按需引入和类型界定 一直想系统学习一下echarts,无奈今天在引入上就犯了难,现记录一下我的解决方案 为了减少体积和使用的便利,我想实现一个按需和全局的引入 本来是想在main.ts当中直接import * as echarts from 'echarts',然后把这个echarts挂载在app的实例上,但是以我现有的经验,这可能要涉及到this的问题,vue

  • vue中Echarts使用动态数据的两种实现方式

    vue中Echarts使用动态数据的两种实现方式

    目录 Echarts使用动态数据的两种方式 1.通过computed 2.在data中定义option vue Echarts几种常用图表动态数据切换 1.柱状图 2.平滑折线面积图 3.折线图堆叠 4.饼状图 Echarts使用动态数据的两种方式 在使用Echarts时我们数据一般不是静态写死的,而是通过后端接口动态获取的,在此总结两种在vue框架下Echarts使用动态数据的方式. 1.通过computed computed: {     options() {       let that

  • vue中Echarts图表宽度没占满的问题

    vue中Echarts图表宽度没占满的问题

    目录 vue Echarts图表宽度没占满 解决方法 vue Echarts图表宽度自适应,亲测有效 实现宽度自适应语句 vue Echarts图表宽度没占满 显示效果: 经过测试,当把宽度写成固定px的时候,就能正确渲染. 解决方法 1.宽高写成固定px,针对宽度不需要自适应的大屏. 2.当宽度需要自适应,父元素需要设置宽高,可以使用$nextTick 当元素宽度发生改变,只需要等待DOM渲染完成在渲染图表,这样就不会出现问题了. 相似案例: 当点击按钮使用v-if进行图表切换,同样会使出现宽

  • vue3中echarts的tooltip组件不显示问题及解决

    vue3中echarts的tooltip组件不显示问题及解决

    目录 vue3 echarts的tooltip组件不显示 解决办法 Echarts|tooltip提示框组件参数 vue3 echarts的tooltip组件不显示 data() { return { chartInstance: '' } }, mounted() { if(!this.chartInstance) this.chartInstance = echarts.init(this.$refs.myChart) this.chartInstance.setOption(option)

  • Vue3中使用defineCustomElement 定义组件详解

    目录 使用 Vue 构建自定义元素 跳过组件解析 传递 DOM 属性 defineCustomElement() 生命周期 Props 事件 插槽 依赖注入 将 SFC 编译为自定义元素 基于 Vue 构建自定义元素库 defineComponent() defineAsyncComponent() 使用 Vue 构建自定义元素 Web Components 是一组 web 原生 API 的统称,允许开发者创建可复用的自定义元素 (custom elements). 自定义元素的主要好处是,它们

  • C#中datagridview使用tooltip控件显示单元格内容的方法

    本文实例讲述了C#中datagridview使用tooltip控件显示单元格内容的方法.分享给大家供大家参考,具体如下: 代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;

  • 如何在在Vue3中使用markdown 编辑器组件

    目录 安装 引入组件 基础用法 保存后的 markdown 或者 html 文本如何渲染在页面上? 安装 # 使用 npm npm i @kangc/v-md-editor@next -S # 使用yarn yarn add @kangc/v-md-editor@next 引入组件 import { creatApp } from 'vue'; import VMdEditor from '@kangc/v-md-editor'; import '@kangc/v-md-editor/lib/s

  • Vue3中注册全局的组件,并在TS中添加全局组件提示方式

    Vue3中注册全局的组件,并在TS中添加全局组件提示方式

    目录 Vue3中注册全局的组件 Vue3踩坑--全局注册组件 我的框架:vue3+vite+ts+naiveUI Vue3中注册全局的组件 1. 在src/components中新建index.ts用来将所有需要全局注册的组件导入 : 如果使用的是 JS 可以删除类型校验 import type { Component } from 'vue' import SvgIcon from './SvgIcon/index.vue' // 如果使用的是 JS 可以删除类型校验 const compon

  • Vue3中echarts无法缩放的问题及解决方案

    Vue3中echarts无法缩放的问题及解决方案

    目录 前言 问题描述 官网示例正常 官网示例在本地缩放异常 灵光乍现 问题解决 前言 实际工作中,使用到vue和echarts技术.项目原来用的vue2+echarts4,后来更新到了vue3+echarts5,结果遇到echarts无法绽放的问题. 问题描述 官网示例正常 1.打开echarts官网示例:https://echarts.apache.org/examples/zh/editor.html?c=area-rainfall这个示例的缩放功能是正常的.如下图: 官网示例在本地缩放异常

  • 基于Linux系统中python matplotlib画图的中文显示问题的解决方法

    最近想学习一些python数据分析的内容,就弄了个爬虫爬取了一些数据,并打算用Anaconda一套的工具(pandas, numpy, scipy, matplotlib, jupyter)等进行一些初步的数据挖掘和分析. 在使用matplotlib画图时,横坐标为中文,但是画出的条形图横坐标总是显示"框框",就去查资料解决.感觉这应该是个比较常见的问题,网上的中文资料也确实很多,但是没有任何一个彻底解决了我遇到的问题.零零碎碎用了快3个小时的时间,才终于搞定.特此分享,希望能帮到有同

  • 详解vue3中的非父子组件传值

    详解vue3中的非父子组件传值

    目录 App.vue sub1.vue sub2.vue 总结 vue2中非父子组件的传值主要是通过事件总线,创建一个vue实例,通过在不同的组件中导入该实例来实现非父子组件之间的通信行为. vue3提供了**provide**和**inject**属性,可以实现非父子组件之间的通信: 假设有三个组件:App.vue(父级).sub1(子级).sub2(子级的子级): App.vue <template> <div style="border: 1px solid pink&q

  • vue3中的elementPlus全局组件中文转换方式

    目录 elementPlus 全局组件中文转换 elementPlus 设置默认语言为中文 elementPlus 全局组件中文转换 在项目中使用日期下拉框发现是英文的,需要全局改成中文样式. 代码实现 在 App.vue 的文件中修改即可. 代码如下 <template>     <el-config-provider :locale="locale">       <router-view></router-view>     <

  • vue3中的伸缩菜单组件

    目录 vue3伸缩菜单组件 效果图 总结 vue3伸缩菜单组件 最近一直在学习分装组件,学到了一个伸缩菜单栏组件,浅浅的记录一下,想要封装菜单的,代码可以直接拿去用,稍作修改即可! 效果图 1.在components下面创建一个container的文件,在container文件下面创建一个src文件,然后在src文件下创建index.vue文件 这个文件里写入 <template> <div class="common-layout"> <el-conta

随机推荐