因为到年底了，很多项目组都开始做年终汇报，年终汇报的展示形式最常见的就是看板。
样式美观，可以放到电视机或者大屏上，通过图表的形式进行展示，简单明了，通俗易懂。
直接上最终效果图：是一个展示客户量/流失率/订单情况/效率等的看板
上图看板中的图表都是用echarts来实现的。
该图中的面积图+柱状图就是用的echarts来实现的。
页面引入echarts文件
<script src="../script/jquery-1.8.3.js"></script><script type="text/javascript" src="../script/echarts.min.js"></script><scripttype="text/javascript"src="../script/echarts-liquidfill.min.js"></script>
上面的这三个文件都可以从网上搜索到，并保存到本地，尽可能不要直接引用线上地址，否则当网速等情况出现问题时，页面会报错。
为了能够实现不同分辨率的看板样式都能够展示全，则需要引入下面的一个自适应的js文件。
<script src="../script/common.js"></script>
common.js——自适应不同分辨率浏览器的函数
$(function () {screenSize('.pageBody');});function screenSize(editorDom) {let screenWidth = $(window).width();let screenHeight = $(window).height();let defWidth = 1920;let defHeight = 1080;let xScale = screenWidth / defWidth;let yScale = screenHeight / defHeight;$(editorDom).css('transform', 'scale(' + xScale + ', ' + yScale + ')');$(window).resize(function () {let screenWidth = $(window).width();let screenHeight = $(window).height();xScale = screenWidth / defWidth;yScale = screenHeight / defHeight;$(editorDom).css('transform', 'scale(' + xScale + ', ' + yScale + ')');});}
自适应不同分辨率浏览器的效果图1：
自适应不同分辨率浏览器的效果图2：
注意：要实现上面的自适应效果，则需要给外层dom添加pageBody的class类名才可以。
echarts渲染图表的公共封装函数
此时可以进行图表渲染函数的封装：
以下函数就是渲染 面积图/折线图/柱状图的方法。
入参如下：
1.dom：就是需要渲染的dom元素，可以通过指定唯一id的形式来获取dom2.xAxis：x轴的展示数据，格式就是一个数组，字符串或者数字形式的数组即可。3.series：这个就是图表展示的重点了，具体展示的是折线图.柱状图/面积图的数据了，此时可以传入数组，也可以传入对象。里面的type可以指定样式类型4.color：指定不同series中的样式颜色，是个数组。当然也可以在series中自定义当前类型的颜色。5.nameArr：如果y轴需要指定单位或者其他备注，则可以添加这个参数，格式是个数组。
function renderBar(dom, xAxis, series, color, nameArr) {var option = {color: color,legend: {left: 'right',textStyle: {color: '#fff',},},grid: {x: 60,x2: 40,y: 60,y2: 30,},xAxis: {type: 'category',data: xAxis,axisLabel: {textStyle: {color: '#666666',},},},yAxis: [{name: nameArr[0],nameTextStyle: {color: '#fff',},max: nameArr[0] && nameArr[0].indexOf('百分率') > -1 ? 100 : null,axisLabel: {textStyle: {color: '#fff',},formatter: (c) => {if (nameArr[0] && nameArr[0].indexOf('百分率') > -1) {return c + '%';} else {return c;}},},axisLine: {show: false,},axisTick: {show: false,},splitLine: {show: true,lineStyle: {type: 'solid',color: '#333',},},},{name: nameArr[1],nameTextStyle: {color: '#fff',},axisLabel: {textStyle: {color: '#666666',},},axisLine: {show: false,},axisTick: {show: false,},splitLine: {show: false,},},],series: series,};option && dom.setOption(option);}
html代码
<div class="boxWrap"><div class="box_tit">客户复购率/流失率</div><div class="barCls" id="barId1"></div></div>
css代码
.boxWrap{width:100%;border: 1px solid #555555;box-shadow: 0px 60px 60px 0px #2d2826 inset; margin-bottom:20px;box-sizing: border-box;height:300px;}.box_tit{color:#f89d19;position: relative;font-size:24px;padding-left:20px;line-height: 24px;font-weight: bold;margin:20px 0;}.box_tit::before{content:'';display: block;position: absolute;left:0;top:0;width: 4px;height: 24px;background: #f89d19;}.barCls{width:100%;height:230px;}
js代码——使用渲染函数的方法——面积图的使用方法
效果图如下：
var chartDom1 = document.getElementById('barId1');var myChart1 = echarts.init(chartDom1);let xAxis1 = ['-08','-09','-10','-11','-12'];let yAxis1 = [20，10，40，50，80，15];renderBar(myChart1,xAxis1,[{name: '复购率',type: 'line',//图表的类型：line就是折线图data: yAxis1,//图表的数据，跟xAsix的x轴要一一对应symbolSize: 10,//折线拐点的大小itemStyle: {//折线拐点的样式normal: {borderColor: '#f90',//折线拐点的边框颜色borderWidth: 2,//折线拐点的边框宽度lineStyle: {//折线的样式，可以更改折线的宽度，颜色等width: 3, // 0.1的线条是非常细的了,color: '#f90',},label: {//文字的样式show: true, //开启显示position: 'top',//文字放置的位置：top顶部 bottom:底部，left:左边,right：右边等，还有center：放置在中间位置formatter: '{c}%',//由于我这边是要展示百分数，给出的值是乘以100后的数值，因此需要通过formatter自定义添加一个%来展示textStyle: {//文字的样式：可以设置颜色，字号，字重等效果color: '#fff',fontSize: 16,},},},},areaStyle: {//设置面积图的颜色，通过 new echarts.graphic.LinearGradient(0,0,0,1,[xxx]);//可以设置渐变色的面积图，可以面积图渐变色的朝向，也可以设置面积图起始的颜色等。color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#f90' },{offset: 0.2, color: '#f90' },{offset: 1, color: 'transparent' },]),},},{name: '流失率',type: 'line',symbolSize: 10,data: yAxis2,itemStyle: {normal: {borderColor: '#227bff',borderWidth: 2,lineStyle: {width: 3, // 0.1的线条是非常细的了,color: '#4992FF',},label: {show: true, //开启显示position: 'top',formatter: '{c}%',textStyle: {color: '#fff',fontSize: 16,},},},},areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#4992FF' },{offset: 0.2, color: '#4992FF' },{offset: 1, color: 'transparent' },]),},},],'',['单位：百分率', '']);
js代码——使用渲染函数的方法——柱状图的使用方法
效果图如下：
var chartDom6 = document.getElementById('barId6');var myChart6 = echarts.init(chartDom6);let xAxis6 = ['-08','-09','-10','-11','-12'];let yAxis61 = [20，10，40，50，80，15];let yAxis62 = [120，100，40，25，80，105];renderBar(myChart6,xAxis6,[{name: '钣金',type: 'bar',//图表样式设置为柱状图// stack: 1,barWidth: 20,//柱状图的宽度 20data: yAxis61,//series设置的数据itemStyle: {normal: {/设置柱状图的颜色，通过 new echarts.graphic.LinearGradient(0,0,0,1,[xxx]);color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#f90' },{offset: 0.2, color: '#f90' },{offset: 1, color: 'transparent' },]),label: {show: true, //开启显示position: 'top',textStyle: {color: '#fff',fontSize: 16,},},},},},{name: 'CNC',type: 'bar',// stack: 1,barWidth: 20,data: yAxis62,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#4992FF' },{offset: 0.2, color: '#4992FF' },{offset: 1, color: 'transparent' },]),label: {show: true, //开启显示position: 'top',textStyle: {color: '#fff',fontSize: 16,},},},},},],'',['单位：个']);
完成！！！多多积累，多多收获！！！
