如何让echart环形,在中间位置显示数据

如何让echart环形,在中间位置显示数据

效果图:
在这里插入图片描述在显示环形的基础上添加以下代码:
在这里插入图片描述
也即是在图表配置项中添加。
注意:会发现并没有效果,这个只是写的是显示在环形的位置,并没有让数据显示;
还需要再data中进行设置,这个很关键
在这里插入图片描述
这个必须要写,不然的话,没有数据显示,显示的格式就是第二张图上的formatter中的内容。
完整的代码

 YearPatrolChartOption2 = () => {
    const sldata = [
      { name: "未完成计划", value: 20, icon: "roundRect" },
      {
        name: "已完成计划", value: 80, icon: "roundRect", label: {
          normal: {
            show: true
          }
        }
      }
    ];
    return {
        color: ["#1676fe", "#FAB20C ", "#FA6119", "#9F51F0"],
        tooltip: {
          trigger: "item",
          fommatter: "{a} : {b}",
          confine: true,//将此权限打开后tooltip将不再溢出
        },
        // 图列组件
        legend: {
          data: lgdata,
          // 设置图例的位置
          // left: "65%",
          fommatter: "{a} : {b}",
          bottom: "5%",
          left:"35%",
          orient: "vertical",
          itemWidth: 10,//图例图形的宽度
          itemHeight: 10,
        },
        series: {
          type: "pie",
          // 饼图的位置
          // center: ["35%", "50%"],
          // 饼图的大小
          radius: ["35%", "55%"],
          data: sldata,
          label: {
            normal: {
              show: false,
              formatter: "{d}%\n{b}",
              position: "center",
              lineHight: 30,
            },
          },
        }
    };
  }
  • 6
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Echarts 环形中同时在中间显示数据和在环上显示数据,可以通过在 `series` 中设置 `label` 和 `emphasis` 属性来实现。 以下是一个示例代码,可以将其放入 HTML 页面中查看效果: ```html <div id="chart" style="width: 600px; height: 400px;"></div> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script> <script> // 初始化 Echarts 实例 var myChart = echarts.init(document.getElementById('chart')); // 设置饼的类型为环形 var option = { title: { text: '环形示例', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', data: ['数据1', '数据2', '数据3', '数据4', '数据5'] }, series: [ { name: '数据名称', type: 'pie', radius: ['40%', '60%'], avoidLabelOverlap: false, label: { show: true, position: 'center', formatter: '{c}', fontSize: '24', fontWeight: 'bold' }, emphasis: { label: { show: true, formatter: '{b}:{c} ({d}%)', fontSize: '14', fontWeight: 'normal' } }, labelLine: { show: false }, data: [ {value: 335, name: '数据1'}, {value: 310, name: '数据2'}, {value: 234, name: '数据3'}, {value: 135, name: '数据4'}, {value: 1548, name: '数据5'} ] } ] }; // 使用刚指定的配置项和数据显示表。 myChart.setOption(option); </script> ``` 在上面的示例代码中,我们在 `series` 中设置了 `label` 和 `emphasis` 属性,用于在中间和环上显示数据。其中: - `label` 属性中设置了 `show`、`position`、`formatter`、`fontSize` 和 `fontWeight` 属性,用于在中间显示数据,其中 `formatter` 属性用于自定义显示数据格式。 - `emphasis` 属性中设置了 `label` 属性,用于在环上显示数据,其中 `formatter` 属性用于自定义显示数据格式。 通过这种方式,我们可以同时在中间和环上显示数据,以满足具体的展示需求。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值