echarts的环形图内部显示多行信息

最新推荐文章于 2023-07-19 10:47:12 发布

BUG小太阳

最新推荐文章于 2023-07-19 10:47:12 发布

阅读量1.6k

点赞数 3

分类专栏：功能 eCharts 文章标签：前端

本文链接：https://blog.csdn.net/ceshixiao/article/details/118341499

版权

需求：
1、样式：没有数据显示全灰色环
2、信息：环内部显示多行数据
方法：

利用graphic数组，设置多个对象，分别设置left和top进行定位

效果：
在这里插入图片描述

代码如下：

  graphic:[
            {
   
                type:'text',
                left:'center',//定位
                top:'35%',//定位
                style:{
   
                    text:'点击率',//这个就是定位的环内信息
                    fill:'rgba(0, 0, 0, 0.45)',//字体颜色
                }
            },//以下就是多个环内信息根据left和top分别定位排列
             {
   
                 type:'text',
                 left:'center',
                 top:'45%',
                 style:{
   
                     text:`${
     _this.getTextData(_this.value.clickRate)}%`,
                     fill:'rgba(0, 0, 0, 0.85)',
                 }
             },
             {
   
                 type:'text',
                 left:'30%',
                 top:'60%',
                 style:{
   
                     text:'环比',
                     fill:'rgba(0, 0, 0, 0.45)',
                 }
             },
             {
   
                 type:'text',
                 left:'45%',
                 top:'60%',
                 style