EChart在饼图/柱图内显示数值，添加百分号以及position属性的用法

[madfour]

如何显示数值: (添加label属性)

series: [
    {
        name: '稽查量',
        barWidth: 20,
        type: 'bar',
        stack: '模型',
        label: {
            show: true, 		//开启显示
            position: 'top', 	//在上方显示
            formatter: '{c}%',	//显示百分号
            textStyle: { 		//数值样式
                color: 'black',	//字体颜色
                fontSize: 10	//字体大小
            }
        }
    }
]

position 的其它属性值

• inside(自适应，柱状内部中央),top（柱状外的正上方）,bottom(柱状外的正下方)，left(柱状外的左边)，right(柱状外的右边)。

• 坐标[x,y]（以柱状的顶部为原点)）。

• insideTop(柱状内部靠顶部)，insideBottom(柱状内部靠下方)，insideRight(柱状内部靠右边)，insideLeft(柱状内部靠左边)。

---

/--分割线-/

---

官方饼图示例

series: [
    {
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [
            {value: 1048, name: '搜索引擎'},
            {value: 735, name: '直接访问'},
            {value: 580, name: '邮件营销'},
            {value: 484, name: '联盟广告'},
            {value: 300, name: '视频广告'}
        ],
        label:{	// 较官方示例添加的代码
            show:true,
            position: 'inside',
            formatter: '{b} : {c} ({d}%)'
        },
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }
]

效果图：

堆叠柱状图示例

series: [
    {
        name: '直接访问',
        type: 'bar',
        emphasis: {
            focus: 'series'
        },
        data: [320, 332, 301, 334, 390, 330, 320],
        label:{
            show:true
            position: 'inside'
        }
    },
]

效果图：