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用起来相当顺手。

总结

以上是生活随笔为你收集整理的chart.js 饼图显示百分比_Echarts饼图展示车站客流占比图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。