ECharts 示例——圆环图：数据标签详细设置

最新推荐文章于 2023-11-18 21:52:46 发布

原创最新推荐文章于 2023-11-18 21:52:46 发布 · 3.9w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #圆环图 #配置项 #数据标签 #label

ECharts 专栏收录该内容

8 篇文章

订阅专栏

本文指导如何使用ECharts 5.1.2创建圆环图，调整标题样式、数据标签格式、颜色同步、添加引导线，并启用提示框，实现专业数据可视化。

当前ECharts版本为5.1.2。

概述

按照其他可视化工具中圆环图的默认样式，对ECharts圆环图进行如下设置：

标题：设置标题位于圆环中央，修改标题字体大小和颜色
数据标签：修改字体大小、样式
数据标签：格式化标签文本，显示百分比
数据标签：设置标签颜色与饼块颜色相同（ECharts5之后标签默认颜色为灰色）
数据标签：显示引导线
提示框：显示提示框

配置项

option = {
    tooltip: {
        trigger: 'item'
    },
    title: {
        text:"股权结构",
        //标题位置
        left:"center",
        top:"center",
        //标题样式
        textStyle: {
          fontSize: 24,
          color:"#4169e1",
        }
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['30%', '50%'],
            //饼块起始角度
            startAngle: 90,
            avoidLabelOverlap: false,
            //设置数据标签引导线
            labelLine: {
                show: true
            },
            //格式化数据标签
            label:{
                fontSize:18,
                fontWeight:'bold',
                color:'inherit',
                formatter: '{b}\n{d}%',
            },
            data: [
                {value: 55, name: '张三'},
                {value: 20, name: '李四'},
                {value: 10, name: '王五'},
                {value: 10, name: '赵六'},
                {value: 5, name: '员工持股'},
            ]
        }
    ]};