记录下,也折腾了两三个小时....
默认显示如下:
自定义数据显示如下:
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}: {d}'
}
},
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']
});
最终完成,在网上没找到解决方案,所以记录下,给需要的人提供一个方案