Skip to content

R
report-html-template
Commit 83968555 by 呼呼啦啦
Options

修改

parent 3d8c898d
正在显示 包含 1358 行增加 和 51 行删除
energy-report/index.css
......@@ -12,6 +12,7 @@ body {
background-color: #152235;
padding: 0 4vw 0 4vw;
box-sizing: border-box;
overflow: auto;
}
@media screen and (max-width: 768px) {
.energy-wrap .flex {
......@@ -20,6 +21,27 @@ body {
.energy-wrap .flex .right {
width: 100%;
}
.energy-wrap .header {
height: 4vh;
font-size: 18px;
}
.top-15-wrap > .items {
height: 56px;
}
.top-15-wrap > .items .company-name {
flex: 1;
}
.top-15-wrap > .items .process {
position: absolute !important;
left: 50px;
height: 20px;
top: 44px;
width: calc(100% - 70px);
margin-right: 0 !important;
}
.production-portrait .popup {
width: 100%;
}
}
.flex {
display: flex;
......@@ -27,20 +49,458 @@ body {
.block-bg {
background: rgba(8, 16, 24, 0.27);
}
.yongdianqushi {
.header {
height: 6vh;
width: 60vw;
max-width: 766px;
background: url('./assets/top-bg.png') no-repeat;
background-size: 100% 100%;
position: relative;
left: 0;
right: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 30px;
padding-bottom: 10px;
}
.time {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.month-check {
position: relative;
background-color: #152235;
outline: none;
border: 1px solid #fff;
color: #fff;
width: 100px;
padding: 6px 0;
}
.month-check::-webkit-calendar-picker-indicator {
position: absolute;
right: 0;
padding-left: 100%;
}
.title {
color: #fff;
margin: 20px 0;
display: flex;
align-items: center;
}
.title > img {
width: 18px;
height: 18px;
margin-right: 4px;
}
.chart-wrap {
}
.echarts-box {
width: 100%;
height: 30vh;
height: 400px;
/* height: 30vh; */
}
.gonglv {
height: 30vh;
}
.echarts-box1 {
flex: 1;
}
.echarts-box1#distribution-charts{
height: 30vh;
}
.right {
width: 40vw;
height: 30vh;
}
.text-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.top-15-wrap {
max-height: 500px;
overflow-y: auto;
}
.top-15-wrap > .items {
background-color: rgba(255, 255, 255, 0.1);
margin-bottom: 4px;
display: flex;
padding: 12px 20px;
color: #fff;
position: relative;
}
.top-15-wrap > .items .index {
width: 22px;
height: 18px;
flex-shrink: 0;
}
.top-15-wrap > .items .company-name {
margin: 0 20px 0 10px;
width: 300px;
}
.top-15-wrap > .items .process {
flex: 1;
margin-right: 20px;
position: relative;
}
.top-15-wrap > .items .process > span {
width: 100%;
height: 100%;
content: '';
display: flex;
width: 70%;
position: absolute;
background: linear-gradient(to right, rgba(0, 216, 255, 1), rgba(0, 182, 255, 1));
}
.top-15-wrap > .items .process::after {
width: 100%;
height: 100%;
content: '';
display: flex;
background-color: rgba(255, 255, 255, 0.1);
}
.top-15-wrap .items .unit {
width: 140px;
text-align: right;
}
.top-15-wrap .items .unit > span {
/* font-size: 14px; */
}
.distribution-wrap {
}
.production-portrait {
}
.production-portrait > div {
width: calc(100% / 2 - 10px);
height: 300px;
display: inline-flex;
}
.popup {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.popup > span {
position: absolute;
background-color: rgba(52, 69, 94, 1);
border: 1px solid rgba(103, 120, 144, 1);
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
padding: 10px;
box-sizing: border-box;
white-space: wrap;
text-align: center;
}
.popup > span:nth-of-type(1) {
left: 20%;
top: 38%;
width: 22px;
height: 22px;
}
.popup > span:nth-of-type(2) {
left: 55%;
top: 5%;
width: 22px;
height: 22px;
}
.popup > span:nth-of-type(3) {
left: 70%;
top: 26%;
width: 72px;
height: 72px;
}
.popup > div:nth-of-type(1) {
position: relative;
width: 110px;
height: 110px;
}
.popup > div:nth-of-type(1) > span {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(92, 179, 255, 1), rgba(8, 86, 155, 1));
position: absolute;
border-radius: 50%;
z-index: 1;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
padding: 20px;
box-sizing: border-box;
white-space: wrap;
text-align: center;
}
.popup > div:nth-of-type(1)::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: rgba(52, 69, 94, 1);
left: -10px;
top: -10px;
border-radius: 50%;
}
.popup > div:nth-of-type(1)::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: rgba(52, 69, 94, 1);
left: 10px;
top: 10px;
border-radius: 50%;
}
.popup.right > div:nth-of-type(1) > span {
background: linear-gradient(to bottom, rgba(246, 133, 0, 1), rgba(168, 91, 0, 1));
}
.popup.right > div:nth-of-type(1)::before {
background: rgba(246, 133, 0, 0.3);
}
.right.popup > div:nth-of-type(1)::after {
background: rgba(246, 133, 0, 0.3);
}
.popup > span:nth-of-type(4) {
left: 62%;
top: 68%;
width: 42px;
height: 42px;
}
.popup > span:nth-of-type(5) {
left: 18%;
top: 68%;
width: 72px;
height: 72px;
}
.echarts-title {
width: 211px;
height: 25px;
}
.echarts-title img {
width: 100%;
}
.echarts-title-repair {
padding: 3%;
background: rgba(255, 255, 255, 0.05);
}
.echarts-title-content {
display: flex;
align-items: center;
}
.echarts-title-top {
background: url('../assets/contract-bg.png') no-repeat;
width: 208px;
height: 208px;
background-size: cover;
}
.echarts-title-repair-top {
width: 208px;
height: 208px;
}
.echarts-title-repair-top2 {
height: 228px;
width: 100%;
}
.echarts-title-repair-left {
margin-right: 3%;
}
.echarts-title-repair-list {
display: flex;
margin-top: 13px;
}
.echarts-title-repair-list img {
width: 20px;
height: 20px;
margin-top: 3px;
}
.echarts-title-repair-list-right {
margin-left: 13px;
font-size: 18px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
.echarts-title-repair-list-right-red {
color: rgba(255, 100, 100, 1);
}
.chart-desc {
position: relative;
margin-top: -15px;
}
.chart-desc img {
width: 165px;
height: 18px;
position: absolute;
bottom: 0;
left: 0;
}
.chart-desc-task {
position: relative;
display: flex;
margin-top: 10px;
}
.chart-desc-text {
color: #fff;
font-size: 18px;
margin-left: 8px;
margin-top: 4px;
}
.chart-desc-value {
margin-left: 30px;
color: #fff;
font-size: 22px;
font-weight: 700;
font-family: DIN Alternate-Bold;
text-align: right;
}
.chart-desc-unfinished {
margin-top: 10px;
}
.chart-desc-unfinished-value {
color: #fff;
font-size: 22px;
font-weight: 700;
margin-left: auto;
margin-right: 10px;
font-family: DIN Alternate-Bold;
}
.chart-desc-daily-legend {
width: 8px;
height: 8px;
background: rgba(92, 179, 255, 0.302);
opacity: 1;
border: 2px solid #5cb3ff;
margin-top: 12px;
margin-left: 20px;
}
.chart-desc-handle-legend {
width: 8px;
height: 8px;
background: rgba(255, 100, 100, 0.302);
opacity: 1;
border: 2px solid #ff6464;
margin-top: 12px;
margin-left: 20px;
}
.will-finished {
background: rgba(237, 241, 243, 0.302);
opacity: 1;
border: 2px solid #e9eff2;
margin-top: 12px;
margin-left: 20px;
width: 8px;
height: 8px;
}
.electricity-content {
height: 236px;
background: rgba(255, 255, 255, 0.05);
margin-bottom: 36px;
}
.electricity-content-title {
font-size: 18px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
padding: 16px 0 0 24px;
}
.chart-desc-icon {
width: 8px;
height: 8px;
background: rgba(246, 133, 0, 0.302);
opacity: 1;
border: 2px solid #f68500;
margin-top: 12px;
margin-left: 20px;
}
.chart-desc-icon2 {
background: rgba(63, 241, 217, 0.302);
border: 2px solid #3ff1d9;
}
.chart-desc-icon3 {
background: rgba(255, 100, 100, 0.302);
border: 2px solid #ff6464;
}
.chart-desc-icon4 {
background: rgba(92, 179, 255, 0.302);
border: 2px solid #5cb3ff;
}
.echarts-box1-right {
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
margin-top: 20px;
}
.invest-wrapper-content {
display: flex;
height: 68px;
align-items: center;
justify-content: center;
}
.invest-wrapper-content-first {
font-size: 18px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
.invest-wrapper-left-bracket img {
width: 100%;
}
.invest-wrapper-right-bracket img {
width: 100%;
}
.invest-wrapper-content-customers {
color: #c8565b;
}
.analysis-content {
height: 380px;
background: rgba(8, 16, 24, 0.27);
border-radius: 0px 0px 0px 0px;
margin: 27px 0 37px;
}
energy-report/index.html
......@@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<title>能耗报告</title>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/5.2.0/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<link rel="stylesheet" href="./index.css">
</head>
......@@ -13,100 +13,947 @@
<body>
<div class="energy-wrap">
<div class="header">
成阿园区月度用电报告
</div>
<!-- -->
<div class="yongdianqushi">
<!-- 用电趋势 -->
<div class="chart-wrap">
<div class="title">
<img src="./assets/title-arrow.png" alt="">
用电趋势
</div>
<div id="repair-require" class="echarts-box"></div>
</div>
<!-- -->
<div class="flex gonglv">
<div id="repair-require1" class="echarts-box1"></div>
<div class="right"></div>
<!-- 企业用电量排名TOP15 -->
<div class="top-15">
<div class="title">
<img src="./assets/title-arrow.png" alt="">
企业用电量排名TOP15
</div>
<div class="top-15-wrap">
<div class="items">
<span class="index">01</span>
<p class="company-name text-overflow">成都金瑞纳生物科技有限公司</p>
<p class="process"><span style="width: 70%;"></span></p>
<p class="unit text-overflow">90000<span>MWh</span></p>
</div>
<div class="items">
<span class="index">02</span>
<p class="company-name text-overflow">成都金瑞纳生物科技有限公司</p>
<p class="process"><span style="width: 70%;"></span></p>
<p class="unit text-overflow">90000<span>MWh</span></p>
</div>
<div class="items">
<span class="index">03</span>
<p class="company-name text-overflow">成都金瑞纳生物科技有限公司</p>
<p class="process"><span style="width: 70%;"></span></p>
<p class="unit text-overflow">90000<span>MWh</span></p>
</div>
</div>
</div>
<!-- 企业生产画像 -->
<div class="production-portrait">
<div class="left popup">
<span></span>
<span></span>
<span>白天8小时制</span>
<div><span>24小时工作制</span></div>
<span></span>
<span>非规律生产</span>
</div>
<div class="right popup">
<span></span>
<span></span>
<span>白天8小时制</span>
<div><span>24小时工作制</span></div>
<span></span>
<span>非规律生产</span>
</div>
</div>
<!-- 月度用电分析 -->
<!-- 功率因数企业分布 -->
<div class="distribution">
<div class="title">
<img src="./assets/title-arrow.png" alt="">
功率因数企业分布
</div>
<div class="distribution-wrap">
<div id="distribution-charts" class="echarts-box1"></div>
<div class="distribution-right"></div>
</div>
</div>
<!-- 月度功率因数趋势 -->
<!-- 企业生产时段分析 - 尖峰平谷各时段生产状况 -->
<!-- 企业生产时段分析 - 尖峰平谷各时段集中生产 -->
<!-- 园区企业生产状态分析 -->
<!--尖峰平谷各时段的企业用电量分析-->
<div>尖峰平谷各时段的企业用电量分析</div>
<div class="flex analysis-content">
<div id="repair-require8"></div>
</div>
<!--用电结构-->
<div class="flex electricity-content">
<div class="echarts-box1">
<div class="electricity-content-title">用电结构</div>
<div class="echarts-title-content">
<div class="echarts-title-top">
<div id="repair-require9" class="echarts-title-repair-top">
</div>
</div>
<div class="chart-desc">
<div class="chart-desc-task">
<div class="chart-desc-icon"></div>
<div class="chart-desc-text">峰</div>
<div class="chart-desc-value">29.61%</div>
<div class="chart-desc-value">29.61%</div>
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-icon chart-desc-icon2"></div>
<div class="chart-desc-text">平</div>
<div class="chart-desc-value">29.61%</div>
<div class="chart-desc-value">29.61%</div>
</div>
<div class="chart-desc-task">
<div class="chart-desc-icon chart-desc-icon3"></div>
<div class="chart-desc-text">尖</div>
<div class="chart-desc-value">2.61%</div>
<div class="chart-desc-value">29.61%</div>
</div>
<div class="chart-desc-task">
<div class="chart-desc-icon chart-desc-icon4"></div>
<div class="chart-desc-text">谷</div>
<div class="chart-desc-value">29.61%</div>
<div class="chart-desc-value">29.61%</div>
</div>
</div>
</div>
</div>
<div class="echarts-box1 echarts-box1-right">
<div class="invest-wrapper-content">
<div class="invest-wrapper-left-bracket">
<img src="../assets/bracket-left.png" />
</div>
<div class="invest-wrapper-content-first">
<span class="invest-wrapper-content-first-text">可以看出尖、峰时段的用电量已经超过总用电量的</span>
<span class="invest-wrapper-content-customers">12%</span>
<span class="invest-wrapper-content-second-text">在电价上有一定的优化空间。</span>
</div>
<div class="invest-wrapper-right-bracket">
<img src="../assets/bracket-right.png" />
</div>
</div>
</div>
</div>
<!--园区企业生产状态/企业生产工作制分析-->
<div class="flex">
<div class="echarts-box1">
<div class="echarts-title"><img src="./assets/pic10.png"></div>
<div class="echarts-title-repair echarts-title-repair-left">
<div class="echarts-title-content">
<div class="echarts-title-top">
<div id="repair-require10" class="echarts-title-repair-top">
</div>
</div>
<div class="chart-desc">
<div class="chart-desc-task">
<div class="chart-desc-daily-legend"></div>
<div class="chart-desc-text">达产</div>
<div class="chart-desc-value">18</div>
<img src="../assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-handle-legend"></div>
<div class="chart-desc-text">超产</div>
<div class="chart-desc-unfinished-value">5</div>
<img src="../assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-bottom">
<div class="will-finished"></div>
<div class="chart-desc-text">不景气</div>
<div class="chart-desc-unfinished-value">7</div>
<img src="../assets/desc-line.png" />
</div>
</div>
</div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right"><span>达产率：一共有<span
class="echarts-title-repair-list-right-red">880家</span>企业在<span
class="echarts-title-repair-list-right-red">2023年5月</span>已达到往期正常生产水平，<span
class="echarts-title-repair-list-right-red">占比61%</span></span></div>
</div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right"><span>超产率：一共有<span
class="echarts-title-repair-list-right-red">234家</span>企业<span
class="echarts-title-repair-list-right-red">2023年5月</span>用电量较以往三个月的平均值高出15%，生产势头旺盛，<span
class="echarts-title-repair-list-right-red">占比32%</span></span></div>
</div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right"><span>不景气率：一共有<span
class="echarts-title-repair-list-right-red">120家</span>企业<span
class="echarts-title-repair-list-right-red">2023年5月</span>用电量较往前三个月的平均值减少15%，<span
class="echarts-title-repair-list-right-red">占比6%</span>，需要重点关注其生产情况</span></div>
</div>
</div>
</div>
<div class="echarts-box1">
<div class="echarts-title"><img src="./assets/pic11.png"></div>
<div class="echarts-title-repair">
<div id="repair-require11" class="echarts-title-repair-top2"></div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right"><span>白天8小时工作制的企业一共有<span
class="echarts-title-repair-list-right-red">112家，占比25%。</span>这类企业一共用电量是<span
class="echarts-title-repair-list-right-red">894486KWh，占比34%。</span> </span></div>
</div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right"><span>24小时不间断生产的企业一共有<span
class="echarts-title-repair-list-right-red">356家，占比3.5%。</span>这类企业一共用电量是<span
class="echarts-title-repair-list-right-red">578900KWh，占比11%。</span> </span></div>
</div>
<div class="echarts-title-repair-list"><img src="./assets/icon1.png">
<div class="echarts-title-repair-list-right"><span>非规律生产的企业一共有<span
class="echarts-title-repair-list-right-red">45家，占比11%。</span>这类企业一共用电量是<span
class="echarts-title-repair-list-right-red">905725KWh，占比54%。</span> </span></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
window.onload = function () {
var myChart8, myChart9, myChart10, myChart11;
const myChart = {}
function initEcharts(el, option) {
var ele = echarts.init(document.querySelector(el));
console.log(el)
myChart[el] = ele;
console.log(myChart)
option && ele.setOption({ ...option })
}
const getOption = () => {
return {
}
}
const getEcharts = () => {
let option = {
title: {
text: '能耗报告',
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
axisPointer: { type: 'shadow' }
},
legend: {
show: true,
itemWidth: 14,
top: 0,
textStyle: {
color: "#fff"
},
},
dataZoom: [//给x轴设置滚动条
{
type: 'slider',//slider表示有滑动块的，inside表示内置的
// startValue: 8,//可用于设置开始显示的柱子的长度
// endValue: 1,//可用于设置结束显示的柱子的长度
start: 80,//默认为0 可设置滚动条从在后进行展示
end: 100,//默认为100
show: true,
xAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小
height: 8,//组件高度
left: '10%', //左边的距离
right: '10%',//右边的距离
bottom: -2,//右边的距离
borderColor: "#F4F4F4",
fillerColor: '#E7E7E7',
backgroundColor: '#F4F4F4',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: 'filter',
handleStyle: {
borderRadius: '20',
},
},
//下面这个属性是里面拖到
{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0,//默认为1
end: 100,//默认为100
moveOnMouseWheel: false,
preventDefaultMouseMove: false,
},
],
xAxis: [
{
axisLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(8, 16, 24, 0.27)'
},
textStyle: {
color: '#fff',
fontSize: '10'
}
},
axisLabel: {
textStyle: {
color: 'rgba(255, 255, 255, 1)',
}
},
type: 'category',
data: ['2018年', '2019年', '2020年', '2021年', '2022年'],
},
{
type: 'category',
show: false,
data: ['2018年', '2019年', '2020年', '2021年', '2022年']
}
],
yAxis: [{
name: '单位：MWh',
alignWithLabel: true,
"position": "left",
nameTextStyle: {
color: '#fff',
},
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',//线的类型 虚线0
opacity: 0.2//透明度
},
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(8, 16, 24, 0.27)'
},
textStyle: {
color: '#fff',
fontSize: '10'
}
},
axisLabel: {
textStyle: {
color: 'rgba(255, 255, 255, 1)',
}
},
}, {
name: '同比%',
nameTextStyle: {
color: '#fff',
align: 'left',
},
// nameLocation: 'end',
type: 'value',
position: 'right',
splitLine: { show: false },
axisLabel: {
textStyle: {
color: 'rgba(255, 255, 255, 1)',
}
},
}
],
grid: {
top: 30,
left: '1%',
right: '1%',
bottom: 20,
containLabel: true,
},
series: [
{
name: '当年用电量',
type: 'bar',
barWidth: '20%',
barMaxWidth: '24',
yAxisIndex: 0,
data: [50, 110, 110, 210, 150],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: 'rgba(63, 241, 217, 0.3)' },
{ offset: 0, color: 'rgba(63, 241, 217, 1)' },
])
},
},
{
name: '去年用电量',
type: 'bar',
yAxisIndex: 0,
barWidth: '20%',
barMaxWidth: '24',
data: [150, 90, 130, 80, 180],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: 'rgba(0, 221, 255, 0.3)' },
{ offset: 0, color: 'rgba(0, 221, 255, 1)' },
])
},
},
{
name: '同比',
type: 'line',
data: [150, 90, 130, 80, 180],
symbol: 'circle',
symbolSize: 8,
yAxisIndex: 1,
smooth: true,
itemStyle: {
normal: {
lineStyle: {
color: 'rgba(255, 100, 100, 1)',
},
color: 'rgba(255, 255, 255, 1)',
}
},
},
{
xAxisIndex: 1,
itemStyle: {
show: false,
color: 'transparent',
opacity: 0//透明度
},
showBackground: true,
data: [50, 110, 110, 210, 150],//这个数据无所谓，反正不显示，只要data的长度和另外两个一样长就行了
barWidth: '50%',
backgroundStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255, 255, 255, 0.05)' },
{ offset: 1, color: 'rgba(255, 255, 255, 0.05)' },
])
},
z: 0,
tooltip: {
show: false,
trigger: 'axis',
type: 'none',
},
type: 'bar'
}
]
};
initEcharts('#repair-require', option)
}
getEcharts();
const getEcharts2 = () => {
var option = {
tooltip: {
//提示框组件
trigger: 'axis',
tooltip: {
trigger: "axis",
axisPointer: {
//type: "shadow",
},
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
left: '1%',
right: '1%',
bottom: '6%',
top: 30,
padding: '0 0 10 0',
containLabel: true,
},
legend: {
show: true,
itemWidth: 14,
top: 0,
textStyle: {
color: "#fff"
},
},
dataZoom: [//给x轴设置滚动条
{
type: 'slider',//slider表示有滑动块的，inside表示内置的
// startValue: 8,//可用于设置开始显示的柱子的长度
// endValue: 1,//可用于设置结束显示的柱子的长度
start: 80,//默认为0 可设置滚动条从在后进行展示
end: 100,//默认为100
show: true,
xAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小
height: 8,//组件高度
left: '10%', //左边的距离
right: '10%',//右边的距离
bottom: -2,//右边的距离
borderColor: "#F4F4F4",
fillerColor: '#E7E7E7',
backgroundColor: '#F4F4F4',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: 'filter',
handleStyle: {
borderRadius: '20',
},
},
//下面这个属性是里面拖到
{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0,//默认为1
end: 100,//默认为100
moveOnMouseWheel: false,
preventDefaultMouseMove: false,
},
],
xAxis: [
{
type: 'category',
boundaryGap: true, //坐标轴两边留白
data: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '17:00', '8:00'],
axisLabel: {
//坐标轴刻度标签的相关设置。
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
margin: 15,
textStyle: {
color: 'rgba(255, 255, 255, 1)',
}
},
axisTick: {
//坐标轴刻度相关设置。
show: false,
},
axisLine: {
//坐标轴轴线相关设置
textStyle: {
color: 'rgba(255, 255, 255, 1)',
}
},
splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: false,
},
},
],
yAxis: [
{
type: 'value',
nameTextStyle: {
color: '#fff',
},
name: '企业数',
position: 'left',
splitNumber: 5,
axisLabel: {
textStyle: {
color: 'rgba(255, 255, 255, 1)',
}
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['#fff'],
opacity: 0.06,
},
},
},
{
type: 'value',
nameTextStyle: {
color: '#fff',
},
name: '用电量',
position: 'right',
splitNumber: 5,
axisLabel: {
textStyle: {
color: 'rgba(255, 255, 255, 1)',
}
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['#fff'],
opacity: 0.06,
},
},
},
],
series: [
{
name: '企业数',
yAxisIndex: 0,
type: 'pictorialBar', //设置类型为象形柱状图
symbol: 'roundRect', //图形类型，带圆角的矩形
symbolOffset: [-5, 0],
symbolMargin: '1', //图形垂直间隔
barWidth: '10%', //柱图宽度
barMaxWidth: '20%', //最大宽度
animationDelay: (dataIndex, params) => {
//每个图形动画持续时间
return params.index * 50;
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(63, 241, 217, 0.20)',
},
{
offset: 1,
color: '#3FF1D9',
},
])
},
z: 1,
barGap: 0, //柱间距离
symbolRepeat: true, //图形是否重复
symbolSize: [14, 5], //图形元素的尺寸
data: [9, 5, 4, 2, 9, 5, 4, 2, 10000, 5],
animationEasing: 'elasticOut', //动画效果
stack: '2',
},
{
name: '用电数',
yAxisIndex: 1,
type: 'pictorialBar', //设置类型为象形柱状图
symbol: 'roundRect', //图形类型，带圆角的矩形
barWidth: '10%', //柱图宽度
symbolOffset: [5, 0],
barMaxWidth: '20%', //最大宽度
symbolMargin: '1', //图形垂直间隔
animationDelay: (dataIndex, params) => {
//每个图形动画持续时间
return params.index * 50;
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#7E4602',
},
{
offset: 1,
color: '#FF9615',
},
])
},
z: 1,
barGap: 0, //柱间距离
symbolRepeat: true, //图形是否重复
symbolSize: [14, 5], //图形元素的尺寸
data: [2.9, 5, 4.4, 2.7, 5.7, 9, 5, 4, 2, 4],
animationEasing: 'elasticOut', //动画效果
stack: '1',
},
],
}; initEcharts('#distribution-charts', option)
}
getEcharts2()
//用电结构
var chartDom9 = document.getElementById("repair-require9");
myChart9 = echarts.init(chartDom9)
var option9;
option9 = {
tooltip: {
trigger: "item",
},
legend: false,
color: ["#F68500", "#3FF1D9", "#FF6464", "#00DDFF"],
series: [
{
name: "",
type: "pie",
radius: ["40%", "60%"],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
borderColor: '#202F41',
borderWidth: 3,
},
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 18, name: "峰" },
{ value: 5, name: "平" },
{ value: 7, name: "尖" },
{ value: 7, name: "谷" },
],
},
],
};
option9 && myChart9.setOption(option9);
//园区企业生产状态分析
var chartDom10 = document.getElementById("repair-require10");
myChart10 = echarts.init(chartDom10)
var option10;
option10 = {
tooltip: {
trigger: "item",
},
legend: false,
color: ["#5CB3FF", "#E86265", "#E9EFF2"],
series: [
{
name: "",
type: "pie",
radius: ["40%", "60%"],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
borderColor: '#202F41',
borderWidth: 3,
},
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 18, name: "达产" },
{ value: 5, name: "超产" },
{ value: 7, name: "不景气" },
],
},
],
};
option10 && myChart10.setOption(option10);
//企业生产工作制分析
var chartDom11 = document.getElementById("repair-require11");
myChart11 = echarts.init(chartDom11)
var option11;
option11 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
show: true,
textStyle: {
color: '#fff',
fontSize: 16
},
xAxis: {
itemHeight: 10,
itemWidth: 14,
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisTick: {
alignWithLabel: true
data: ['非规律生产', '白天8小时工作制', '24小时工作制'],
axisPointer: {
type: 'shadow'
},
axisLabel: {
interval: 0,
interval: 0,
textStyle: {
fontSize: 12, //更改坐标轴文字大小
color: "#A4A9BC",
fontSize: 14, //更改坐标轴文字大小
color: "#fff",
padding: [0, 0, 0, 0],
},
}
},
yAxis: {
}
],
yAxis: [
{
type: 'value',
name: '企业数：个',
nameTextStyle: {
color: "#fff",
fontSize: 16, top: -10,
},
min: 0,
max: 900,
interval: 300,
axisLabel: {
formatter: '{value} ',
interval: 0,
textStyle: {
fontSize: 12, //更改坐标轴文字大小
color: "#A4A9BC",
fontSize: 14, //更改坐标轴文字大小
color: "#fff",
padding: [0, 0, 0, 0],
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
type: 'dashed',
color: '#354050'
}
}
},
series: [{
name: '能耗',
type: 'bar',
barWidth: '60%',
data: [0, 0, 10, 20, 0, 40, 0, 0, 0, 0, 0, 0],
itemStyle: {
normal: {
color: '#fff',
{
type: 'value',
name: '用电量：KWh',
nameTextStyle: {
color: "#fff",
fontSize: 16
},
min: 0,
max: 900,
interval: 300,
axisLabel: {
interval: 0,
textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#fff",
padding: [0, 0, 0, 0],
},
emphasis: {
color: '#fff'
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#354050'
}
}
}]
}
initEcharts('#repair-require', option)
initEcharts('#repair-require1', option)
}
getEcharts();
}
],
series: [
{
name: '企业数：个',
type: 'pictorialBar',
symbol: 'rect',
data: [
200, 400, 900,
],
symbolSize: ['55%', 10],
symbolRepeat: true,
symbolMargin: 2,
barWidth: 40,
itemStyle: {
normal: {
color: {
type: 'liner',
x: 1,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FF9615', // 0% 处的颜色
},
{
offset: 1,
color: '#7E4602', // 100% 处的颜色
},
],
},
},
},
},
{
name: '用电量：KWh',
type: 'pictorialBar',
symbol: 'rect',
barGap: '1%',
yAxisIndex: 1,
data: [
100, 300, 600
],
symbolSize: ['55%', 10],
symbolRepeat: true,
symbolMargin: 2,
barWidth: 40,
itemStyle: {
normal: {
color: {
type: 'liner',
x: 1,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#3FF1D9', // 0% 处的颜色
},
{
offset: 1,
color: '#0D332E', // 100% 处的颜色
},
],
},
},
},
},
]
};
option11 && myChart11.setOption(option11);
window.onresize = function () {
myChart8.resize();
myChart9.resize();
myChart10.resize();
myChart11.resize();
};
window.onresize = function () {
Object.values(myChart).forEach(chart => chart.resize())
};
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论