全网最详细教写可视化面板（js、css3、html5）

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自己找

效果图：

全网最详细教写可视化面板（js、css3、html5）相关推荐

全网最详细手写bind
手写bind 在写代码前,一定要分析这个api或者关键字实现了什么,拥有什么功能,如果对其原理认识不到时,也不能达到一比一还原 bind bind执行返回的是一个新的函数这个函数可以被new关键字执 ...
“是男人就下一百层”h5游戏全网最详细教学、全代码，js操作
"是男人就下一百层"h5游戏全网最详细教学.全代码,js操作博主的话游戏展示编程工具介绍游戏代码代码讲解 js 第一步切换div的显示与隐藏 js 第二步在菜单页面用 ...
这可能是全网最详细的Node.js编程
NodeJS起步下载安装下载历史版本 windows下安装过程: 此安装路径尽量不要改对于已经装过的,重新安装就会升级安装成功后,打开命令行,输入 node --version 或者 nod ...
手把手教你用Vue.js封装Form组件
前言: 在日常使用vue开发WEB项目中,经常会有提交表单的需求.我们可以使用 iview 或者 element 等组件库来完成相关需求:但我们往往忽略了其中的实现逻辑,如果想深入了解其中的实现细节, ...
太干了，全网最全的Matplotlib可视化教程
导读 Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形.通过 Matplotlib,开发者可以仅需要几行代码,便可以生成绘图,直 ...
一个全网最详细的Python教程
光从编程的难易度来说,Python 简单&易学,零基础.跨专业都很容易上手.(想学全网最详细 Python 教程,那一定要看看哦~) 从就业前景来看,很多个领域都使用了 Python ,比如大 ...
全网最详细的大数据集群环境下如何正确安装并配置多个不同版本的Cloudera Hue（图文详解）...
不多说,直接上干货! 为什么要写这么一篇博文呢? 是因为啊,对于Hue不同版本之间,其实,差异还是相对来说有点大的,具体,大家在使用的时候亲身体会就知道了,比如一些提示和界面. 全网最详细的大数据集群 ...
swift5以上版本的代理的实现,详细教你书写代理
swift5以上版本的代理的实现,详细教你书写代理 swift 代理与OC代理同等重要.非常重要,必须要学好,搞懂什么是代理,就是自己的事情不去做,让别人去做.交给别人去做我这里有个view.sw ...
谷歌浏览器开发调试工具中Sources面板 js调试等完全介绍
这次分享的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板.通常只要是开发遇到了js报错或者其他代 ...

全网最详细教写可视化面板（js、css3、html5）

全网最详细教写可视化面板（js、css3、html5）相关推荐

最新文章

热门文章