博主介绍:《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。
所有项目都配有从入门到精通的基础知识视频课程,免费
项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频;项目的界面和功能都可以定制,包安装运行!!!
在文章末尾可以获取联系方式
效果图
代码
index $(document).ready(function(){var html=$(".wrap ul").html()$(".wrap ul").append(html)var ls=$(".wrap li").length/2+1i=0ref = setInterval(function(){i++if(i==ls){i=1$(".wrap ul").css({marginTop:0})$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)}$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)},2400);var html2=$(".adduser ul").html()$(".adduser ul").append(html2)var ls2=$(".adduser li").length/2+1a=0ref = setInterval(function(){a++if(a==ls2){a=1$(".adduser ul").css({marginTop:0})$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)}$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)},4300);}) 页面加载中... 公司名称大数据可视化平台
多云转小雨2017-12-30- 生意参谋
1824
今日销售额1920
昨日销售额19%
环比增长
1824
今日销售额1920
昨日销售额19%
环比增长
消费占比行业区分比例 - 12581189
- 3912410
- 消费总金额
- 消费总笔数
- 新增会员信息
- 7天
- 15天
- 30天
今日新增会员列表- 1今日新增会员列表 24岁 - 女 - 广州
- 2今日新增会员列表 24岁 - 女 - 广州
- 3今日新增会员列表 24岁 - 女 - 广州
- 4今日新增会员列表 24岁 - 女 - 广州
实时消费记录1李东梁-支付宝支付-120元-XXX门店
2李东梁-支付宝支付-120元-XXX门店
3李东梁-支付宝支付-120元-XXX门店
4李东梁-支付宝支付-120元-XXX门店
5李东梁-支付宝支付-120元-XXX门店
6李东梁-支付宝支付-120元-XXX门店
$(document).ready(function(){myChart1.resize(); myChart2.resize();myChart3.resize();myChart6.resize(); myChart7.resize();myChart8.resize(); })window.addEventListener("resize", function () {myChart1.resize(); myChart2.resize();myChart3.resize();myChart6.resize(); myChart7.resize();myChart8.resize(); }); var v0=1000//总var v1=353//var v2=178//var v3=68//新增var myChart6 = echarts.init(document.getElementById('echarts6'));option6 = { series: [{type: 'pie',radius: ['70%', '80%'],color:'#0088cc',label: {normal: {position: 'center'}},data: [{value: v1,name: '新增会员',label: {normal: {formatter: v1 +'',textStyle: {fontSize:20,color:'#fff',}}}},{value: v0,name: '老会员',label: {normal: { formatter : function (params){return '占比'+Math.round( v1/v0*100)+ '%'},textStyle: {color: '#aaa',fontSize: 12}}},itemStyle: {normal: {color: 'rgba(255,255,255,.2)'},emphasis: {color: '#fff'}},}]}]};var myChart7 = echarts.init(document.getElementById('echarts7'));option7 = {series: [{type: 'pie',radius: ['70%', '80%'],color:'#fccb00',label: {normal: {position: 'center'}},data: [{value: v2,name: '新增领卡会员',label: {normal: {formatter: v2 +'',textStyle: {fontSize: 20,color:'#fff',}}}},{value: v0,name: '总领卡会员',label: {normal: { formatter : function (params){return '占比'+Math.round( v2/v0*100)+ '%'},textStyle: {color: '#aaa',fontSize: 12}}},itemStyle: {normal: {color: 'rgba(255,255,255,.2)'},emphasis: {color: '#fff'}},}]}]}; var myChart8 = echarts.init(document.getElementById('echarts8'));option8 = {series: [{type: 'pie',radius: ['70%', '80%'],color:'#62b62f',label: {normal: {position: 'center'}},data: [{value: v3,name: '女消费',label: {normal: {formatter: v3 +'',textStyle: {fontSize: 20,color:'#fff',}}}}, {value: v0,name: '男消费',label: {normal: { formatter : function (params){return '占比'+Math.round( v2/v0*100)+ '%'},textStyle: {color: '#aaa',fontSize: 12}}},itemStyle: {normal: {color: 'rgba(255,255,255,.2)'},emphasis: {color: '#fff'}},}]}]};setTimeout(function(){ myChart6.setOption(option6);myChart7.setOption(option7);myChart8.setOption(option8);}, 500); var myChart1 = echarts.init(document.getElementById('echarts1'));var v1=298//男消费var v2=523//女消费var v3=v1+v2//总消费 option1 = {//animation: false,series: [{type: 'pie',radius: ['70%', '80%'],color:'#0088cc',label: {normal: {position: 'center'}},data: [{value: v1,name: '平均单客价',label: {normal: {formatter: v3 +'',textStyle: {fontSize: 20,color:'#fff',}}}}, ]}]}; var myChart3 = echarts.init(document.getElementById('echarts3'));var v1=298//男消费var v2=523//女消费var v3=v1+v2//总消费 option2 = {//animation: false,series: [{type: 'pie',radius: ['70%', '80%'],color:'#fccb00',label: {normal: {position: 'center'}},data: [{value: v1,name: '男消费',label: {normal: {formatter: v1 +'',textStyle: {fontSize: 20,color:'#fff',}}}}, {value: v2,name: '女消费',label: {normal: { formatter : function (params){return '占比'+Math.round( v1/v3*100)+ '%'},textStyle: {color: '#aaa',fontSize: 12}}},itemStyle: {normal: {color: 'rgba(255,255,255,.2)'},emphasis: {color: '#fff'}},}]}]}; var myChart2 = echarts.init(document.getElementById('echarts2'));option3 = {series: [{type: 'pie',radius: ['70%', '80%'],color:'#62b62f',label: {normal: {position: 'center'}},data: [{value: v2,name: '女消费',label: {normal: {formatter: v2 +'',textStyle: {fontSize: 20,color:'#fff',}}}}, {value: v1,name: '男消费',label: {normal: { formatter : function (params){return '占比'+Math.round( v2/v3*100)+ '%'},textStyle: {color: '#aaa',fontSize: 12}}},itemStyle: {normal: {color: 'rgba(255,255,255,.2)'},emphasis: {color: '#fff'}},}]}]};setTimeout(function(){ myChart1.setOption(option1); myChart2.setOption(option2);myChart3.setOption(option3);}, 500); var myChart = echarts.init(document.getElementById('echarts4')); var plantCap = [{name: '工业',value: '222'}, {name: '农业',value: '115'}, {name: '互联网',value: '113'}, {name: '医疗',value: '95'}, {name: '文学',value: '92'},{name: '服装',value: '87'}];var datalist = [{offset: [56, 48],symbolSize: 110, // opacity: .95,color: 'rgba(73,188,247,.14)',}, {offset: [30, 70],symbolSize: 70, color: 'rgba(73,188,247,.14)'}, {offset: [0, 43],symbolSize: 60,color: 'rgba(73,188,247,.14)'}, {offset: [93, 30],symbolSize: 70, color: 'rgba(73,188,247,.14)'}, {offset: [26, 19],symbolSize: 65,color: 'rgba(73,188,247,.14)'}, {offset: [75, 75],symbolSize: 60, color: 'rgba(73,188,247,.14)'}];var datas = [];for (var i = 0; i < plantCap.length; i++) {var item = plantCap[i];var itemToStyle = datalist[i];datas.push({name: item.value + '\n' + item.name,value: itemToStyle.offset,symbolSize: itemToStyle.symbolSize,label: {normal: {textStyle: {fontSize: 14}}},itemStyle: {normal: { color: itemToStyle.color,opacity: itemToStyle.opacity }},})}option = {grid: {show: false,top: 10,bottom: 10},xAxis: [{gridIndex: 0,type: 'value',show: false,min: 0,max: 100,nameLocation: 'middle',nameGap: 5}],yAxis: [{gridIndex: 0,min: 0,show: false,max: 100,nameLocation: 'middle',nameGap: 30}],series: [{type: 'scatter',symbol: 'circle',symbolSize: 120,label: {normal: {show: true,formatter: '{b}',color: '#FFF',textStyle: {fontSize: '30'}},},itemStyle: {normal: {color: '#F30'}},data: datas}]}; myChart.setOption(option);$(document).ready(function(){ myChart.resize();})window.addEventListener("resize", function () { myChart.resize();});$('.counter').countUp();