记录下,也折腾了两三个小时....

默认显示如下:

自定义数据显示如下:

 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']
});

最终完成,在网上没找到解决方案,所以记录下,给需要的人提供一个方案

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐