通用配置-tooltip.formatter

• https://echarts.apache.org/zh/option.html#tooltip
• 提示框组件
• 我自己实现了一个vue组件到HTML字符串的加工功能

commonOptionTitle.vue

<template>
  <div class="common-option-title"></div>
</template>

<script>
import Vue from "vue"

import vueToHtml from '@/components/vueToHtml.vue'
export default {
  name: "",
  props: [""],
  data() {
    return {
      msg: "这里是 通用配置-title 组件",
    }
  },
  mounted() {
    let myEcharts = this.$echarts.init(
      document.querySelector(".common-option-title")
    )
    let option = {
      tooltip: {
        // 触发类型
        trigger: "axis",
        // 触发时机
        triggerOn: "click",
        // 格式化
        // formatter:"{b} 的成绩是 {c}"
        formatter: this.formatterVueToHtml,
      },
      legend: {
        data: ["期末语文成绩"],
      },
      xAxis: {
        type: "category",
        data: ["张三", "李四", "王五", "闰土", "小明", "茅台", "二妞", "大强"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "语文成绩",
          type: "bar", //柱状图
          data: [88, 92, 63, 77, 94, 80, 72, 86],
        },
      ],
    }
    myEcharts.setOption(option)
  }, //window.onload
  methods: {
    formatterVueToHtml(arg) {
      const vm = new Vue({
        render(h) {
          return h(vueToHtml, { props:{info:arg} })
        },
      }).$mount()
      return vm.$el
    },
  },
}
</script>
<style lang="scss" scoped>
.common-option-title {
  margin: 20px auto;
  width: 600px;
  height: 400px;
  outline: 1px solid #eee;
}
</style>

vueToHtml.vue

<template>
  <div class="vue-to-html">
    <img src="../assets/logo.png" alt="">
    <h2>姓名：{{info[0].name}}</h2>
    <p>成绩：{{info[0].data}}</p>
    <p>第{{info[0].dataIndex+1}}行</p>
  </div>
</template>

<script>
export default {
  name: "vueToHtml",
  props:['info'],
  data() {
    return {
      msg: "这里是 组件名称 组件",
    }
  },
  mounted() {
    console.log(this.info);
  }, //window.onload
}
</script>
<style lang="scss" scoped>
.vue-to-html{
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  img{
    width: 60px;
    height: 60px;
    border: 2px solid blue;
  }
  p{
    background-color: red;
    color: #fff;
  }
}
</style>