情景代入👀
最近开发大屏时，用Echars实现各种统计图，然后设计师的图中有个这个样子的，如下图所示：
抛去中间的两个矩形，剩的就是一个统计图表。
然后，去ECharts Gallery中康康，有没有类似的。
然后找到了这种：
要是能够转个方向就好了。🤦♀️
demo地址：gallery.echartsjs.com/editor.html…
来康康怎么做😏
前置知识📢
xAxis:{position: 'top'} //让x轴在顶部
yAxis: { inverse:true} //让Y轴数据逆向
有了这个知识，这个图离我们要开发的图表就不远啦。
在上述demo中，有一个属性，在192行，写到：
type: 'category'
我们翻到Echarts官网中看到
type为category就是其显示成左右结构的，本以为有个属性可以转转向把它弄成上下的，结果没有😒
来动手做🙋♂️
1.改yAxis的type
而我们这个图是连续数据，所以第一步将yAxis的type属性改成
type:'value',
因为这个示例代码用数组对象的形式去表示y轴，在158-190行基本的含意就是定义左中右三部分的y轴，190-204行表示的是这三部分的y轴的公共部分属性定义。
变成了这个样子，不慌，我们继续。
在前置知识中，提到
xAxis:{position: 'top'} //让x轴在顶部
yAxis: { inverse:true} //让Y轴数据逆向
我们想把红色的统计图的x轴放到顶上去试试。
2.将x轴positon为top,y轴倒置
首先在145行后面添加代码，这行代码意思就是把第二个统计图的x轴放到顶上。
position:'top'
紧接着，删除194行的代码inverse:false,在190行添加代码inverse:true
图形是不是弄成了想要的样子
这句话的意思就是说，把第二个的统计图的y轴反向。
3.设置布局
在代码96行，定义了左中右布局，我们改成上中下的布局。将下述代码替换源代码96-115行。
grid: [{
top: '0%',
width: '100%',
height:'40%',
containLabel: false,
}, {
top: '40%',
width: '100%',
height:'20%',
}, {
top: '60%',
width: '100%',
height:'40%',
containLabel: false,
}].map(item => _.merge({
bottom
}, item)),
看到效果了，是不是很棒😃
还有个小问题，第一个统计图x是反的，我们将其倒置回来
4.将第一个统计图x轴倒置
将118行inverse改成false
5.设置数据，更改背景，颜色等细节
可以看到基本实现了设计图
bingo，还算不错🤗
完整的代码👼
// 使用了工具库lodash，cdn：https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.js
let data = {
female: {
name: '女性',
data: [{
value: 5,
label: '小于1岁'
}, {
value: 12,
label: '1 ～ 9 岁'
}, {
value: 10,
label: '10 ～ 19 岁'
}, {
value: 7,
label: '20 ～ 29 岁'
}, {
value: 32,
label: '30 ～ 39 岁'
}, {
value: 40,
label: '40 ～ 49 岁'
}, {
value: 28,
label: '50 ～ 59 岁'
}, {
value: 34,
label: '大于60岁'
}]
},
male: {
name: '男性',
data: [{
value: 5,
label: '小于1岁'
}, {
value: 19,
label: '1 ～ 9 岁'
}, {
value: 23,
label: '10 ～ 19 岁'
}, {
value: 43,
label: '20 ～ 29 岁'
}, {
value: 34,
label: '30 ～ 39 岁'
}, {
value: 53,
label: '40 ～ 49 岁'
}, {
value: 12,
label: '50 ～ 59 岁'
}, {
value: 34,
label: '大于60岁'
}]
}
};
let yAxisData = new Set();
let legendData = [];
_.forEach(data, (d) => {
legendData.push(d.name);
_.forEach(d.data, (item) => {
yAxisData.add(item.label);
});
});
let top = 50;
let bottom = 60;
yAxisData = [...yAxisData];
option = {
backgroundColor:'#08152d',
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
show:false,
left: 'center',
bottom: 24,
itemWidth: 15,
itemHeight: 11,
itemGap: 20,
borderRadius: 4,
textStyle: {
color: '#262C41',
fontSize: 14
},
data: legendData
},
grid: [{
top: '10%',
width: '80%',
height:'30%',
containLabel: false,
}, {
top: '40%',
width: '80%',
height:'20%',
}, {
bottom: '10%',
width: '80%',
height:'30%',
containLabel: false,
}].map(item => _.merge({
bottom
}, item)),
xAxis: [{
type: 'value',
inverse: false,
axisLabel: {
show: false
},
axisLine: {
show: true,
lineStyle:{
color:'#11497d',
width:2
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
}, {
gridIndex: 1,
show: true
}, {
gridIndex: 2,
type: 'value',
axisLabel: {
show: false
},
axisLine: {
show: true,
lineStyle:{
color:'#11497d',
width:2
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
position:'top'
}].map((item) => _.merge(item, {
axisLabel: {
color: '#949AA8',
margin: 0
},
splitLine: {
lineStyle: {
color: '#E0E0E0',
type: 'dashed'
}
},
})),
yAxis: [{
position: 'left',
axisLabel: {
show: true
},
axisLine: {
show: false
}
},
{
gridIndex: 1,
position: 'center',
axisLabel: {
align: 'center',
padding: [8, 0, 0, 0],
fontSize: 12,
color: `#262C41`
},
axisLine: {
show: false
}
},
{
gridIndex: 2,
position: 'left',
axisLabel: {
show: true
},
axisLine: {
show: false
},
inverse:true
}
].map((item) => {
return _.merge(item, {
type: 'value',
axisLine: {
lineStyle: {
color: '#E0E0E0',
},
},
axisTick: {
show: false,
},
data: yAxisData
});
}),
series: [{
name: _.get(data, 'male.name'),
label: {
position: 'left',
color:'rgba(0,0,0,0)'
},
itemStyle: {
color: '#2493ff',
barBorderRadius: [5, 5, 0, 0]
},
data: _.map(_.get(data, 'male.data'), d => d.value)
},
{
xAxisIndex: 2,
yAxisIndex: 2,
name: _.get(data, 'female.name'),
label: {
position: 'right',
color:'rgba(0,0,0,0)'
},
itemStyle: {
color: '#2493ff',
barBorderRadius: [0, 0, 5, 5]
},
data: _.map(_.get(data, 'female.data'), d => d.value)
}
].map(item => _.merge(item, {
type: 'bar',
barWidth: 8,
label: {
show: true,
fontFamily: 'Rubik-Medium',
fontSize: 50,
distance: 10
}
}))
};
