Echarts饼图4.0(双层圆环图,数值正负显示不同)

代码:

const value = -0.25
option = {
    title: [{
      text: value * 100 + '%',
      left: '44%',
      top: '44%',
      textStyle: {
        fontSize: 36,
        fontWeight: '600',
        color: '#333',
        textAlign: 'center'
      }
    }],
    series: [
      { // 内层圆
        type: 'pie',
        radius: ['50%', '43%'],
        center: ['50%', '50%'],
        min: 0,
        max: 1,
        data: [{
          value: Math.floor((Math.abs(value) * 100)),
          itemStyle: {
            color: '#d0021b'
          },
          label: {
            show: false
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0
              }
            }
          },
          hoverAnimation: false
        },
        {
          label: {
            show: false
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0
              }
            }
          },
          value: 100 - Math.floor((Math.abs(value) * 100)),
          hoverAnimation: false,
          itemStyle: {
            color: '#e6e6e6',
            emphasis: { // 鼠标移入不高亮
              color: '#e6e6e6'
            }
          }
        }
        ]
      },
      { // 外层灰色
        type: 'pie',
        radius: ['80%', '72%'],
        center: ['50%', '50%'],
        data: [{
          label: {
            show: false
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0
              }
            }
          },
          value: 0,
          hoverAnimation: false,
          itemStyle: {
            color: '#e6e6e6',
            emphasis: { // 鼠标移入不高亮
              color: '#e6e6e6'
            }
          }
        }]
      }
    ]
  }
if (value < 0) {
    option.series[0].data[0].itemStyle = {
      borderColor: '#d0021b',
      color: '#fff'
    }
  } else {
    option.series[0].data[0].itemStyle = {
      color: '#d0021b'
    }
  }

最终的效果:

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您想要在 ECharts 饼图中选中一个区块时显示数值,可以使用 ECharts 提供的 `graphic` 组件来实现。具体来说,您可以在 `graphic` 中添加一个 `text` 元素,然后在选中区块时通过 `setOption` 方法来更新该元素的文本内容。下面是一个示例: ```javascript // 获取饼图实例 var chart = echarts.init(document.getElementById('main')); // 配置饼图数据 var option = { series: [{ type: 'pie', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], label: { show: false // 隐藏饼图中的标签 } }], graphic: { elements: [{ type: 'text', id: 'valueText', style: { text: '', font: '14px Microsoft Yahei', // 设置文本字体和大小 fill: '#333' // 设置文本颜色 }, left: 'center', top: 'center' }] } }; // 渲染饼图 chart.setOption(option); // 监听饼图的点击事件 chart.on('click', function(params) { if (params.componentType === 'series') { // 计算选中区块的数值 var value = option.series[0].data[params.dataIndex].value; // 更新文本内容 chart.setOption({ graphic: { elements: [{ id: 'valueText', style: { text: value } }] } }); } }); ``` 这个例子中,我们首先获取了 ECharts 饼图的实例,并配置了一些数据。然后,在 `graphic` 中添加了一个 `text` 元素,用于显示选中区块的数值。在饼图的点击事件中,我们计算了选中区块的数值,并通过 `setOption` 方法更新了 `text` 元素的文本内容。 希望这个回答能够帮到您!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值