echarts显示环形数据占比

//圆形echarts占比
    makeUpEcharts(el, makeUp_val) {
      let color = ['#EAF1FF', '#73A0FA'];//圆环两色
 
      let echartData = [{
          value: 100 - makeUp_val
        },
        {
          value: makeUp_val
        }
      ];
 
      let formatNumber = function(num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ',');
      }
      let total = echartData.reduce((a, b) => {
        return b.value + '%'
      }, 0);
 
      var option = {
 
        color: color,
        title: [{
          text: '{val|' + formatNumber(total) + '}',
          top: 'center',
          left: 'center',
          textStyle: {
            rich: {
              val: {
                fontSize: 16,
                fontWeight: 'bold',
                color: '#73A0FA',//圆环中心文字字体颜色
              }
            }
          }
        }],
        series: [{
          type: 'pie',
          radius: ['60%', '90%'], //控制圆环大小
          center: ['50%', '50%'], //控制圆环位置
          data: echartData,
          hoverAnimation: false,
          itemStyle: {
            normal: {
 
              borderWidth: 2
            }
          },
          labelLine: {
            normal: {
              length: 0,
              length2: 0,
              lineStyle: {
                color: '#e6e6e6'
              }
            }
          }
        }]
 
      };
      let myChart = echarts.init(this.$refs[el]);
      myChart.setOption(option)
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 ECharts 中,可以通过设置 `series` 中的 `label` 属性来在环形中间展示数据。具体方法如下: 1. 在 `series` 中添加环形的配置,例如: ```javascript series: [ { name: '访问来源', type: 'pie', radius: ['40%', '60%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] } ] ``` 2. 在 `label` 属性中设置 `show: true`,表示显示标签。 ```javascript label: { show: true, position: 'center', formatter: '{a|Total}\n{b|{c}}', rich: { a: { color: '#999', fontSize: 14, lineHeight: 20 }, b: { color: '#333', fontSize: 18, lineHeight: 25 } } }, ``` 其中 `formatter` 属性用来设置标签显示的内容,`rich` 属性用来设置标签内容的样式,例如颜色、字体大小等。在这个例子中,标签内容分为两行,第一行为 "Total",第二行为数据的和。 完整的代码如下: ```javascript option = { title: { text: '环形', subtext: '数据来源:XXX' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '60%'], avoidLabelOverlap: false, label: { show: true, position: 'center', formatter: '{a|Total}\n{b|{c}}', rich: { a: { color: '#999', fontSize: 14, lineHeight: 20 }, b: { color: '#333', fontSize: 18, lineHeight: 25 } } }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] } ] }; ``` ### 回答2: ECharts是一个用于数据可视化的JavaScript表库。它提供了丰富的表类型和灵活的配置选项,可以帮助开发者快速地创建各种各样的表。其中,环形(Pie Chart)是一种常用的表类型,它可以用来展示数据比情况。 在ECharts环形中间展示数据,通常可以通过设置label和tooltip的方式来实现。label是用于展示表上各个扇形区域的文本标签,而tooltip则用于在鼠标悬停时显示详细信息。 在ECharts中,可以使用series配置项来设置环形数据。每一个数据项可以包含多个字段,其中value字段表示数据的数值。可以利用这个字段来在环形中间展示数据。 为了将数据展示环形中间,可以设置label的position属性为'inner',表示文本标签位于扇形区域内部。同时,可以将formatter属性设置为'{c}',表示label的内容为数据项的值。这样,就可以实现在环形中间展示数据的效果。 除了设置label,还可以设置tooltip来显示详细信息。可以将tooltip的formatter属性设置为'{b} : {c}',显示数据项的名称和值。这样,在鼠标悬停时,就能在tooltip中显示扇形区域的名称和对应的数值。 通过以上的设置,就可以在ECharts环形中间展示数据。通过label和tooltip的配合使用,可以让用户清晰地了解每个扇形区域的数值和比情况。这样,就能更好地传达数据的信息,提升数据可视化的效果。 ### 回答3: 在Echarts环形中,可以通过在中间展示数据来提供更直观的信息呈现。一种常见的方式是在环形中间绘制一个中央文本框,用于显示关键数据。 首先,在Echarts的配置项中,我们可以通过设置series的label属性来实现中央文本框的绘制。具体来说,我们可以设置label属性的formatter参数,通过自定义格式化函数来确定中央文本框中要显示的内容。 其次,在自定义的格式化函数中,我们可以根据需求选择性地呈现不同的数据。例如,可以显示环形的总体数据,或者某个特定阶段的数据等。通过在格式化函数中处理数据,并将其作为返回值进行展示,我们可以根据实际需要灵活地展示不同的数据。 同时,我们还可以进一步美化中央文本框的样式,如调整文本的字体大小、颜色、位置等,以及添加背景色、边框等效果,从而使整个环形更加美观和易读。 总的来说,在Echarts环形中间展示数据是一种向用户展示关键信息的有效方式。通过合理地设置配置项和自定义格式化函数,我们可以灵活地展示环形中不同的数据,并为用户提供更加直观和清晰的形化呈现。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值