echarts自定义tooltip(修改默认tooltip样式 vue组件挂载)

需求

echarts柱状图自定义tooltip

遇到的问题及解决方案

1.需要使用自定义vue组件

使用方案

使用tooltip自带的formatter函数来进行自定义样式。
组件样式画完后需要将其变成html文本用于返回，这里使用了vue自带的evtend方法
1.引入写好的tooltip组件

import Vue from 'vue'
import barTooltip from './barTooltip.vue'
const BarTooltip = Vue.extend(barTooltip)

2.在tooltip的formatter方法中使用

formatter(params) {
    const com = new BarTooltip() //* vue组件 使用继承Excend 保证每一个都是全新的
    com.setData(params.data.originData) //* originData 获取到的原始数据包 需要在赋值后再挂载，保证数据放置后再渲染
    com.$mount()//* 挂载组件
    return com.$el.innerHTML //* 因为只支持文本 所以使用innerHTML
},

注意事项

1.setData是我组件自己编写的方法，用来赋值组件data。并进行渲染。注意，setData需要在$mount之前，因为mount渲染完之后再赋值，因为javascript是单线程的，而formatter只会拿当前return的值取渲染。等$nextTick返回最新的数据再return已经来不及了 2.组件最外层需要额外包一层div,因为echarts的渲染过程中会对顶层div进行样式渲染，把之前一些样式覆盖掉

针对该情况，只要在组件外层包一个div即可

3.echarts会自定义一些样式，需要自己修改，比如下图的padding。修改请看下个问题

2.需要修改echarts默认tooltip样式

使用echarts自带的extraCssText属性对其进行修改

tooltip: {
  trigger: 'item',
  extraCssText: 'padding:0px;border-radius: 1rem;' //* 修改tooltipcss自定义样式
},