博主介绍：《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();