$.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);
}
