安装官方教程，今天我们试一下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用起来相当顺手。