Echarts 设计饼图扇区被选中时中间显示数据

本文介绍了如何在Echarts饼图中,当扇区被选中时,中间显示详细数据。通过调整label的formatter和position属性,并结合HTML与CSS实现数据居中展示,同时保持扇区边缘数据可见。

效果图如下:

1、初始状态

2、扇区被选中时状态(中间数据跟着修改)

    

思路:

使用echarts饼图自带的label,显示出每一个扇区的具体值 可采用 【formatter: "{b} : {c} 人"】 设计格式

并将显示位置改为 position: 'right'

其实本身直接将position改为 ‘center’也能将数据显示在中间,但是扇区边缘就不会显示具体数据了

所以我的思路是:添加一个div盒子显示数据,利用子绝父相固定位置

HTML代码如下:

 <div class="border" style="position: relative">
      <div id="equipment" :style="{height: '360px',marginLeft:'20px',marginBottom:'40px'}"></div>
      <!--为ECharts新增一个DOM空间-->
      <div style="position: absolute;left: 46%;top: 45%;">
        <p style="font-size: 29px">{{chooseEquipment.data}}%</p> 
        <p style="font-size: 16px;margin-left: 22px;margin-top: 3px">{{chooseEquipment.value}}</p>
      </div>
 </div>

脚本代码如下:

drawLineEquipment() {
        // 基于准备好的dom,初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('equipment'));
        let obj = this;
        // 绘制图表
        myChart.setOption({
          legend: {
            orient: 'vertical',
            x: 'left',
            data: ['安卓', '苹果'],
          },
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              hoverAnimation: true,
              itemStyle: {
                normal: {
                  borderColor: "#FFFFFF", borderWidth: 1,
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: '#727272'  // 改变标示线的颜色
                  }
                },
                emphasis: {
                  lineStyle: {
                    color: '#727272'  // 改变标示线的颜色
                  }
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  formatter: "{b} : {c} 人",
                  textStyle: {
                    color: '#727272',
                  }
                },
                emphasis: {
                  show: true,
                }
              },
              data: [
                {value: obj.deviceUserStatisticsModelList[1].userNumber, name: '安卓'}, /*数据更改*/
                {value: obj.deviceUserStatisticsModelList[0].userNumber, name: '苹果'},
              ]
            }
          ],
          color: ['#2864fa', '#50b6ff']
        });
        myChart.on('mouseover', function (params) { /*添加鼠标事件*/
          obj.chooseEquipment.value = params.name;
          if (params.percent === 0)
            obj.chooseEquipment.data = '0.00';
          else
            obj.chooseEquipment.data = params.percent;
        });
      },

准备潜心研究前端一段时间,希望能有所成!

ECharts 中实现“选中显示内部提示信息”的功能,可以通过配置 `tooltip` 和 `emphasis` 状态下的样式与行为来达成。ECharts 提供了丰富的交互配置项,能够支持在用户交互(如鼠标悬停或点击)展示相关信息。 ### 配置 tooltip 显示提示信息 ECharts 的 `tooltip` 组件用于全局控制提示信息的显示。对于,可以将其配置为 `trigger: 'item'` 来基于数据项触发提示信息。例如: ```javascript tooltip: { show: true, trigger: 'item', formatter: '{b}: {c} ({d}%)' } ``` 该配置会使得提示信息在鼠标悬停于扇区显示,并通过 `{b}`、`{c}` 和 `{d}` 分别展示名称、数值和百分比[^3]。 ### 选中强调显示内部信息 为了在选中某个扇区显示内部提示信息,可以通过配置 `emphasis` 状态下的 `label` 和 `labelLine` 来实现: ```javascript series: [{ type: 'pie', radius: '50%', data: [ { value: 335, name: 'A' }, { value: 310, name: 'B' }, { value: 274, name: 'C' } ], label: { show: true, position: 'inside', formatter: '{b}: {d}%', color: '#fff' }, emphasis: { label: { show: true, fontSize: 20, fontWeight: 'bold' } } }] ``` 上述配置中,`label.position: 'inside'` 会将标签显示扇区内部;在 `emphasis` 状态下,可以进一步调整标签的样式以突出显示效果[^1]。 ### 结合交互事件实现动态提示 如果需要在点击某个扇区显示更详细的内部提示信息,可以通过监听 `click` 事件并动态更新 `tooltip` 的内容来实现。例如: ```javascript myChart.on('click', function(params) { myChart.setOption({ tooltip: { formatter: `名称: ${params.name}<br/>数值: ${params.value}<br/>百分比: ${params.percent}%` } }); }); ``` 通过这种方式,可以在用户点击扇区更新提示信息,展示更详细的内部数据。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值