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

当前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: '员工持股'},
            ]
        }
    ]};