<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0;}
/* TV Start */
.RealTimeListTV {
width: 100%;
height: 100%;
overflow: scroll;
background: #030129 url('./img/tvBg.jpg') no-repeat;
background-size: 100% auto;
padding: 136px 0 0 0;
text-align: center;
position: relative;
box-sizing: border-box;
}
.RealTimeListTV .title {
font-size: 76px;
color: #fff;
letter-spacing: 6px;
}
.RealTimeListTV .totalValue {
font-size: 150px;
color: #fff;
letter-spacing: 6px;
}
.RealTimeListTV .totalValue .decoration {
width: 524px;
height: 136px;
display: block;
margin: 0 auto;
background: url('./img/2.png') no-repeat;
}
.RealTimeListTV .BusinessUnitList {
display: flex;
justify-content: space-between;
overflow: hidden;
line-height: 50px;
padding: 0 200px;
list-style: none;
}
.BusinessUnitList li {
float: left;
color: #fff;
position: relative;
letter-spacing: 6px;
}
.BusinessUnitList li .name {
font-size: 30px;
}
.BusinessUnitList li .value {
font-size: 36px;
}
.BusinessUnitList li .line {
width: 47px;
height: 48px;
background: url('./img/5.png') no-repeat;
position: absolute;
left: -70px;
top: 0;
}
.main{
margin: 50px auto 0;
}
/* TV End */ /* WEB Start */
.RealTimeListWEB{
width: 1280px;
background: #030129 url('./img/webBg.png') no-repeat;
background-size: 100% auto;
padding: 40px 0 0 0;
text-align: center;
position: relative;
box-sizing: border-box;
margin:0 auto;
} .RealTimeListWEB .title{
font-size: 46px;
color: #fff;
letter-spacing: 6px;
}
.RealTimeListWEB .totalValue {
font-size: 80px;
color: #fff;
letter-spacing: 6px;
}
.RealTimeListWEB .BusinessUnitList{
list-style: none;
margin-top:110px;
}
.RealTimeListWEB .BusinessUnitList::after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
} .RealTimeListWEB .BusinessUnitList li{
width: 20%;
padding-bottom: 30px;
letter-spacing: 3px;
}
.RealTimeListWEB .BusinessUnitList li .line{
left: 25px;
top: -8px;
width: 32px;
height: 32px;
}
.RealTimeListWEB .BusinessUnitList li .name,.RealTimeListWEB .BusinessUnitList li .value{
font-size: 20px;
padding-bottom: 20px;
}
.echartsList{
margin-top: 200px;
}
/* WEB End */ /* comment */
.lageBoxNone,.smallBoxNone{
display: none;
}
@media screen and (min-width:2300px) and (max-width:5000px) {
.lageBoxNone{
display: block;
}
}
@media only screen and (max-width: 2299px) {
.smallBoxNone{
display: block;
}
} </style>
</head> <body> <!-- 电视尺寸 -->
<div class="RealTimeListTV lageBoxNone">
<div class="title">总销售额</div>
<div class="totalValue">$10,000,000<span class="decoration"></span></div>
<ul class="BusinessUnitList">
<li>
<span class="line"></span>
<p class="name">SW事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">PJ事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">JFN事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">π事业部</p>
<p class="value">$142,005</p>
</li>
<li>
<span class="line"></span>
<p class="name">Q事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">HA事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">AG事业部</p>
<p class="value">$120,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">N事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">SP事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">GS事业部</p>
<p class="value">$150,000</p>
</li>
</ul>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="padding:0 50px;">
<div id="main" class="main" style="width: 100%;height:1200px;"></div>
</div> </div>
<!-- pc尺寸 -->
<div class="RealTimeListWEB smallBoxNone">
<div class="title">总销售额</div>
<div class="totalValue">$10,000,000</div>
<ul class="BusinessUnitList">
<li>
<span class="line"></span>
<p class="name">SW事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">PJ事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">JFN事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">π事业部</p>
<p class="value">$142,005</p>
</li>
<li>
<span class="line"></span>
<p class="name">Q事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">HA事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">AG事业部</p>
<p class="value">$120,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">N事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">SP事业部</p>
<p class="value">$70,000</p>
</li>
<li>
<span class="line"></span>
<p class="name">GS事业部</p>
<p class="value">$150,000</p>
</li>
</ul>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="echartsList">
<div id="main1" class="main" style="width: 1200px;height:450px;"></div>
<div id="main2" class="main" style="width: 1200px;height:450px;"></div>
<div id="main3" class="main" style="width: 1200px;height:450px;"></div>
</div> </div> </body>
<script src='https://cdn.bootcss.com/jquery/1.12.0/jquery.js'></script>
<script src="https://cdn.bootcss.com/echarts/4.0.0/echarts.js"></script>
<script type="text/javascript">
/*
堆叠条形图 公共配置
xData: x轴数据 type＝category arr 必填
yData: y轴数据 type＝value arr 必填
HistogramW: 单个柱状图的宽度 str 如果不传默认是60
*/
// 基于准备好的dom，初始化echarts实例
function StackedBarChart(xData, yData, HistogramW) {
var yData1 = [],
yData2 = [],
yData3 = [],
yData4 = [],
HistogramW = HistogramW ? HistogramW : '60px';
for (var i = 0, len = yData.length; i < len; i++) {
var cur = yData[i];
yData1.push(cur * 0.1 >>> 0);
yData2.push(cur * 0.2 >>> 0);
yData3.push(cur * 0.3 >>> 0);
yData4.push(cur * 0.4 >>> 0);
}
return {
textStyle: {
color: '#fff',
fontSize: '30'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
axisLine: { // x轴的颜色和宽度
lineStyle: {
color: '#373750',
width: 5 //这里是坐标轴的宽度,可以去掉
}
},
axisPointer:{
show: false
},
data: xData
}],
yAxis: [{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
// 控制网格线是否显示
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['#24243f']
}
} }],
series: [ {
type: 'bar', // 柱状图
stack: '站点总销售额', // 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#5fa2bc'
},
{
offset: 0.7,
color: '#9fe595'
}
]
)
}
}, barMaxWidth: HistogramW,
data: yData1
},
{
type: 'bar',
stack: '站点总销售额',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#fae093'
},
{
offset: 0.7,
color: '#f99c72'
}
]
)
}
},
data: yData2
},
{
type: 'bar',
stack: '站点总销售额',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#ff79aa'
},
{
offset: 0.7,
color: '#e9566d'
}
]
)
}
},
data: yData3
},
{
// 只在最后一组数据中显示 label，由于最后一组数据的值来自 total * 0.4，
// 由此逆推出总数为 data / 0.4，
// >>> 用于去除小数部分
label: {
show: true,
position: 'top',
formatter: function (param) {
return param.data / 0.4 >>> 0;
}
},
type: 'bar',
stack: '站点总销售额',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#94c8d3'
},
{
offset: 0.7,
color: '#6a71e4'
}
]
)
}
},
data: yData4
}, ]
};
} /*
渐变柱状图 公共option配置参数
xData: x轴数据 type＝category arr 必填
yData: y轴数据 type＝value arr 必填
colorTop: 渐变色上颜色 str 如果不传默认为#F00
colorBtm: 渐变色下颜色 str 如果不传默认为#CCC
HistogramW: 单个柱状图的宽度 str 如果不传默认是60
*/
// 基于准备好的dom，初始化echarts实例
function optionFun(xData, yData, colorTop, colorBtm, HistogramW) {
var colorTop = colorTop ? colorTop : '#F00',
colorBtm = colorBtm ? colorBtm : '#CCC',
HistogramW = HistogramW ? HistogramW : '60px';
return {
textStyle: {
color: '#fff',
fontSize: '18'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
axisLine: { // x轴的颜色和宽度
lineStyle: {
color: '#373750',
width: 5 //这里是坐标轴的宽度,可以去掉
}
},
axisLabel: {
interval:0,
rotate:40
},
data: BusinessUnitArr
}],
yAxis: [{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
// 控制网格线是否显示
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['#24243f']
}
} }],
series: [ {
type: 'bar', // 柱状图
stack: '站点总销售额', // 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colorTop // 0% 处的颜色
}, {
offset: 1,
color: colorBtm // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}, label: {
normal: {
show: true,
position: 'top',
color: '#fff'
}
},
barMaxWidth: HistogramW,
data: data
} ]
};
} var totalH = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight,
titleH = $('.title').outerHeight(true),
totalValueH = $('.totalValue').outerHeight(true),
businessUnitListH = $('.BusinessUnitList').outerHeight(true),
mainH = totalH - titleH - totalValueH - businessUnitListH - 136 - 50 ;
console.log(totalH,titleH,totalValueH,businessUnitListH,mainH,'this is h')
$('#main').css('height',mainH+'px') /* ---------------- TV Echarts ---------------- */
var myChart = echarts.init(document.getElementById('main')),
xData = ['infashionmode', 'homealls', 'poplevis', 'sandkini', 'popzora', 'andynzoe', 'bettermia', 'armariohoy', 'JFN', 'PJ', 'SF', 'MM', 'RK', 'RM', 'SW', 'JFN', 'PJ',
'SF', 'MM', 'RK', 'RM', 'SW', 'JFN', 'PJ', 'SF', 'MM', 'RK', 'RM', 'SW', 'JFN'
],
yData = [120, 132, 101, 134, 90, 230, 210, 80, 200, 180, 99, 105, 200, 300, 150, 120, 132, 101, 134, 90, 230, 210,
80, 200, 180, 99, 105, 200, 300, 150
];
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(StackedBarChart(Parse(xData),yData)); function Parse(arr) {
return arr.map(function(item) {
return {
value: item,
textStyle: {
color: 'red',
fontSize: 22,
}
}
})
} /*---------------- WEB Echarts ---------------- */ var myChart1 = echarts.init(document.getElementById('main1')),
xData = Parse(['SW', 'JFN', 'PJ', 'SF', 'MM', 'RK', 'RM', 'SW', 'JFN', 'PJ', 'SF', 'MM', 'RK', 'RM', 'SW']),
yData = [500, , 300, 88, 150, 286, 210, 80, 200, 180, 99, 105, 200, 300, 150];
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(StackedBarChart(xData, yData, '40')); var myChart2 = echarts.init(document.getElementById('main2')),
BusinessUnitArr = ['SW', 'JFN', 'PJ', 'SF', 'MM', 'RK', 'RM', 'SW', 'JFN', 'PJ', 'SF', 'MM', 'RK', 'RM', 'SW'],
data = [120, 132, 101, 134, 90, 230, 210, 80, 200, 180, 99, 105, 200, 300, 150];
// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(optionFun(BusinessUnitArr, data)); var myChart3 = echarts.init(document.getElementById('main3')),
BusinessUnitArr = ['SW', 'JFN', 'PJ', 'SF', 'MM', 'RK', 'RM', 'SW', 'JFN', 'PJ', 'SF', 'MM', 'RK', 'RM', 'SW'],
data = [120, 132, 101, 134, 90, 230, 210, 80, 200, 180, 99, 105, 200, 300, 150];
// 使用刚指定的配置项和数据显示图表。
myChart3.setOption(optionFun(BusinessUnitArr, data, '#2378f7', '#6a71e4', '40'));
</script> </html>
预览效果：
堆叠柱状图
渐变柱状图：