学习自
tooltip设置alwaysShowContent
,悬浮上去后会一直显示
tooltip: {
trigger: 'axis',
alwaysShowContent: true,
},
seriesIndex
表示是series
的第几个,dataIndex
是data
属性的索引
我这里的需求是固定显示最后一个数据的tooltip,给外层div绑定一个mouseleave
,鼠标移开后调用dispatchAction
触发tooltip
<div
class="echarts-div"
@mouseleave="dispatchAction">
<Echarts
class="real-echart"
:option="option"
autoresize
ref="chart"></Echarts>
</div>
watch: {
option: {
handler() {
this.$nextTick(() => {
this.dispatchAction()
});
},
deep: true,
},
},
methods: {
dispatchAction() {
this.$refs.chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex:
Math.max(...this.option.series.map((item) => item.data.length)) - 1,
});
},
},