記錄下，也折騰了兩三個小時....

默認顯示如下：

自定義數據顯示如下：

?option設置:

that.chart.setOption({tooltip: {show:false,trigger: 'item'},color: that.colors,series: [{type: 'pie',radius: ['70%', '90%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {//餅圖中間顯示配置label: {show: true,fontSize: '15',fontWeight: 'bold',formatter:'{b}: ze8trgl8bvbq'}},labelLine: {show: false},data: that.rooms}] });

首先第一個問題是自定義數據顯示比較簡單,但是默認是鼠標移入端移出事件才觸發顯示和隱藏，移動沒有這兩個事件，要更換為點擊顯示和隱藏

that.chart.on('click', function(e) {that.totalShow = false;//當檢測到鼠標懸停事件，取消默認選中高亮that.chart.dispatchAction({type: 'downplay',seriesIndex: 1,dataIndex: 0});//高亮顯示懸停的那塊that.chart.dispatchAction({type: 'highlight',seriesIndex: 1,dataIndex: e.dataIndex}); });

默認顯示，我只是搞了一個div用絕對定位到餅圖中間,實際使用title加事件的方式也是可行，網上有方案可以看看，但是那種方案又需要在移入移出事件里面控制title的顯示和隱藏，而移動端沒有這兩個事件，所以那種方案對我無效，我這里只是貼下我的實現方式

html:

<view class="charts-box"><view class="echarts" id="statistics" style="width: 100%;height:100%"></view><view class="total-box" v-show="totalShow"><text>{{total}}</text><text>會議室總數</text></view> </view>

css:

.charts-box {width: 100%;height: 420rpx;position: relative;.total-box{position: absolute;left: calc(50% - 90rpx);top:calc(50% - 48rpx);z-index: -1;font-size: 36rpx;font-weight: bold;color:#2EEB98;display: flex;flex-direction: column;justify-content: center;align-items: center;width: 180rpx;height: 96rpx;}}

這里我只是通過一個取巧的方式解決的,就是自定義數據在中間顯示的時候,canvas的父級元素會加上這樣一個屬性，就是鼠標形狀的樣式

?而取消顯示的時候是空或者default

?我就通過監聽屬性的變化來添加這樣一個事件來處理，所以如下處理即可，attributeFilter這個是過濾器，可以過濾元素的屬性，比如class變化,其他屬性變化等都可以監聽

//監聽style屬性變化 let canvasView = document.getElementById('statistics').firstChild; var Observer = new MutationObserver(function(mutations, instance) {mutations.forEach(function(mutation) {if (canvasView.style.cursor != 'pointer') {that.totalShow = true;}}); });Observer.observe(canvasView, {attributes: true,attributeFilter: ['style'] });

最終完成，在網上沒找到解決方案，所以記錄下，給需要的人提供一個方案

總結

以上是生活随笔為你收集整理的echarts饼图中间默认内容显示与data数据显示切换的全部內容，希望文章能夠幫你解決所遇到的問題。

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