Echarts人口金字塔

先看一下设计效果图，如下图；这里完全实现这个效果是不好实现的，个人觉得有两个难点，一个是Y轴的列标，还有就是渐变效果，尝试了一下没有成功，就打住了

然后看一下最终的效果图，虽然有点丑，理想和现实总是有差距的对吧，废话不多说，下面看看我实现的心路历程吧。

获取数据

数据来源也是自己获取的，在数据库表中，只存了用户的出生年月日，也就是说，我需要根据当前系统时间，和存在库表中的时间计算年龄，然后根据算出来的年龄和性别分组，得到count即可，以下是我使用mssql数据库的查询语句,需要查看的就是sql中的datediff()这个方法，百度一下很多说明的，没有什么难点，很简单理解的sql语句

SELECT sex,CASE when datediff(year,Birthday,getdate()) <= 19 then '20岁以内'when datediff(year,Birthday,getdate()) between 20 and 29 then '20-30'when datediff(year,Birthday,getdate()) between 30 and 39 then '30-40'when datediff(year,Birthday,getdate()) between 40 and 49 then '40-50'when datediff(year,Birthday,getdate()) between 50 and 59 then '50-60'when datediff(year,Birthday,getdate()) between 60 and 69 then '60-70'when datediff(year,Birthday,getdate()) between 70 and 79 then '70-80'when datediff(year,Birthday,getdate()) between 80 and 89 then '90-90'else '90岁以上' end as 年龄段,count(*) as 年龄段人数from User WHERE DeleteStatus = 0group byCASE when datediff(year,Birthday,getdate()) <= 19 then '20岁以内'when datediff(year,Birthday,getdate()) between 20 and 29 then '20-30'when datediff(year,Birthday,getdate()) between 30 and 39 then '30-40'when datediff(year,Birthday,getdate()) between 40 and 49 then '40-50'when datediff(year,Birthday,getdate()) between 50 and 59 then '50-60'when datediff(year,Birthday,getdate()) between 60 and 69 then '60-70'when datediff(year,Birthday,getdate()) between 70 and 79 then '70-80'when datediff(year,Birthday,getdate()) between 80 and 89 then '90-90'else '90岁以上' END,sex优化后
select t1.ageLevel,t1.sex,count(0) amount from (
select case when age between 20 and 29 then '20-30'
when age between 30 and 39 then '30-40'
when age between 40 and 49 then '40-50'
when age between 50 and 59 then '50-60'
when age between 60 and 69 then '60-70'
when age between 70 and 79 then '70-80'
when age between 80 and 89 then '80-90'
else '90以上' end
as ageLevel,sex from (
select datediff(year,Birthday,getdate()) age,* from User
) t
) t1
group by t1.ageLevel,t1.sex
order by t1.sex,t1.ageLevel

前端echarts实现

我结合网上查找的实例，和官网的api参数说明，凑出了最后的效果，话不多说，直接上代码

 ajaxFormData('@Url.Action("GetTalentsAgesGrade", "Home")', {},function (res) {let data = res.Data;for (var i = 0; i < data.length; i++) {gendarGrade.push(data[i].name)let temp = {name: "",value: ""};if (data[i].sex == "男") {temp.name = data[i].name;temp.value = -data[i].value;maleList.push(temp)} else {temp.name = data[i].name;temp.value = data[i].value;femaleList.push(temp)}list.push(data[i].value);}list.sort(function (num1, num2) {return num1 - num2;})let tempString = '1';maxValue = eval(list[list.length - 1]);//取最大值for (let i = 0; i <= maxValue.length - 1; i++) {tempString += '0';}// maxValue = Math.ceil(maxValue / 100) * 100;//向上取整（比如346 取400）maxValue = Math.ceil(maxValue / Number(tempString)) *
Number(tempString);//向上取整（比如346 取400）gendarGrade = Array.from(new Set(gendarGrade));//目录去重let mybarChart = echarts.init(document.getElementById('barContainer1'));let option = {title: {show: false,text: '人才男女比例结构图',},backgroundColor: '#fff',tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' |
'shadow'},formatter: function (data) {let ttt = data[0].name;for (let i = 0; i < data.length; i++) {ttt += '<br/>' + data[i].seriesName + '：' +
(Math.abs(data[i].value))+'人';}return ttt;}},legend: {//图例设置data: ['男士', '女士'],x: '2%',y:'5%',                             },color: ['#2575fc', '#ff1493'],//颜色设置、grid: {x: '10%',x2: '5%',y: '18%',y2:'14%'},xAxis: [{type: 'value',mix: function () {let aa =-1 *  maxValue;return aa;},max: maxValue,axisLabel: {formatter: function (a) {return Math.abs(a);},color: '#7d7d7d',fontWeight:'11'},axisTick: { show: false },axisLine: {lineStyle: {color:'#d8d8d8',}},splitLine: {show: true},splitNumber: 100,minInterval: 80,maxInterval: 200,itemStyle: {normal: {//这里设置了没有效果，本来是尝试做渐变效果的color: new echarts.graphic.LinearGradient(//右 / 下 / 左 / 上1, 0, 0, 0,[{ offset: 0, color: '#2575fc' },{ offset: 0.5, color: '#2c6af6' },{ offset: 1, color: '#6a11cb' }])}                                }}],yAxis: [{type: 'category',nameLocation: "middle",axisTick: { show: false },data: gendarGrade,axisLabel: {                                       color: '#1d1d1b',fontWeight: '11'},}],series: [{name: '男士',type: 'bar',stack: '总量',barWidth:'50%',data: maleList},{name: '女士',type: 'bar',stack: '总量',barWidth: '50%',data: femaleList}]};mybarChart.setOption(option);});

最后简单总结下前端实现的思路，其实就是一个柱状图的实现，让其分组结果左右显示，最重要的是左边，我让其value全部为负数了，这样就能显示在左边了，最后鼠标移入和图形显示为什么不是负数呢，建议看一下tooltip.formatter()和xAxis.formatter()这里的重写方法，echarts的官方说明文档是有详细说明的。最后比较坑的点是，如果左右最大值不一样的话，y轴就没在整个图的中间，这里我的解决办法，是xAxis.max设置的值是，这两组数据的最大值。

我做的还原度不是很好，但对没接触过echarts的我来说又是一次小成长，在学习的路上，我一直是捡贝壳的小男孩。

这篇文章是由这个博客网站作者发布的