主要借助 百度开发的开源的echarts.js插件,挺好用的。(自行查看官网)
https://www.echartsjs.com/examples/zh/index.html#chart-type-bar
在官网实例上部分没有在对应的图形上面显示数据,所以记录下:
主要是添加label来实现在图形上显示对于的数据 饼图显示数据: option1 = { title: { text: '学历统计', subtext: '', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: [] }, series: [ { name: '', type: 'pie', radius: '55%', center: ['50%', '60%'], label: {//在圆内显示具体数据数字 normal: { formatter: '{b}:{d}%', position: 'inside' } }, data: [], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; 柱形图: option = { title: { text: '人数统计' }, color: ['#749f83'], tooltip: {}, legend: { data: ['人数'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '人数', type: 'bar', label: { normal: { position: 'top', show: true } }, data: [] }] };