因为到年底了,很多项目组都开始做年终汇报,年终汇报的展示形式最常见的就是看板。
样式美观,可以放到电视机或者大屏上,通过图表的形式进行展示,简单明了,通俗易懂。
直接上最终效果图:是一个展示客户量/流失率/订单情况/效率等的看板
上图看板中的图表都是用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,},},},},},],'',['单位:个']);
完成!!!多多积累,多多收获!!!