html：
<!-- 头部 --> <header> <img src="./img/图层 16.png" alt=""> <h1>运营分析数据大屏</h1> </header> <!-- 内容区 --> <div class="content"> <!-- 模板一 --> <div class="first"> <!-- 上部 --> <div class="top"></div> <!-- 下部 --> <div class="bottom"> <l>线下营业额据统计</l> <!-- 比例 --> <div class="ratio"> <!-- 左 --> <div class="left"> <!-- 左 --> <div class="lefts"> <p class="tops">数据分析人数</p> <b class="bottoms"><span>1234</span><span>人</span></b> </div> <!-- 右 --> <div class="rights"> <p class="tops">营销额</p> <b class="bottoms"><span>123,345.00</span><span>元</span></b> </div> </div> <!-- 右 --> <div class="right"> <!-- 左 --> <div class="leftd"> <div class="xr"></div> <p><span class="zb">占比</span><span class="sz">12</span><span class="bfb">%</span></p> <div class="rs"> <span class="zhu"><span class="sz">1234</span><span class="ren">人</span></span> <span class="sj">数据分析</span> </div> </div> <!-- 右 --> <div class="rightd"> <div class="xrs"></div> <p><span class="zb">占比</span><span class="sz">88</span><span class="bfb">%</span></p> <div class="rs"> <span class="zhu"><span class="sz">6234</span><span class="ren">人</span></span> <span class="sj">数据分析</span> </div> </div> </div> </div> <!-- 数据 --> <div class="data"> <!-- 左 --> <div class="left"> <!-- 上 --> <div class="up"> <div class="tu"> <img src="./img/1.svg" alt=""> </div> <div class="zi"> <p class="zr">昨日运营数据分析</p> <p class="jq"><b>1,234.00</b><span>元</span></p> </div> </div> <!-- 下 --> <div class="below"> <div class="tu"> <img src="./img/3.svg" alt=""> </div> <div class="zi"> <p class="zr">昨日运营数据分析</p> <p class="jq"><b>1,234.00</b><span>元</span></p> </div> </div> </div> <!-- 右 --> <div class="right"> <!-- 上 --> <div class="up"> <div class="tu"> <img src="./img/2.svg" alt=""> </div> <div class="zi"> <p class="zr">昨日运营数据分析</p> <p class="jq"><b>1,234.00</b><span>元</span></p> </div> </div> <!-- 下 --> <div class="below"> <div class="tu"> <img src="./img/4.svg" alt=""> </div> <div class="zi"> <p class="zr">昨日运营数据分析</p> <p class="jq"><b>1,234.00</b><span>元</span></p> </div> </div> </div> </div> <!-- 图 --> <div class="tus"> </div> </div> </div> <!-- 模板二 --> <div class="towss"> <!-- 上部 --> <div class="topss"> <l>营业额数据统计</l> <!-- 数字 --> <div class="number"> <!-- 左 --> <div class="left"> <!-- 上 --> <div class="top"> <p class="tops"><span class="szs">3381.2</span><span class="wy">万元</span></p> </div> <!-- 下 --> <div class="bottom"> <o>今年业绩指标</o> <div class="zb"> <span class="fp">1</span> <span class="fp">2</span> <span class="fp">3</span> <span class="fp">4</span> <span class="fp">.</span> <span class="fp">4</span> <b class="wyh">万元</b> <b class="wyh">昨日</b> <b class="wyh">567</b> <b class="wyh">万</b> <b class="bfb">25.6</b> <b class="bfb">%</b> <b class="bfb"><img src="./img/向上.svg" alt=""></b> </div> </div> </div> <!-- 右 --> <div class="right"> <div class="queer"> <div class="canvas"></div> <div class="odds"> <p><span>75</span><span>%</span></p> </div> <div class="nianxian"> <span>当年完成率</span> </div> </div> <div class="precedence"> <div class="canvas"></div> <div class="odds"> <p><span>55</span><span>%</span></p> </div> <div class="nianxian"> <span>今日完成率</span> </div> </div> </div> </div> </div> <!-- 中部 --> <div class="centress"> <div class="heng"></div> <div class="yuan"> <div class="yanLeft"></div> <div class="yanRight"></div> </div> </div> <!-- 下部 --> <div class="bottomss"> <div class="head"> <l>趋势分析</l> <div class="cut"> <span>周</span> <span>月</span> <span>年</span> </div> </div> <!-- 内容 --> <div class="contentss"> </div> </div> </div> <!-- 模板三 --> <div class="threess"> <!-- 上部 --> <div class="topsss"> <!-- 标题 --> <div class="bt"> <div class="left"> <l>营业数额</l> </div> <div class="date"> <div class="dates"> <span>周</span> <span>月</span> <span>年</span> </div> </div> </div> <!-- 数据 --> <div class="se"> <!-- 订单 --> <div class="dd"> <!-- 左部 --> <div class="left_part"> <l>今年业绩指标</l> <div class="performance"> </div> </div> <!-- 右部 --> <div class="dindan"> <div class="ddl"></div> <div class="rs"> <span class="sj">订单量</span> <span class="zhu"><span class="sz">1234</span></span> </div> </div> </div> <!-- 业绩 --> <div class="performances"> <!-- 左部 --> <div class="left_section"> <l>今年业绩指标</l> <div class="indicator"> </div> </div> <!-- 右部 --> <div class="dindans"> <div class="jye"></div> <div class="rs"> <span class="sj">销售额</span> <span class="zhu"><span class="sz">1234</span></span> </div> </div> </div> </div> </div> <!-- 中部 --> <div class="centresss"> <!-- 占比分析 --> <div class="analyse"> <div class="left"> <l>占比分析</l> </div> <div class="date"> <div class="dates"> <span>周</span> <span>月</span> <span>年</span> </div> </div> </div> <!-- 数据 --> <div class="information"> <div class="sc"></div> <!-- 分析 --> <div class="analysis"> <span class="sz"></span> <span class="sj">数据分析</span> </div> </div> </div> <!-- 下部 --> <div class="bottomsss"> <!-- 线上营业额统计 --> <div class="on_line"> <div class="left"> <l>线上营业额统计</l> </div> <div class="date"> <div class="dates"> <span>周</span> <span>月</span> <span>年</span> </div> </div> </div> <!-- 今日 --> <div class="today"> <!-- 文字 --> <div class="wenzi"> </div> <!-- 表格 --> <div class="table"> <div class="sheet"></div> <div class="wd"> <p><span></span><span>%</span></p> </div> </div> </div> <!-- 图表 --> <div class="diagram"> <!-- 上 --> <div class="ups"> <div class="tusl"> <img src="./img/2.svg" alt=""> </div> <div class="zis"> <p class="zrs">昨日运营数据分析</p> <p class="jqs"><b>1,234.00</b><span>元</span></p> </div> </div> <!-- 下 --> <div class="belows"> <div class="tusl"> <img src="./img/4.svg" alt=""> </div> <div class="zis"> <p class="zrs">昨日运营数据分析</p> <p class="jqs"><b>1,234.00</b><span>元</span></p> </div> </div> </div> </div> </div> </div>
css:
* { padding: 0; margin: 0 auto; } html { background-color: #04051A; } body { width: 1920px; height: 1080px; background-color: #20263E; } header { width: 100%; height: 75px; position: relative; border: 0.1px solid #20263E; } header img { width: 100%; height: 75px; } header h1 { position: absolute; color: #00FFFB; font-size: 35px; width: 398px; height: 52px; display: flex; align-items: center; justify-content: center; left: 50%; top: 50%; margin-left: -199px; margin-top: -26px; } .content { width: 100%; height: 930px; margin-bottom: 30px; margin-top: 40px; display: flex; justify-content: space-between; } .content .first { width: 25%; height: 930px; margin-left: 2%; } .content .first .top { width: 100%; height: 300px; margin-bottom: 20px; background-color: #353654; } .content .first .bottom { width: 100%; height: 600px; margin-top: 20px; background-color: #353654; } .content .first .bottom l { margin-left: 5%; height: 50px; width: 40%; display: flex; align-items: center; font-size: 18px; color: #fff; } .content .first .bottom .ratio { width: 100%; height: 100px; display: flex; justify-content: space-between; } .content .first .bottom .ratio .left { width: 42%; margin-left: 7%; margin-right: 1%; height: 100px; display: flex; justify-content: space-between; align-items: center; line-height: 30px; } .content .first .bottom .ratio .left .lefts .tops { color: #fff; font-size: 15px; } .content .first .bottom .ratio .left .lefts .bottoms { color: #00FFFB; font-size: 13px; } .content .first .bottom .ratio .left .rights .tops { color: #fff; font-size: 15px; } .content .first .bottom .ratio .left .rights .bottoms { color: yellow; font-size: 13px; } .content .first .bottom .ratio .right { width: 42%; margin-left: 1%; margin-right: 7%; height: 100px; background-color: yellow; } .below { width: 100%; } .up { width: 100%; height: 45px; margin-bottom: 10px; background-color: #3B3D64; display: flex; align-items: center; } .tu { width: 20%; height: 35px; margin-left: 8%; } .tu img { width: 100%; height: 35px; border-radius: 100%; background-color: #30314C; } .zi { width: 58%; height: 35px; margin-left: 5%; } .zi .zr { font-size: 14px; color: #fff; } .data { width: 100%; height: 100px; margin-top: 15px; display: flex; justify-content: space-between; } .data .left { width: 42%; margin-left: 7%; margin-right: 1%; height: 100px; } .data .left .jq { color: #179BEA; } .data .left .jq span { margin-left: 5%; font-size: 13px; } .data .left .jq b { font-size: 15px; } .data .below { width: 100%; height: 45px; margin-bottom: 10px; background-color: #3B3D64; display: flex; align-items: center; } .data .below .jq { color: #FFA345; } .data .below .jq span { margin-left: 5%; font-size: 13px; } .data .below .jq b { font-size: 15px; } .data .right { width: 42%; margin-left: 1%; margin-right: 7%; height: 100px; } .data .right .jq { color: #179BEA; } .data .right .jq span { margin-left: 5%; font-size: 13px; } .data .right .jq b { font-size: 15px; } .data .below { width: 100%; height: 45px; margin-bottom: 10px; background-color: #3B3D64; display: flex; align-items: center; } .data .below .jq { color: #FFA345; } .data .below .jq span { margin-left: 5%; font-size: 13px; } .data .below .jq b { font-size: 15px; } .towss { width: 44%; height: 930px; } .towss .topss { width: 100%; height: 300px; margin-bottom: 20px; } .towss .topss l { width: 50%; height: 50px; color: #fff; font-size: 20px; display: flex; align-items: center; margin-left: 5%; } .towss .topss .number { width: 100%; height: 230px; display: flex; justify-content: space-between; } .towss .topss .number .left { width: 50%; height: 230px; } .towss .topss .number .left .top { width: 95%; height: 100px; margin-left: 5%; } .towss .topss .number .left .top .tops { width: 96%; height: 100px; margin-left: 4%; color: #00FFFB; } .towss .topss .number .left .top .tops .sz { height: 100px; font-size: 80px; } .towss .topss .number .left .top .tops .wy { font-size: 14px; padding-left: 2%; } .towss .topss .number .left .bottom { width: 100%; height: 70px; margin-top: 60px; } .towss .topss .number .left .bottom o { width: 50%; height: 30px; color: #fff; font-size: 14px; display: flex; align-items: center; margin-left: 10%; } .towss .topss .number .left .bottom .zb { display: flex; width: 90%; height: 40px; margin-left: 10%; display: flex; align-items: center; } .towss .topss .number .left .bottom .fp { width: 6%; height: 35px; margin: 0px 3px 0px 3px; font-size: 25px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 5px; background-image: linear-gradient(#F28D25, #E05B5C); } .towss .topss .number .left .bottom .wyh { height: 35px; display: flex; align-items: end; margin: 0px 3px 0px 3px; color: #fff; font-size: 16px; } .towss .topss .number .left .bottom .bfb { color: #00FFFB; font-size: 16px; display: flex; align-items: end; height: 35px; } .towss .topss .number .left .bottom .bfb img { width: auto; height: 20px; padding-bottom: 5px; } .towss .topss .number .right { width: 48%; height: 230px; background-color: #FFA345; } .towss .centress { width: 100%; height: 180px; margin-top: 20px; margin-bottom: 20px; background-color: #353654; } .towss .bottomss { width: 100%; height: 400px; margin-top: 20px; background-color: #353654; } .threess { width: 25%; margin-right: 2%; height: 930px; } .threess .topsss { width: 100%; height: 300px; margin-bottom: 20px; background-color: #353654; } .threess .centresss { width: 100%; height: 350px; margin-top: 20px; margin-bottom: 20px; background-color: #353654; } .threess .bottomsss { width: 100%; height: 230px; margin-top: 20px; background-color: #353654; }
js:
$.ajax({ type: "GET", url: "json/index.json", data: {}, success: function (res) { // console.log(res); if (res != null) { fn(res[0].first); tx(res[1]); xr(res[0].first); dindan(res[2]) xianxhang(); shuju(); wcl(); yuan(); pinpai(); qsfx(); } else { alert('请求失败'); } } }) let names = []; let datas = []; let yf = []; let fz = []; let zs = []; let sp = []; let fzs = []; let dx = [17050, 21900, 17900, 21100, 18910]; function fn(data) { // 月份 yf = []; // 服装 fz = []; fzs = []; // 装饰 zs = []; // 食品 sp = []; names = []; value = []; for (let i = 0; i < data[0].data.length; i++) { yf[yf.length] = data[0].data[i].name; } for (let a = 0; a < data.length; a++) { for (let j = 0; j < data[a].data.length; j++) { let obj = { names: data[a].data[j].name, value: data[a].data[j].value, } fz.push(obj); } } for (let q = 5; q < 10; q++) { zs[zs.length] = fz[q]; } for (let q = 10; q < 15; q++) { sp[sp.length] = fz[q]; } for (let q = 0; q < 5; q++) { fzs[fzs.length] = fz[q]; } box(); } let COLORS = ['#61a0a8', '#d48265', '#91c7ae', '#749f83']; function box() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('top')[0]); // 指定图表的配置项和数据 var option = { title: { show: true, text: '营业额数据统计', textStyle: { color: '#fff' }, textAlign: "left", textVerticalAlign: "top", padding: [15, 0, 0, 20] }, tooltip: { top: 0, feature: { //点击图表可直接将柱形图与折线图进行切换 magicType: { show: true, type: ['line', 'bar'] }, } }, legend: { top: '30px', right: '70px', textStyle: { color: '#fff' } }, xAxis: { data: yf, splitLine: { show: false }, axisLine: { show: true, lineStyle: { color: "#fff" } }, axisTick: { show: false } }, yAxis: { splitLine: { show: false }, axisLine: { show: true, lineStyle: { color: "#fff" } }, axisTick: { show: true } }, series: [{ itemStyle: { color: '#00BAFF' }, name: '服装', type: 'bar', stack: 'Ad', emphasis: { focus: 'series' }, data: fzs }, { itemStyle: { color: '#ADDBEA' }, name: '装饰', type: 'bar', stack: 'Ad', emphasis: { focus: 'series' }, data: zs }, { itemStyle: { color: '#41DDEA' }, name: '食品', type: 'bar', stack: 'Ad', emphasis: { focus: 'series' }, data: sp }, { type: 'line', data: dx, emphasis: { focus: 'series' }, } ] } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } let sj = [100] function tx(data) { let a = document.getElementsByClassName('ratio')[0]; let b = a.getElementsByTagName('span')[0]; let c = a.getElementsByTagName('span')[2]; b.innerHTML = data.value; c.innerHTML = data.mave; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('xr')[0]); var option = { series: [{ type: 'pie', hoverAnimation: false, radius: ['90%', '82%'], labelLine: { show: false }, itemStyle: { color: "#04F4F6" }, data: sj }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); var myCharts = echarts.init(document.getElementsByClassName('xrs')[0]); var options = { series: [{ type: 'pie', hoverAnimation: false, radius: ['90%', '82%'], labelLine: { show: false }, itemStyle: { color: "#04F4F6" }, data: sj }] }; // 使用刚指定的配置项和数据显示图表。 myCharts.setOption(options); } function xr(data) { console.log(document.getElementsByClassName('tus')[0]); yf = []; for (let i = 0; i < data[0].data.length; i++) { yf[yf.length] = data[0].data[i].name; } // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('tus')[0]); option = { title: { text: '单位(单)', textStyle: { color: "#fff" }, top: '20px', left: '10px' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['收益', '支出'], top: '20px', right: '70px', textStyle: { color: '#fff' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [{ data: yf, axisLine: { show: true, lineStyle: { color: "#fff" } }, splitLine: { show: true }, boundaryGap: false, type: 'category' }], yAxis: [{ axisLine: { show: true, lineStyle: { color: "#fff" } }, splitLine: { show: true }, type: 'value' }], series: [{ itemStyle: { color: '#FF8538' }, name: '收益', type: 'line', // 同一层级 // stack: 'Total', // 头部圆化 smooth: true, // 头部边框 lineStyle: { width: 2 }, // 头部点 showSymbol: false, areaStyle: { // 背景透明度 opacity: 0.5, }, // 隐藏 emphasis: { focus: 'series' }, data: [140, 232, 101, 264, 90, 340, 250] }, { itemStyle: { color: '#20BBF0' }, name: '支出', type: 'line', // 同一层级 // stack: 'Total', // 头部圆化 smooth: true, // 头部边框 lineStyle: { width: 2 }, // 头部点 showSymbol: false, areaStyle: { // 背景透明度 opacity: 0.5, }, // 隐藏 emphasis: { focus: 'series' }, data: [240, 22, 201, 24, 190, 30, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } // 开始的值，结束的值，在那个盒子，几秒跳一次 // 数字跳动 addNumber(3456.5, 9981, 'szs'); function addNumber(start, end, id) { var o = document.getElementsByClassName('szs')[0]; var i = start; var Interval; if (i == end) { i = 3456.5; } else { if (i < end) { Interval = setInterval(function () { i += 1; if (i > end) { clearInterval(Interval); o.innerHTML = end.toLocaleString(); i = 0; } else { o.innerHTML = i.toLocaleString(); } }, 60); } } } // 名字 let monicker = []; // 存周，月，年 let week = []; let month = []; let year = []; let monickers = []; let weeks = []; let months = []; let years = []; function dindan(data) { monicker = []; // 存周，月，年 week = []; month = []; year = []; monickers = []; weeks = []; months = []; years = []; console.log(data.data[1].data[0].data); // 一个两个对象，两个三个对象，三个数组包对象数据 for (let i = 0; i < data.data[0].data[0].data.length; i++) { week[week.length] = data.data[0].data[0].data[i]; } for (let i = 0; i < data.data[1].data[0].data[0].data.length; i++) { weeks[weeks.length] = data.data[1].data[0].data[0].data[i]; } for (let i = 0; i < data.data[0].data[0].data.length; i++) { month[month.length] = data.data[0].data[1].data[i]; } for (let i = 0; i < data.data[1].data[0].data[0].data.length; i++) { months[months.length] = data.data[1].data[0].data[1].data[i]; } for (let i = 0; i < data.data[0].data[2].data.length; i++) { year[year.length] = data.data[0].data[2].data[i]; } for (let i = 0; i < data.data[1].data[0].data[2].data.length; i++) { years[years.length] = data.data[1].data[0].data[2].data[i]; } weekFirst(); information(); fenxi(); message(); qushi(); let jt = document.getElementsByClassName('dates')[0]; jt.addEventListener('click', function (e) { let nr = e.target; if (nr.innerHTML == '周') { weekFirst(); changliang(0); } else if (nr.innerHTML == '月') { monthFirst(); changliang(1); } else if (nr.innerHTML == '年') { yearFirst(); changliang(2); } }) } let sjs = [0, 0, 0, 0, 100, 20, 0, 0, 0, 0, 0, 0, 0]; function weekFirst() { changliang(0); changs(0); liangs(0); lianges(0); let str = ''; let ddls = ''; let yjzb = ''; let yyes = ''; console.log(document.getElementsByClassName('sz')); str = `<div class="zb"> <span class="fp">${week[0].wan}</span> <span class="fp">${week[0].tu}</span> <span class="fp">${week[0].sui}</span> <span class="fp">${week[0].fo}</span> <span class="fp">${week[0].fai}</span> <span class="fp">${week[0].sks}</span> <b class="wyh">万元</b> <b class="bfb">${week[1].value}</b> <b class="bfb">%</b> <b class="bfb"><img src="./img/向上.svg" alt=""></b> </div>`; $('.performance').html(str); ddls = `<span>${week[2].value}</span>`; document.getElementsByClassName('sz')[4].innerHTML = ddls; yjzb = `<div class="zb"> <span class="fp">${weeks[0].wan}</span> <span class="fp">${weeks[0].tu}</span> <span class="fp">${weeks[0].sui}</span> <span class="fp">${weeks[0].fo}</span> <span class="fp">${weeks[0].fai}</span> <span class="fp">${weeks[0].sks}</span> <b class="wyh">万元</b> <b class="bfb">${weeks[1].value}</b> <b class="bfb">%</b> <b class="bfb"><img src="./img/向上.svg" alt=""></b> </div>`; $('.indicator').html(yjzb); yyes = `<span>${weeks[2].value}</span>`; document.getElementsByClassName('sz')[5].innerHTML = yyes; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('ddl')[0]); var option = { series: [{ type: 'pie', hoverAnimation: false, radius: ['90%', '79%'], labelLine: { show: false }, data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 30, 0, 0, 0] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); var myCharts = echarts.init(document.getElementsByClassName('jye')[0]); var options = { series: [{ type: 'pie', hoverAnimation: false, radius: ['90%', '79%'], labelLine: { show: false }, data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 60, 0, 0, 0] }] }; // 使用刚指定的配置项和数据显示图表。 myCharts.setOption(options); } function monthFirst() { let str = ''; let ddls = ''; let yjzb = ''; let yyes = ''; console.log(document.getElementsByClassName('sz')); str = `<div class="zb"> <span class="fp">${month[0].wan}</span> <span class="fp">${month[0].tu}</span> <span class="fp">${month[0].sui}</span> <span class="fp">${month[0].fo}</span> <span class="fp">${month[0].fai}</span> <span class="fp">${month[0].sks}</span> <b class="wyh">万元</b> <b class="bfb">${month[1].value}</b> <b class="bfb">%</b> <b class="bfb"><img src="./img/向上.svg" alt=""></b> </div>`; $('.performance').html(str); ddls = `<span>${month[2].value}</span>`; document.getElementsByClassName('sz')[4].innerHTML = ddls; yjzb = `<div class="zb"> <span class="fp">${months[0].wan}</span> <span class="fp">${months[0].tu}</span> <span class="fp">${months[0].sui}</span> <span class="fp">${months[0].fo}</span> <span class="fp">${months[0].fai}</span> <span class="fp">${months[0].sks}</span> <b class="wyh">万元</b> <b class="bfb">${months[1].value}</b> <b class="bfb">%</b> <b class="bfb"><img src="./img/向上.svg" alt=""></b> </div>`; $('.indicator').html(yjzb); yyes = `<span>${months[2].value}</span>`; document.getElementsByClassName('sz')[5].innerHTML = yyes; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('ddl')[0]); var option = { series: [{ type: 'pie', hoverAnimation: false, radius: ['90%', '79%'], labelLine: { show: false }, data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 30, 0, 0, 0] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); var myCharts = echarts.init(document.getElementsByClassName('jye')[0]); var options = { series: [{ type: 'pie', hoverAnimation: false, radius: ['90%', '79%'], labelLine: { show: false }, data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 60, 0, 0, 0] }] }; // 使用刚指定的配置项和数据显示图表。 myCharts.setOption(options); } function yearFirst() { let str = ''; let ddls = ''; let yjzb = ''; let yyes = ''; console.log(document.getElementsByClassName('sz')); str = `<div class="zb"> <span class="fp">${year[0].wan}</span> <span class="fp">${year[0].tu}</span> <span class="fp">${year[0].sui}</span> <span class="fp">${year[0].fo}</span> <span class="fp">${year[0].fai}</span> <span class="fp">${year[0].sks}</span> <b class="wyh">万元</b> <b class="bfb">${year[1].value}</b> <b class="bfb">%</b> <b class="bfb"><img src="./img/向上.svg" alt=""></b> </div>`; $('.performance').html(str); ddls = `<span>${year[2].value}</span>`; document.getElementsByClassName('sz')[4].innerHTML = ddls; yjzb = `<div class="zb"> <span class="fp">${years[0].wan}</span> <span class="fp">${years[0].tu}</span> <span class="fp">${years[0].sui}</span> <span class="fp">${years[0].fo}</span> <span class="fp">${years[0].fai}</span> <span class="fp">${years[0].sks}</span> <b class="wyh">万元</b> <b class="bfb">${years[1].value}</b> <b class="bfb">%</b> <b class="bfb"><img src="./img/向上.svg" alt=""></b> </div>`; $('.indicator').html(yjzb); yyes = `<span>${years[2].value}</span>`; document.getElementsByClassName('sz')[5].innerHTML = yyes; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('ddl')[0]); var option = { series: [{ type: 'pie', hoverAnimation: false, radius: ['90%', '79%'], labelLine: { show: false }, data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 30, 0, 0, 0] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); var myCharts = echarts.init(document.getElementsByClassName('jye')[0]); var options = { series: [{ type: 'pie', hoverAnimation: false, radius: ['90%', '79%'], labelLine: { show: false }, data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 60, 0, 0, 0] }] }; // 使用刚指定的配置项和数据显示图表。 myCharts.setOption(options); } function changliang(a) { let dates = document.getElementsByClassName('dates')[0]; dates = dates.getElementsByTagName('span'); for (let i = 0; i < dates.length; i++) { dates[i].style.border = "" dates[i].style.color = "#fff" } dates[a].style.border = "solid #00FFFB 0.5px" dates[a].style.color = "#00FFFB" } function changliangss() { let dates = document.getElementsByClassName('dates')[0]; dates = dates.getElementsByTagName('span'); dates[0].style.border = "solid #00FFFB 0.5px" dates[0].style.color = "#00FFFB" } function chang(a) { console.log(a); let dates = document.getElementsByClassName('dates')[1]; dates = dates.getElementsByTagName('span'); for (let i = 0; i < dates.length; i++) { dates[i].style.border = "" dates[i].style.color = "#fff" } dates[a].style.border = "solid #00FFFB 0.5px" dates[a].style.color = "#00FFFB" } function changs() { let dates = document.getElementsByClassName('dates')[1]; dates = dates.getElementsByTagName('span'); dates[0].style.border = "solid #00FFFB 0.5px" dates[0].style.color = "#00FFFB" } function fenxi() { let yuefen = document.getElementsByClassName('dates')[1]; yuefen.addEventListener('click', function (e) { let nr = e.target; if (nr.innerHTML == '周') { chang(0); information(); } else if (nr.innerHTML == '月') { chang(1); informations(); } else if (nr.innerHTML == '年') { chang(2); informationss(); } }) } function information() { let sz = document.getElementsByClassName('sz')[6].innerHTML = 9120; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('sc')[0]); option = { color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'], legend: { top: '-2%', left: 'right', width: '35%', itemGap: 35, textStyle: { color: '#fff' } }, series: [ { label: { show: false }, hoverAnimation: false, labelLine: { show: false }, type: 'pie', radius: ['90%', '60%'], itemStyle: { borderColor: '#353654', borderWidth: 10 }, data: [ { value: 1048, name: '数据一' }, { value: 735, name: '数据二' }, { value: 580, name: '数据三' }, { value: 484, name: '数据四' }, { value: 300, name: '数据五' } ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } function informations() { let sz = document.getElementsByClassName('sz')[6].innerHTML = 17120; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('sc')[0]); option = { color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'], legend: { top: '-2%', left: 'right', width: '35%', itemGap: 35, textStyle: { color: '#fff' } }, series: [ { label: { show: false }, hoverAnimation: false, labelLine: { show: false }, type: 'pie', radius: ['90%', '60%'], itemStyle: { borderColor: '#353654', borderWidth: 10 }, data: [ { value: 548, name: '数据一' }, { value: 235, name: '数据二' }, { value: 980, name: '数据三' }, { value: 884, name: '数据四' }, { value: 700, name: '数据五' } ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } function informationss() { let sz = document.getElementsByClassName('sz')[6].innerHTML = 97120; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('sc')[0]); option = { color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'], legend: { top: '-2%', left: 'right', width: '35%', itemGap: 35, textStyle: { color: '#fff' } }, series: [ { label: { show: false }, hoverAnimation: false, labelLine: { show: false }, type: 'pie', radius: ['90%', '60%'], itemStyle: { borderColor: '#353654', borderWidth: 10 }, data: [ { value: 948, name: '数据一' }, { value: 535, name: '数据二' }, { value: 980, name: '数据三' }, { value: 784, name: '数据四' }, { value: 900, name: '数据五' } ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } function shuju() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('sheet')[0]); var option = { series: [{ type: 'pie', hoverAnimation: false, radius: ['100%', '70%'], labelLine: { show: false }, data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 30, 0, 0, 0] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } function liang(a) { console.log(a); let dates = document.getElementsByClassName('dates')[2]; dates = dates.getElementsByTagName('span'); for (let i = 0; i < dates.length; i++) { dates[i].style.border = "" dates[i].style.color = "#fff" } dates[a].style.border = "solid #00FFFB 0.5px" dates[a].style.color = "#00FFFB" } function liangs() { let dates = document.getElementsByClassName('dates')[2]; dates = dates.getElementsByTagName('span'); dates[0].style.border = "solid #00FFFB 0.5px" dates[0].style.color = "#00FFFB" } function xianxhang() { let yuefen = document.getElementsByClassName('dates')[2]; console.log(yuefen); yuefen.addEventListener('click', function (e) { let nr = e.target; if (nr.innerHTML == '周') { liang(0); message(); } else if (nr.innerHTML == '月') { liang(1); messages(); } else if (nr.innerHTML == '年') { liang(2); messagess(); } }) } function message() { let sz = document.getElementsByClassName('wd')[0]; console.log(sz); sz = sz.getElementsByTagName('span')[0].innerHTML = 25; let str = ''; str = ` <!-- 上 --> <div class="eshu"> <p><span>今日线上运营额数:</span><b>18,654.12</b><span>元</span></p> </div> <!-- 下 --> <div class="fxrs"> <!-- 左 --> <div class="sjfx"> <p class="sjfxrs">数据分析人数</p> <p class="sks"><span>2432</span><span>人</span></p> </div> <!-- 右 --> <div class="yinyee"> <p class="yiny">营业额</p> <p class="skss"><span>25,345.00</span><span>元</span></p> </div> </div>`; $('.wenzi').html(str); } function messages() { let sz = document.getElementsByClassName('wd')[0]; console.log(sz); sz = sz.getElementsByTagName('span')[0].innerHTML = 18.5; let str = ''; str = ` <!-- 上 --> <div class="eshu"> <p><span>今日线上运营额数:</span><b>98,654.12</b><span>元</span></p> </div> <!-- 下 --> <div class="fxrs"> <!-- 左 --> <div class="sjfx"> <p class="sjfxrs">数据分析人数</p> <p class="sks"><span>10432</span><span>人</span></p> </div> <!-- 右 --> <div class="yinyee"> <p class="yiny">营业额</p> <p class="skss"><span>105,345.00</span><span>元</span></p> </div> </div>`; $('.wenzi').html(str); } function messagess() { let sz = document.getElementsByClassName('wd')[0]; console.log(sz); sz = sz.getElementsByTagName('span')[0].innerHTML = 32; let str = ''; str = ` <!-- 上 --> <div class="eshu"> <p><span>今日线上运营额数:</span><b>108,654.12</b><span>元</span></p> </div> <!-- 下 --> <div class="fxrs"> <!-- 左 --> <div class="sjfx"> <p class="sjfxrs">数据分析人数</p> <p class="sks"><span>20432</span><span>人</span></p> </div> <!-- 右 --> <div class="yinyee"> <p class="yiny">营业额</p> <p class="skss"><span>285,345.00</span><span>元</span></p> </div> </div>`; $('.wenzi').html(str); } function wcl() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('canvas')[0]); var option = { series: [{ type: 'pie', hoverAnimation: false, radius: ['75%', '90%'], labelLine: { show: false }, data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 50, 0, 0, 0] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); var myCharts = echarts.init(document.getElementsByClassName('canvas')[1]); var options = { series: [{ type: 'pie', hoverAnimation: false, radius: ['75%', '90%'], labelLine: { show: false }, data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 30, 0, 0, 0] }] }; // 使用刚指定的配置项和数据显示图表。 myCharts.setOption(options); } function pinpai() { let arr2 = [{ "yAxisleftdata": ['品牌一', '品牌二'], "yAxisrightvaluedata": [75, 80], "seriesdatamax": [100, 100] }] var myChart = echarts.init(document.getElementsByClassName('heng')[0]); var option = { // 标题 title: { text: '完成情况', left: 'left', top: "2%", padding: [25, 0, 0, 40], textStyle: { color: '#fff', fontSize: "20", fontWeight: "400" } }, // 横向条形图的位置 grid: { // left: "-10%", // right: "10%", width: "80%", bottom: "1%", top: "30%", containLabel: true }, xAxis: { type: "value", splitLine: { show: false }, axisLabel: { show: false }, axisTick: { show: false }, axisLine: { show: false } }, yAxis: [{ // y轴文字 data: arr2[0].yAxisleftdata, axisLabel: { textStyle: { show: true, fontSize: "16", fontWeight: "400", fontFamily: '微软雅黑', color: "#fff", }, }, type: "category", inverse: true, axisLine: { show: false }, axisTick: { show: false }, }, // 右侧数据 { type: "category", inverse: true, axisTick: "none", axisLine: "none", show: true, axisLabel: { textStyle: { // color: 'rgb(6,182,254)', fontSize: "18", fontWeight: "800" } }, //------------------右侧展示的具体内容 data: [{ value: `${arr2[0].yAxisrightvaluedata[0]}%`, textStyle: { color: "rgb(246,154,20)" } }, { value: `${arr2[0].yAxisrightvaluedata[1]}%`, textStyle: { color: "rgb(6,180,254)" } } ], }, ], series: [{ zlevel: 1, type: "bar", barWidth: "13px", animationDuration: 1500, //------------------数据及其样式---------------------------- data: [{ value: arr2[0].yAxisrightvaluedata[0], itemStyle: { color: "rgb(239,134,41)" } }, { value: arr2[0].yAxisrightvaluedata[1], itemStyle: { color: "rgb(38,149,254)" } } ], align: "center", itemStyle: { normal: { barBorderRadius: 10 } } }, { type: "bar", barWidth: 13, barGap: "-100%", margin: "20", //------------------背景按最大值---------------------------- data: arr2[0].seriesdatamax, textStyle: { //图例文字的样式 fontSize: 10, color: "black" }, itemStyle: { normal: { color: "rgba(241,241,241,0.4)", //width:"100%", fontSize: 10, barBorderRadius: 30 }, } } ] }; myChart.setOption(option); } function yuan() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('yanLeft')[0]); option = { title: { text: `${75}%`, textStyle: { color: 'rgb(69,121,255)', fontSize: "20" }, subtext: '完成率', subtextStyle: { color: '#fff', fontSize: '16' }, itemGap: 50, // 主副标题距离 left: 'center', top: 'center' }, angleAxis: { max: 100, clockwise: true, // 逆时针还是顺时针旋转 // 隐藏刻度线 axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false } }, radiusAxis: { type: 'category', // 隐藏刻度线 axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false } }, polar: { center: ['50%', '50%'], radius: '110%' //图形大小 }, series: [{ type: 'bar', data: [{ name: '完成率', value: 75, itemStyle: { // 这里设置圆环的渐变颜色----------------------- normal: { color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#F69816' }, { offset: 1, color: '#E05C5B' }]) } }, }], coordinateSystem: 'polar', roundCap: true, barWidth: 8, barGap: '-100%', // 两环重叠 z: 2, }, { // 灰色环 type: 'bar', data: [{ value: 100, itemStyle: { color: '#1C2136', shadowColor: 'rgba(0, 0, 0, 0.2)', shadowBlur: 5, shadowOffsetY: 2 } }], coordinateSystem: 'polar', roundCap: true, barWidth: 5, barGap: '-100%', // 两环重叠 z: 1 }] } myChart.setOption(option); // 基于准备好的dom，初始化echarts实例 var myCharts = echarts.init(document.getElementsByClassName('yanRight')[0]); options = { title: { text: `${80}%`, textStyle: { color: 'rgb(69,121,255)', fontSize: "20" }, subtext: '完成率', subtextStyle: { color: '#fff', fontSize: '16' }, itemGap: 50, // 主副标题距离 left: 'center', top: 'center' }, angleAxis: { max: 100, clockwise: true, // 逆时针还是顺时针旋转 // 隐藏刻度线 axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false } }, radiusAxis: { type: 'category', // 隐藏刻度线 axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false } }, polar: { center: ['50%', '50%'], radius: '110%' //图形大小 }, series: [{ type: 'bar', data: [{ name: '完成率', value: 80, itemStyle: { // 这里设置圆环的渐变颜色----------------------- normal: { color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#05B7FE' }, { offset: 1, color: '#5966FF' }]) } }, }], coordinateSystem: 'polar', roundCap: true, barWidth: 8, barGap: '-100%', // 两环重叠 z: 2, }, { // 灰色环 type: 'bar', data: [{ value: 100, itemStyle: { color: '#1C2136', shadowColor: 'rgba(0, 0, 0, 0.2)', shadowBlur: 5, shadowOffsetY: 2 } }], coordinateSystem: 'polar', roundCap: true, barWidth: 5, barGap: '-100%', // 两环重叠 z: 1 }] } myCharts.setOption(options); } function qsfx() { let yuefen = document.getElementsByClassName('cut')[0]; console.log(yuefen); yuefen.addEventListener('click', function (e) { let nr = e.target; if (nr.innerHTML == '周') { liange(0); qushi(); } else if (nr.innerHTML == '月') { liange(1); qushis(); } else if (nr.innerHTML == '年') { liange(2); qushiss(); } }) } function liange(a) { console.log(a); let dates = document.getElementsByClassName('cut')[0]; dates = dates.getElementsByTagName('span'); for (let i = 0; i < dates.length; i++) { dates[i].style.border = "" dates[i].style.color = "#fff" } dates[a].style.border = "solid #00FFFB 0.5px" dates[a].style.color = "#00FFFB" } function lianges() { let dates = document.getElementsByClassName('cut')[0]; dates = dates.getElementsByTagName('span'); dates[0].style.border = "solid #00FFFB 0.5px" dates[0].style.color = "#00FFFB" } let riqi; let zou; let zous; let yue; let yues; let yzhou = []; function qushis() { riqi = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 189, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]; zou = [3580, 5200, 1640, 3200, 4210, 2500, 4280, 6700, 3000, 3800, 5210, 2200, 3300, 6700, 3000, 3800, 5210, 2200, 3300, 3580, 5200, 1640, 3200, 4210, 2200, 3300, 6700, 3000, 3800, 5210]; zous = [4280, 6700, 3000, 3800, 5210, 2200, 3300, 3580, 5200, 1640, 3200, 4210, 2500, 5210, 2200, 3300, 6700, 3000, 3800, 5210, 2200, 3300, 3300, 6700, 3000, 3800, , 3580, 5200, 1640, 3200]; yzhou = ['10000', '20000', '30000', '40000', '50000', '60000', '70000', '80000', '90000', '100000']; yue = ''; yues = ''; boxs(); } function qushiss() { riqi = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']; zou = [3580, 5200, 1640, 3200, 4210, 2500, 1300, 6700, 3000, 3800, 5210, 2200,]; zous = [4280, 6700, 3000, 3800, 5210, 2200, 3300, 1640, 3200, 4210, 2500, 1300]; yzhou = ['100', '200', '300', '400', '500', '600', '700', '800', '900', '1000']; yue = zou; yues = zous; boxs(); } function qushi() { riqi = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; zou = [3580, 5200, 1640, 3200, 4210, 2500, 1300]; zous = [4280, 6700, 3000, 3800, 5210, 2200, 3300]; yzhou = ['1000', '2000', '3000', '4000', '5000', '6000', '7000', '8000', '9000', '10000']; yue = ''; yues = ''; boxs(); } function boxs() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementsByClassName('contentss')[0]); // 指定图表的配置项和数据 var option = { title: { show: true, text: '单位(元)', textStyle: { color: '#fff' , fontWeight: "400", fontSize: 17 }, textAlign: "left", textVerticalAlign: "top", padding: [15, 0, 0, 50] }, tooltip: { top: 0, feature: { //点击图表可直接将柱形图与折线图进行切换 magicType: { show: true, // type: ['line', 'bar'] }, } }, legend: { top: '30px', right: '70px', textStyle: { color: '#fff' } }, xAxis: { data: riqi, splitLine: { show: false }, axisLine: { show: true, lineStyle: { color: "#fff" } }, axisTick: { show: false } }, yAxis: { data: yzhou, type: 'value', splitLine: { show: true, boundaryGap: true }, axisLine: { show: false, lineStyle: { color: "#fff" } }, axisTick: { show: false } }, series: [{ itemStyle: { barBorderRadius: [20, 20, 0, 0], color: '#FF8538' }, name: '成本', type: 'bar', emphasis: { focus: 'series', }, data: zou }, { itemStyle: { barBorderRadius: [20, 20, 0, 0], color: '#20BBF0' }, name: '收益', type: 'bar', emphasis: { focus: 'series' }, data: zous }, { itemStyle: { color: '#FF8538' }, type: 'line', data: yue, emphasis: { focus: 'series' }, }, { itemStyle: { color: '#20BBF0' }, type: 'line', data: yues, emphasis: { focus: 'series' }, } ] } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }
json:
[ { "first": [ { "name": "服装", "type": "bar", "data": [ { "name": "一月", "value": 5000 }, { "name": "二月", "value": 6500 }, { "name": "三月", "value": 4300 }, { "name": "四月", "value": 5700 }, { "name": "五月", "value": 5970 } ] }, { "name": "饰品", "type": "bar", "data": [ { "name": "一月", "value": 5050 }, { "name": "二月", "value": 6900 }, { "name": "三月", "value": 7300 }, { "name": "四月", "value": 6700 }, { "name": "五月", "value": 2970 } ] }, { "name": "食品", "type": "bar", "data": [ { "name": "一月", "value": 7000 }, { "name": "二月", "value": 8500 }, { "name": "三月", "value": 6200 }, { "name": "四月", "value": 8700 }, { "name": "五月", "value": 9970 } ] } ] }, { "value": 1048, "mave": 12657 }, { "name": "一号", "data": [ { "name": "营业", "data": [ { "name": "周", "data": [ { "wan": 1, "tu": 1, "sui": 1, "fo": 1, "fai": ".", "sks": 1 }, { "value": "25.6" }, { "value": "1234" } ] }, { "name": "月", "data": [ { "wan": 2, "tu": 2, "sui": 2, "fo": 2, "fai": ".", "sks": 2 }, { "value": "22.6" }, { "value": "2234" } ] }, { "name": "年", "data": [ { "wan": 4, "tu": 8, "sui": 8, "fo": 6, "fai": ".", "sks": 2 }, { "value": "2.6" }, { "value": "80234" } ] } ] }, { "name": "业绩", "data": [ { "name": "营业", "data": [ { "name": "周", "data": [ { "wan": 1, "tu": 2, "sui": 2, "fo": 3, "fai": ".", "sks": 3 }, { "value": "15.6" }, { "value": "2234" } ] }, { "name": "月", "data": [ { "wan": 3, "tu": 3, "sui": 4, "fo": 1, "fai": ".", "sks": 5 }, { "value": "32.6" }, { "value": "6234" } ] }, { "name": "年", "data": [ { "wan": 9, "tu": 8, "sui": 8, "fo": 6, "fai": " .", "sks": 2 }, { "value": "22.6" }, { "value": "200234" } ] } ] } ] } ] } ]
img:
还有几个svg自己找
效果图：
