記錄下，也折騰了兩三個(gè)小時(shí)....

默認(rèn)顯示如下：

自定義數(shù)據(jù)顯示如下：

?option設(shè)置:

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}: ozvdkddzhkzd'}},labelLine: {show: false},data: that.rooms}] });

首先第一個(gè)問(wèn)題是自定義數(shù)據(jù)顯示比較簡(jiǎn)單,但是默認(rèn)是鼠標(biāo)移入端移出事件才觸發(fā)顯示和隱藏，移動(dòng)沒(méi)有這兩個(gè)事件，要更換為點(diǎn)擊顯示和隱藏

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

默認(rèn)顯示，我只是搞了一個(gè)div用絕對(duì)定位到餅圖中間,實(shí)際使用title加事件的方式也是可行，網(wǎng)上有方案可以看看，但是那種方案又需要在移入移出事件里面控制title的顯示和隱藏，而移動(dòng)端沒(méi)有這兩個(gè)事件，所以那種方案對(duì)我無(wú)效，我這里只是貼下我的實(shí)現(xiàn)方式

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>會(huì)議室總數(shù)</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;}}

這里我只是通過(guò)一個(gè)取巧的方式解決的,就是自定義數(shù)據(jù)在中間顯示的時(shí)候,canvas的父級(jí)元素會(huì)加上這樣一個(gè)屬性，就是鼠標(biāo)形狀的樣式

?而取消顯示的時(shí)候是空或者default

?我就通過(guò)監(jiān)聽(tīng)屬性的變化來(lái)添加這樣一個(gè)事件來(lái)處理，所以如下處理即可，attributeFilter這個(gè)是過(guò)濾器，可以過(guò)濾元素的屬性，比如class變化,其他屬性變化等都可以監(jiān)聽(tīng)

//監(jiān)聽(tīng)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'] });

最終完成，在網(wǎng)上沒(méi)找到解決方案，所以記錄下，給需要的人提供一個(gè)方案

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。