首先餅圖的案例如下：

我們可以通過設置標題title然后設置title的位置再餅圖的中央顯示：

?效果如下：

?

接下來我們可以通過echarts中的鼠標移動事件來獲取設置title中text的值

?

?

我們對剛剛refs獲取到的echarts實例綁定鼠標移動事件，這是我們獲取到的params的值就是鼠標移動到餅圖上對應項的值。然后我們通過出需要展示的值通過setOption重新設置標題。

最終效果如下：

?

下面我把代碼貼在此處? 大家可以在vue中體驗使用 （記得要引入echarts）

<!-- html部分代碼 --><div class="charts" ref="charts"></div>

?

//script中的代碼mounted() {let mychart = echarts.init(this.$refs.charts)mychart.setOption({tooltip: {trigger: 'item'},series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: true,position: 'outside'},labelLine: {show: true},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]})mychart.on('mouseover', function (params) {const {name,value}=params.data;mychart.setOption({title: {text: name,subtext: value,left: 'center',top: 'center'},})});},

總結

以上是生活随笔為你收集整理的echart中饼图如何显示数据 实现鼠标移动切换显示（vue中）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。