echarts-tooltip自定义内容使用vue数据渲染_echarts tooltip formatter自定义html

目的：echarts饼图扇型点击出现提示框显示table可分页

实现：echarts-tooltip的formatter支持返回HTML字符串或者创建的DOM实例。可以页面创建个DOM，在formatter函数获取并return，但是页面会渲染这个DOM，所以一开始就v-show=false不显示，在echarts点击事件里出发显示

1.在页面创建DOM

<div v-show="isShow" ref="pieTable" class="tooltip">
      <el-table
        :data="pieTable"
        stripe
        height="calc(100% - 50px)"
      >
        <el-table-column
          prop="account"
          align="center"
          label="账户"
        />
        <el-table-column
          prop="name"
          align="center"
          label="账户名"
        />
        <el-table-column
          prop="money"
          align="center"
          label="合计金额"
        />
        <el-table-column
          prop="relationship"
          align="center"
          label="关系"
        />
      </el-table>
      <el-pagination
        :current-page="listQuery3.pageNum"
        :page-size="listQuery3.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total3"
        @size-change="handleSizeChange3"
        @current-change="handleCurrentChange3"
      />
    </div>

2.绘制饼图方法里配置tooltip，并监听点击事件

pieChart() {
      const chartDom = document.getElementById('pie')
      // chartDom.style.width = this.width + 'px'
      this.myChart = this.$echarts.init(chartDom)
      const arr = [
        { name: '温州', value: 6, arr: [{ name: 'a', money: 100, account: '1111', relationship: '亲属' }, { name: 'b', money: 100, account: '1111', relationship: '亲属' }, { name: 'c', money: 100, account: '1111', relationship: '亲属' }, { name: 'd', money: 100, account: '1111', relationship: '亲属' }, { name: 'd', money: 100, account: '1111', relationship: '亲属' }, { name: 'd', money: 100, account: '1111', relationship: '亲属' }] },
        { name: '杭州', value: 8, arr: [{ name: 'a', money: 100, account: '1111', relationship: '亲属' }, { name: 'b', money: 100, account: '1111', relationship: '亲属' }, { name: 'c', money: 100, account: '1111', relationship: '亲属' }, { name: 'd', money: 100, account: '1111', relationship: '亲属' }, { name: 'd', money: 100, account: '1111', relationship: '亲属' }, { name: 'd', money: 100, account: '1111', relationship: '亲属' }] },
        { name: '衢州', value: 4, arr: [{ name: 'a', money: 100, account: '1111', relationship: '亲属' }, { name: 'b', money: 100, account: '1111', relationship: '亲属' }, { name: 'c', money: 100, account: '1111', relationship: '亲属' }, { name: 'd', money: 100, account: '1111', relationship: '亲属' }, { name: 'd', money: 100, account: '1111', relationship: '亲属' }, { name: 'd', money: 100, account: '1111', relationship: '亲属' }] },
        { name: '湖州', value: 10, arr: [{ name: 'a', money: 100, account: '1111', relationship: '亲属' }, { name: 'b', money: 100, account: '1111', relationship: '亲属' }, { name: 'c', money: 100, account: '1111', relationship: '亲属' }, { name: 'd', money: 100, account: '1111', relationship: '亲属' }, { name: 'd', money: 100, account: '1111', relationship: '亲属' }, { name: 'd', money: 100, account: '1111', relationship: '亲属' }] }
      ]
      const option = {
        tooltip: {
          triggerOn: 'click',
          enterable: true, //鼠标可以移入提示框
          confine: true, //提示框不超出可视区域显示
          formatter: (params) => {
            const DomHtml = this.$refs.pieTable
            return DomHtml
          }
        },
        series: [
          {
            type: 'pie',
            radius: [0, '80%'],
            center: ['50%', '50%'],
            showEmptyCircle: false,
            selectedMode: 'single',
            roseType: true,
            data: arr,
            label: {
              show: true,
              color: '#fff',
              fontSize: 15,
              fontWeight: 600,
              formatter: '{b}：{c}',
              position: 'inside'
            }
          }
        ]
      }
      this.myChart.off('click')
      this.myChart.on('click', (params) => {
        this.isShow = true
        this.getPieTable()
        this.pieTable = params.data.arr
      })
      option && this.myChart.setOption(option)
    }

3.效果图