chart.js 饼图显示百分比_Echarts饼图展示车站客流占比图

安装官方教程，今天我们试一下Echarts绘制饼图

第一步：准备基础数据

用随机数模拟下5个车站的进出站总人数，具体如下表：

车站进出站总人数

第二步：绘制基础饼图

按教程示例，用Echarts绘制基础饼图，其代码主要为：

展示效果为：

基础数据饼图

基础配置中，在查看每一块占比的时候，需要用鼠标选中后才可查看数量及具体百分比，不够直接，那么需要调整配置，让比例直接显示

第三步：调整配置项，让比例数据直接展示

我们需要对Series的配置进行调整，调整后的具体代码为

    series: [        {            name: '访问来源',            type: 'pie',            radius: '55%',            center: ['50%', '60%'],            data: [                {value: 1116, name: '车站1'},                {value: 2100, name: '车站2'},                {value: 861, name: '车站3'},                {value: 729, name: '车站4'},                {value: 596, name: '车站5'}            ],            emphasis: {                itemStyle: {                    shadowBlur: 10,                    shadowOffsetX: 0,                    shadowColor: 'rgba(0, 0, 0, 0.5)'                }            },label : {normal : {formatter: '{b} {c}: ({d}%)',textStyle : {fontWeight : 'normal',fontSize : 15}}},        }    ]

主要新增了label项，那么展示的效果怎么样呢，请看：

调整后的饼图

很明显，调整后的饼图，可以直观看出进出站人数、比例等信息，简单配置即可实现其效果，Echarts用起来相当顺手。