我正在参加「掘金·启航计划」
前情提要：
甲方客户为了迎接上级领导检查，需要弄出一套看起来高大上的大屏看板。客户内部讨论之后，决定采用下图所示的页面样式来展示
简单来说就是上面是公司名+公司Logo，左边和右边是产品图，中间是产品数量的柱折图，下面是产品工艺图。
要求柱折图是双柱双折，因为有两个产品。同时折线图和柱状图表示同一个数量。下方产品工艺图要求支持多图轮播。
作为一个前端菜鸟，后端辣鸡的底层程序员，我接到这个需求的一天内，甚至动了辞职的念头。但是身为程序员面对需求直接离职，说出去有点丢人。最终还是没有跑路。
需求分析：
根据客户给出的页面样式，我首先想到的是先利用DIV划分上中下三个区域，再在中区域内划分左中右三个区域。这样一来，就完美符合要求。但是，我尝试了半天以后，页面区域始终不能按照我预期的大小划分。正好我们公司前端框架用的是easyui，直接引用easyui的布局了，懒得自己写DIV了。 布局弄好之后，就是内容填写了。上左右的部分基本不用说了，就是DIV里塞个图片，加个文字，居中一下就好了。难点还是在中间的双柱线图和底下的图片轮播
双柱线图
第一次用echarts，完全不知道从哪写。所以找了一个最普通的柱折图开始拙劣的模仿。随便找一个echarts案例网站，我用的是MCChart (zhangmuchen.top)。 搜索柱折图以后，选一个看起来简单的案例就开始不停的删改里面的数据，弄懂了基本属性后，直接在案例网站测试双柱折图。测试完成后，直接复制到页面中。具体代码如下
option = {
tooltip: {},
grid: {
top: '8%',
left: '0%',
right: '5%',
bottom: '8%',
containLabel: true,
},
legend: {
itemGap: 50,
data: ['驻车' ,'拨叉','驻车总量','拨叉总量'],
textStyle: {
color: '#f9f9f9',
borderColor: 'white'
},
},
xAxis: [{
type: 'category',
boundaryGap: true,
axisLine: { //坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: '#f9f9f9'
},
},
axisLabel: { //坐标轴刻度标签的相关设置
textStyle: {
color: '#d1e6eb',
margin: 15,
},
},
axisTick: {
show: false,
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月' ],
}],
yAxis: [{
type: 'value',
min: 0,
// max: 140,
splitNumber: 7,
splitLine: {
show: true,
lineStyle: {
color: '#ffffff'
}
},
axisLine: {
show: false,
},
axisLabel: {
margin: 20,
textStyle: {
color: '#d1e6eb',
},
},
axisTick: {
show: false,
},
}],
series: [{
name: '驻车',
type: 'line',
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: "#28ffb3", // 线条颜色
},
borderColor: '#f0f'
},
label: {
show: false,
position: 'top',
},
itemStyle: {
normal: {
color: "#28ffb3"，
}
},
tooltip: {
show: false
},
data: zcData
}, {name: '拨叉',
type: 'line',
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: "red", // 线条颜色
},
borderColor: '#f0f'
},
label: {
show: false,
position: 'top',
textStyle: {
color: 'yellow',
}
},
itemStyle: {
normal: {
color: "yellow",
}
},
tooltip: {
show: false
},
data: bcData
},
{
name: '驻车总量',
type: 'bar',
barWidth: 15,
tooltip: {
show: false
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
}
},
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
return colorList[params.dataIndex];
}
}
},
data: zcData
},
{
name: '拨叉总量',
type: 'bar',
barWidth: 15,
show: false
},
label: {
show: true,
position: 'top',
textStyle: {
color: 'green',
}
},
itemStyle: {
normal: {
color:"green"
}
},
data: bcData
}]
};
option && myChart.setOption(option);
图片轮播
图片轮播我使用CSS3的@keyframes来实现的。借鉴的是CSDN中一位博主的思路(css实现轮播图_婷宝_知萌的博客-CSDN博客_css轮播图
在我将完成的看板部署给客户试看的时候，客户提出希望看板的背景是那种宇宙星空图，这样看起来更美观一点，我就继续在easyui中修改整体的背景图。然后我惊喜的发现，我无法通过“style=" background: url('') ;”这种方式去设置整体的背景图片。奇怪的是，我通过这种方式给每个区域添加背景图。 我查阅了大量easyui的文档，才发现原因是easyui划分的区域在初始渲染的时候，是有单独的背景色的。如果需要设置整体的背景色，那么需要将每个区域的背景色透明化。即在style中添加background:transparent;属性，这样整体背景图才不会被区域背景色所掩盖。
