Echarts饼图展示车站客流占比图（车站客流分析）

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

第一步：准备基础数据

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

第二步：绘制基础饼图

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

 <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
    title: {
        text: '各车站客流量占比',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['车站1', '车站2', '车站3', '车站4', '车站5']
    },
    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)'
                }
            },
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

展示效果为：

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

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

我们需要对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用起来相当顺手。