echarts饼图中间默认内容显示与data数据显示切换

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

默认显示如下：

自定义数据显示如下：

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

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

echarts饼图中间默认内容显示与data数据显示切换相关推荐

echarts饼图内部百分比外部显示文字和数值
UI给出了这样一张图,饼图上不仅显示文字和数值,内部也要显示百分比.由于series中的label只能设置成饼图内部或者饼图外部,无法实现内外部兼有.此时可以在series中设置两个相同的配置对象,让 ...
echarts 饼图引导线文本显示不全
可以通过radius属性控制饼图大小来调整. series: [{ name: "行政区", type: "pie", radius: ["4 ...
echarts 饼图标签过多导致显示不全
先看一下缺失效果: 可以看到,紫色和红色的数据是没有显示出来的,这是因为标签过多导致标签重叠了,只要让重叠的标签显示出来就可以了,配置里面加上hideOverlap:false ...series: ...
echarts饼图属性
1.标题移动到右边原本 legend: {data:['同龄普通孩子','已具备技能','已泛化技能','已掌握技能','学习中'] }, 改 legend: {data:['同龄普通孩子','已具 ...
解决echarts饼图显示百分比，和显示内容字体及大小,如何给eCharts饼图区域指定颜色
解决echarts饼图显示百分比,和显示内容字体及大小 // 基于准备好的dom,初始化echarts实例 var pieEchart = echarts.init(document. ...
echarts饼图直观显示数值最实用的方式
默认:echarts饼图直接显示数值(如图无需光标悬空触发) var optionOne = { title : { text ...
echarts饼图自动显示数据
在做echarts饼图的时候,默认是不显示数据,现在要直接把数据显示在上面,代码如下: series: [{name: '处理状态',type: 'pie',radius: ['50%', '70%' ...
echarts饼图pie中间显示总数
echarts饼图pie中间显示总数有这样一种需求,饼图中间显示总数,当鼠标悬浮指定区域时显示对应区域数值网上搜了好多都是通过zlevel来实现的这种效果,但是如果echarts的背景如果不是纯色 ...
ECharts 柱状图横轴(X轴)文字内容显示不全
1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局原来布局 option = {gr ...

echarts饼图中间默认内容显示与data数据显示切换

echarts饼图中间默认内容显示与data数据显示切换相关推荐

最新文章

热门文章