问题详细描述:制作echarts环形图,环形图中间默认显示总量,鼠标移入对应的部分,中间显示相对应的数量。

问题解决方案:利用标题和副标题展示默认总量,再在series设置鼠标移入移出展示的数量以及位置。

详细步骤如下:1.设置标题和副标题展示默认总量,设置位置以及样式。代码如下:

title: {
          text: '总任务数',
          subtext: 2,
          left: 'center',
          top: '45%',
          itemGap: 2,
          textStyle: { // 标题样式
            fontSize: 20, // 字号
            color: '#333' // 颜色
          },
          subtextStyle: { // 副标题样式
            color: '#333', // 字体颜色
            fontWeight: 700, // 字体加粗
            fontSize: 18  // 字号
          }
        },

2. 设置鼠标移入移出展示的数据量

series: [
          {
            name: '文件清理情况',
            type: 'pie',
            radius: ['40%', '60%'],   //  第一个为环形图的内半径 ,第二个值为环形图的外半径
            data: [
              {
                value: 2,
                name: '已完成',
                itemStyle: {
                  color: '#4466d2'
                },
                label: {
                  textStyle: {
                    color: '#4466d2'
                  }
                }
              },
              {
                value: 0,
                name: '未完成',
                itemStyle: {
                  color: '#fdbb24'
                },
                label: {
                  textStyle: {
                    color: '#fdbb24'
                  }
                }
              }
            ],
            label: {
              normal: {
                show: true,
                position: 'center',  // 设置居中
                formatter: function (data) { // 设置圆饼图中间文字排版
                  return data.name + '\n' + data.value  // 对应的名字和值
                },
                textStyle: {
                  fontSize: '0'
                }
              },
              emphasis: {
                show: true, // 文字至于中间时,这里需为true
                textStyle: { // 设置文字样式
                  fontSize: '18',
                  color: '#333',
                  fontWeight: 700
                }
              }
            }
          }
        ]

3. 实现效果

第二个问题:鼠标移入环形图会抖动

解决方案:

tooltip: {
          transitionDuration: 0
        },

 

Logo

前往低代码交流专区

更多推荐