ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

在echaerts饼图(环形图)内部自定义文字

2021-04-13 23:29:48  阅读:245  来源: 互联网

标签:副标题 自定义 color echaerts 环形 bold fontSize 圆环 center


需求是利用echarts的饼图之环形图在内部自定义文字。如下图:
在这里插入图片描述

    const option = {
        title: [
          { // 第一个圆环标题
            text: '省市公司', // 主标题
            textStyle: { // 主标题样式
              color: '#333',
              fontWeight: 'bold',
              fontSize: 14
            },
            left: '24%', // 定位到适合的位置
            top: '50%', // 定位到适合的位置
            subtext: 'xxx', // 副标题
            subtextStyle: { // 副标题样式
              color: 'red',
              fontSize: 13,
              fontWeight: 'bold'
            },
            textAlign: 'center' // 主、副标题水平居中显示
          },
          {// 第二个圆环标题
            text: '县公司',
            textStyle: {
              color: '#333',
              fontWeight: 'bold',
              fontSize: 14
            },
            left: '74%',
            top: '50%',
            subtext: 'xxx',
            subtextStyle: {
              color: 'red',
              fontSize: 13,
              fontWeight: 'bold'
            },
            textAlign: 'center'
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '3%',
          left: 'center'
        },
        series: [
          { // 第一个圆环
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['25%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'inner', // 数据会显示在图形上,'center':会显示在圆环的内部
              color: '#000',
              formatter: '{c}' // 显示的数据
            },
            data: [2,4,1], //
          },
          { // 第二个圆环
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['75%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'inner',
              color: '#000',
              formatter: '{c}'
            },
            data: [1,1,1],
          }
        ]
      };

上面使用了title属性,通过偏移来定位到需要显示的位置,设置主、副标题样式,这样就达到了我们的要求。除了title属性,graphic属性也可以通过设置偏移达到上述效果。graphic还可以设置图片等其它样式。

标签:副标题,自定义,color,echaerts,环形,bold,fontSize,圆环,center
来源: https://blog.csdn.net/chenlim87/article/details/115681445

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有