目的: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.效果图