Skip to content

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

庐山html

parent bdd55b6c
正在显示 包含 1050 行增加 和 0 行删除
lushan-report/assets/down_icon.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><defs><clipPath id="master_svg0_2491_18344"><rect x="0" y="0" width="18" height="18" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_2491_18344)"><g transform="matrix(1,0,0,-1,0,35.9775390625)"><path d="M9.3007209375,18.11948353125L15.4040609375,25.11337953125C15.5029609375,25.22627953125,15.5266609375,25.38659953125,15.4645609375,25.523259531249998C15.4025609375,25.65991953125,15.2662609375,25.74764953125,15.1162609375,25.74754953125L12.1162609375,25.74754953125C11.9254909375,25.74590953125,11.7634309375,25.88674953125,11.7384609375,26.07587953125C11.5135709375,27.70403953125,10.1552709375,34.90486953125,3.7235909375,35.97076953125C3.5507109375,36.00416953125,3.3773999375,35.91516953125,3.3038189375,35.755169531250004C3.2302379375,35.59516953125,3.2754199375,35.40566953125,3.4132529375000003,35.29616953125C4.5151809375,34.432569531249996,5.954440937499999,32.75946953125,6.3592309375,29.78196953125C6.514640937499999,28.57236953125,6.5897609375,27.35384953125,6.5841209375,26.134349531250002C6.5841709375,25.921709531250002,6.4144009375,25.74793953125,6.2018109374999995,25.74304953125L2.9050159375,25.74304953125C2.7549349375,25.74314953125,2.6186806375,25.65541953125,2.5566499375,25.518759531249998C2.4946190375,25.38209953125,2.5182876875,25.22177953125,2.6171643375,25.10887953125L8.725010937499999,18.11948353125C8.8773409375,17.94519803125,9.1483909375,17.94519803125,9.3007209375,18.11948353125Z" fill="#85F1A2" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
lushan-report/assets/up_icon.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><defs><clipPath id="master_svg0_2438_42385"><rect x="0" y="0" width="18" height="18" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_2438_42385)"><g><path d="M9.3007209375,0.130714L15.4040609375,7.12461C15.5029609375,7.23751,15.5266609375,7.39783,15.4645609375,7.53449C15.4025609375,7.67115,15.2662609375,7.75888,15.1162609375,7.75878L12.1162609375,7.75878C11.9254909375,7.75714,11.7634309375,7.89798,11.7384609375,8.08711C11.5135709375,9.71527,10.1552709375,16.9161,3.7235909375,17.982C3.5507109375,18.0154,3.3773999375,17.9264,3.3038189375,17.7664C3.2302379375,17.6064,3.2754199375,17.4169,3.4132529375000003,17.3074C4.5151809375,16.4438,5.954440937499999,14.7707,6.3592309375,11.7932C6.514640937499999,10.5836,6.5897609375,9.36508,6.5841209375,8.14558C6.5841709375,7.93294,6.4144009375,7.75917,6.2018109374999995,7.75428L2.9050159375,7.75428C2.7549349375,7.75438,2.6186806375,7.66665,2.5566499375,7.52999C2.4946190375,7.39333,2.5182876875,7.23301,2.6171643375,7.12011L8.725010937499999,0.130714C8.8773409375,-0.0435715,9.1483909375,-0.0435715,9.3007209375,0.130714Z" fill="#F18585" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
lushan-report/report.css 0 → 100644
html,
body,
.wrap {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
}
.wrap {
background: url(./assets/bg.png) no-repeat;
background-size: 100% 100%;
color: #fff;
}
.top-title {
height: 60px;
padding-bottom: 10px;
background: url(./assets/report-header.png) no-repeat;
background-size: 100% 100%;
font-size: 32px;
}
@media screen and (max-width: 750px) {
.top-title {
font-size: 20px;
background: none;
}
.invest-wrapper-flex .invest-wrapper-content-left {
width: 100%;
}
.content {
padding: 0 20px;
}
}
.content {
height: calc(100% - 70px);
max-width: 900px;
overflow: auto;
margin: auto;
}
.content::-webkit-scrollbar {
display: none;
}
.content-item {
margin-bottom: 20px;
}
.content-item-title {
margin-bottom: 10px;
font-weight: 600;
font-size: 20px;
}
.project-info .content-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.content-wrap-2 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}
.content-wrap-2 .operator-wrapper-content-box-title {
display: flex;
justify-content: center;
}
.operation-info .content-wrap {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 40px;
}
.invest-wrapper-flex {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.invest-wrapper-content-left {
width: 400px;
height: 300px;
}
.invest-chart-wrapper {
width: 100%;
height: 100%;
}
.invest-wrapper-content-right {
flex: 1;
display: flex;
align-items: center;
}
.invest-wrapper-content-right > .wrap {
padding: 0 10px;
}
.invest-wrapper-bracket-big {
height: 40px;
width: 5px;
}
.invest-wrapper-bracket-big > img {
width: 100%;
height: 100%;
}
.invest-wrapper-content-red-arrow {
display: inline-block;
width: 20px;
height: 20px;
background: url('./assets/up_icon.svg');
background-repeat: no-repeat;
}
.invest-wrapper-content-green-arrow {
display: inline-block;
width: 20px;
height: 20px;
background: url('./assets/down_icon.svg');
background-repeat: no-repeat;
}
.invest-wrapper-content-first-text {
display: flex;
align-items: baseline;
font-size: 14px;
}
.invest-wrapper-content-number {
font-size: 20px;
color: #f18585;
margin: 0 4px;
}
.project-wrapper {
justify-content: space-between;
margin-right: 30px;
}
.project-left {
width: 66px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 10px;
}
.project-img-1 {
background: url('./assets/icon_ylcs_di.png') no-repeat;
background-size: 100% 100%;
}
.project-img-2 {
background: url('./assets/icon_ylcs1_di.png') no-repeat;
background-size: 100% 100%;
}
.project-right {
flex: 1;
margin-left: 15px;
}
.project-right > p:nth-of-type(1) {
font-size: 15px;
color: #b3d6f9;
opacity: 0.8;
}
.project-right > p:nth-of-type(2) {
font-size: 20px;
margin-top: 4px;
}
.project-right > p:nth-of-type(2) > span {
font-size: 14px;
}
.operator-wrapper-content-box {
}
.operator-wrapper-content-box-title {
font-size: 14px;
color: #fff;
min-width: 80px;
text-align: center;
display: inline-block;
}
.operator-wrapper-content-box-chart {
background-size: cover;
padding-top: 4px;
box-sizing: border-box;
display: flex;
justify-content: center;
}
.operator-wrapper-content-box-progress {
background-size: cover;
padding-top: 4px;
box-sizing: border-box;
display: flex;
}
.chart-area {
padding: 6px;
width: 80px;
height: 80px;
box-sizing: border-box;
background: url('./assets/chart-bg.png') no-repeat;
background-size: cover;
}
.chart-area .chart-wrapper {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
.circle-bar {
position: relative;
height: 100%;
padding: 8px;
box-sizing: border-box;
}
.circle-bar-1,
.circle-bar-2,
.circle-bar-5 {
background: #00b5ff;
}
.circle-bar-3,
.circle-bar-7 {
background: #f3be28;
}
.circle-bar-4,
.circle-bar-6 {
background-color: #35b327;
}
.mask {
background-color: #2c3849;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.mask :first-child {
display: block;
}
.circle-bar-left,
.circle-bar-right {
background-color: #2c3849;
}
/*自身以及子元素都是圆*/
.circle-bar,
.circle-bar > * {
border-radius: 50%;
}
.circle-bar-left,
.circle-bar-right {
background-color: #2c3849;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.circle-bar-right {
clip: rect(0, auto, auto, 35px);
}
.circle-bar-left {
clip: rect(0, 35px, auto, 0);
}
.percent {
z-index: 2;
}
.percent-text {
opacity: 0.7;
font-size: 12px;
}
.chart-desc {
font-size: 14px;
flex: 1;
margin-left: 10px;
}
.chart-desc-task {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8px;
box-sizing: border-box;
padding-bottom: 6px;
position: relative;
}
.chart-desc-task::after {
content: '';
height: 18px;
width: 100%;
background: url(./assets/desc-line.png) no-repeat;
background-size: 100% 16px;
position: absolute;
bottom: 0;
left: 0;
}
.chart-desc-text {
color: #fff;
opacity: 0.8;
}
.chart-desc-value {
margin-left: auto;
margin-right: 10px;
color: #fff;
font-weight: 700;
font-family: DIN Alternate-Bold;
}
.chart-desc-unfinished-value {
color: #ff6464;
font-weight: 700;
margin-left: auto;
margin-right: 10px;
font-family: DIN Alternate-Bold;
}
.chart-desc-daily-legend {
background: rgba(92, 179, 255, 0.302);
opacity: 1;
border: 2px solid #5cb3ff;
margin-right: 4px;
width: 4px;
height: 4px;
}
.chart-desc-handle-legend {
background: rgba(255, 100, 100, 0.302);
opacity: 1;
border: 2px solid #ff6464;
margin-right: 4px;
width: 4px;
height: 4px;
}
.will-finished {
background: rgba(61, 235, 213, 0.302);
opacity: 1;
border: 2px solid #3debd5;
margin-right: 4px;
width: 6px;
height: 6px;
}
.repair-require-chart {
width: 80px;
height: 80px;
background: url(./assets/repair-require-bg.png) no-repeat;
background-size: 100% 100%;
}
.repair-require-chart-wrapper,
.contract-chart-wrapper {
height: 100%;
}
.contract-chart {
width: 80px;
height: 80px;
background: url(./assets/contract-bg.png) no-repeat;
background-size: 100% 100%;
}
.advise-info .content-wrap {
display: block;
}
.advise-wrapper-content-item {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.advise-wrapper-content-item img {
width: 13px;
height: 13px;
margin-right: 13px;
}
.advise-wrapper-content-item-text {
color: #fff;
}
lushan-report/report.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title></title>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<!-- 如果你没有echarts.min.js文件，用下面的语句代替即可
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
-->
<link rel="stylesheet" href="report.css" />
</head>
<body>
<div class="wrap">
<div class="top-title flex">12月12日-12月8日芦山经开区周报</div>
<div class="content">
<div class="content-item project-info">
<div class="content-item-title">项目情况</div>
<!-- 日报 周报-->
<div class="content-wrap">
<div class="project-wrapper flex">
<div class="project-left project-img-1">
<img src="./assets/icon_ylcs.png" class="project-img" alt="" />
</div>
<div class="project-right">
<p>政府投资项目(进行中)</p>
<p>235 <span>个</span></p>
</p>
</div>
</div>
<div class="project-wrapper flex">
<div class="project-left project-img-2">
<img src="./assets/icon_ylcs1.png" class="project-img" alt="" />
</div>
<div class="project-right">
<p>政府投资项目(进行中)</p>
<p>235 <span>个</span></p>
</p>
</div>
</div>
</div>
<!-- 月报 季报 -->
<div class="content-wrap">
<div class="invest-wrapper-flex">
<div class="invest-wrapper-content-left">
<div id="investChart" class="invest-chart-wrapper"></div>
</div>
<div class="invest-wrapper-content-right">
<div class="invest-wrapper-bracket-big">
<img src="./assets/bracket-left-big.png" />
</div>
<div class="wrap">
<div class="invest-wrapper-content-first-text">
已完成项目数
<span class="invest-wrapper-content-number">12</span>
个，年度投资完成率
<span class="invest-wrapper-content-number">93%</span>
</div>
<br />
<div class="invest-wrapper-content-first-text">
较上月上升
<span class="invest-wrapper-content-number">9%</span>
<!--正数-->
<div class="invest-wrapper-content-red-arrow"></div>
<!--负数-->
<div class="invest-wrapper-content-green-arrow"></div>
</div>
</div>
<div class="invest-wrapper-bracket-big">
<img src="./assets/bracket-right-big.png" />
</div>
</div>
</div>
</div>
</div>
<div class="content-item operation-info">
<div class="content-item-title">运营情况</div>
<div class="content-wrap">
<div class="operator-wrapper-content-box">
<div class="operator-wrapper-content-box-title circle-title">
巡检总览
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar circle-bar-1">
<div class="circle-bar-left circle-bar-left-1"></div>
<div class="circle-bar-right circle-bar-right-1"></div>
<!-- 遮罩层，显示百分比 -->
<div class="mask mask-1">
<span class="percent">5%</span>
<span class="percent-text">完成率</span>
</div>
</div>
</div>
<div class="chart-desc">
<div class="chart-desc-task">
<div class="chart-desc-text">任务数</div>
<div class="chart-desc-value">32</div>
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-text">未完成</div>
<div class="chart-desc-unfinished-value">40</div>
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="operator-wrapper-content-box-title circle-title">
企业类型
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div id="companyType" class="chart-wrapper"></div>
</div>
<div class="chart-desc companyType-desc">
<!-- <div class="chart-desc-task chart-desc">
<div class="chart-desc-text">纺织</div>
<div class="chart-desc-value">32</div>
</div>
<div class="chart-desc-task chart-desc">
<div class="chart-desc-text">锂电新材料</div>
<div class="chart-desc-value">40</div>
</div>
<div class="chart-desc-task chart-desc">
<div class="chart-desc-text">食/药品加工</div>
<div class="chart-desc-value">40</div>
</div>
<div class="chart-desc-task chart-desc">
<div class="chart-desc-text">其他</div>
<div class="chart-desc-value">40</div>
</div> -->
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="operator-wrapper-content-box-title circle-title">
设备监控
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar circle-bar-3">
<div class="circle-bar-left circle-bar-left-3"></div>
<div class="circle-bar-right circle-bar-right-3"></div>
<!-- 遮罩层，显示百分比 -->
<div class="mask mask-3">
<span class="percent">30%</span>
<span class="percent-text">在线率</span>
</div>
</div>
</div>
<div class="chart-desc">
<div class="chart-desc-task">
<div class="chart-desc-text">设备数量</div>
<div class="chart-desc-value">32</div>
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-text">离线设备</div>
<div class="chart-desc-unfinished-value">30</div>
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="operator-wrapper-content-box-title circle-title">
投诉管理
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar circle-bar-4">
<div class="circle-bar-left circle-bar-left-4"></div>
<div class="circle-bar-right circle-bar-right-4"></div>
<!-- 遮罩层，显示百分比 -->
<div class="mask mask-4">
<span class="percent">30%</span>
<span class="percent-text">处理率</span>
</div>
</div>
</div>
<div class="chart-desc">
<div class="chart-desc-task">
<div class="chart-desc-text">投诉总数</div>
<div class="chart-desc-value">32</div>
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-text">未处理</div>
<div class="chart-desc-unfinished-value">30</div>
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="operator-wrapper-content-box-title repair-title">
设备告警
</div>
<div class="operator-wrapper-content-box-chart">
<div class="pie-chart-area repair-require-chart">
<div id="repair-require" class="repair-require-chart-wrapper"></div>
</div>
<div class="chart-desc chart-desc-other repair-desc">
<!-- <div class="chart-desc-task echart-desc">
<div class="chart-desc-daily-legend"></div>
<div class="chart-desc-text">噪音告警</div>
<div class="chart-desc-value">18</div>
</div>
<div class="chart-desc-task echart-desc">
<div class="chart-desc-handle-legend"></div>
<div class="chart-desc-text">PM2.5告警</div>
<div class="chart-desc-value">5</div>
</div>
<div class="chart-desc-task echart-desc">
<div class="chart-desc-handle-legend"></div>
<div class="chart-desc-text">PM10告警</div>
<div class="chart-desc-value">5</div>
</div> -->
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="operator-wrapper-content-box-title contract-title contract-title-first">
企业诉求
</div>
<div class="operator-wrapper-content-box-chart">
<div class="pie-chart-area contract-chart contract-chart-first">
<div id="contract" class="contract-chart-wrapper"></div>
</div>
<div class="chart-desc chart-desc-other contract-new">
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-text">诉求总数</div>
<div class="chart-desc-unfinished-value" style="color: #5cb3ff">
30
</div>
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-text">待解决</div>
<div class="chart-desc-unfinished-value">30</div>
</div>
<!-- <div class="chart-desc-task desc-contract">
<div class="chart-desc-daily-legend"></div>
<div class="chart-desc-text">新增合同</div>
<div class="chart-desc-value">18</div>
</div>
<div class="chart-desc-task chart-desc-unfinished contract-unfinished">
<div class="chart-desc-handle-legend"></div>
<div class="chart-desc-text">到期合同</div>
<div class="chart-desc-unfinished-value">5</div>
</div>
<div class="chart-desc-task chart-desc-unfinished contract-unfinished">
<div class="will-finished"></div>
<div class="chart-desc-text">即将到期</div>
<div class="chart-desc-unfinished-value">7</div>
</div> -->
</div>
</div>
</div>
</div>
<div class="content-wrap-2">
<div class="operator-wrapper-content-box">
<div class="operator-wrapper-content-box-title circle-title">
企业安评
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar circle-bar-5">
<div class="circle-bar-left circle-bar-left-5"></div>
<div class="circle-bar-right circle-bar-right-5"></div>
<!-- 遮罩层，显示百分比 -->
<div class="mask mask-5">
<span class="percent">5%</span>
<span class="percent-text">完成率</span>
</div>
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="operator-wrapper-content-box-title circle-title">
企业环评
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar circle-bar-6">
<div class="circle-bar-left circle-bar-left-6"></div>
<div class="circle-bar-right circle-bar-right-6"></div>
<!-- 遮罩层，显示百分比 -->
<div class="mask mask-6">
<span class="percent">5%</span>
<span class="percent-text">完成率</span>
</div>
</div>
</div>
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="operator-wrapper-content-box-title circle-title">
员工职评
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar circle-bar-7">
<div class="circle-bar-left circle-bar-left-7"></div>
<div class="circle-bar-right circle-bar-right-7"></div>
<!-- 遮罩层，显示百分比 -->
<div class="mask mask-7">
<span class="percent">5%</span>
<span class="percent-text">完成率</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-item advise-info">
<div class="content-item-title">运营风险及建议</div>
<div class="content-wrap">
<div class="advise-wrapper-content-item">
<img src="./assets/icon.png" />
<div class="advise-wrapper-content-item-text">
秩序维护部巡检任务完成度不足，需加强管控并找到完成不及时原因。
</div>
</div>
<div class="advise-wrapper-content-item">
<img src="./assets/icon.png" />
<div class="advise-wrapper-content-item-text">
安防部巡检任务完成度不足，需加强管控并找到完成不及时原因。
</div>
</div>
<div class="advise-wrapper-content-item">
<img src="./assets/icon.png" />
<div class="advise-wrapper-content-item-text">
设备告警工单处理不及时，易导致设备故障发现不及时。
</div>
</div>
<div class="advise-wrapper-content-item">
<!-- 周报，月报，季报，半年报，年报， 日报没有此条 -->
<img src="./assets/icon.png" />
<div class="advise-wrapper-content-item-text">
合同续租或退租信息更新不及时，请尽快处理。
</div>
</div>
<div class="advise-wrapper-content-item">
<!-- 月报，季报，半年报，年报 日报，周报没有此条，-->
<img src="./assets/icon.png" />
<div class="advise-wrapper-content-item-text">
水电费单企业签收率较低，请督促企业通过小程序签收。
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
let myChart, myChart2, companyTypeChart, investChart;
const colorList = [
'#49C6E1',
'#7C71F8',
'#B9C7D5',
'#F18585',
'#5CB3FF',
'#3DEBD5',
'#35B327',
];
function getDiv(name, value, color) {
return `<div class="chart-desc-task echart-desc">
<div class="chart-desc-daily-legend" style="background-color: ${color};opacity: 0.5; border: 2px solid ${color};"></div>
<div class="chart-desc-text">${name}</div>
<div class="chart-desc-value">${value}</div>
</div>`;
}
function setProcessValue(key) {
let percent = parseInt($(`.mask-${key} :first-child`).text());
console.log('percent==', percent);
var baseColor = $(`.circle-bar-${key}`).css('background');
if (percent <= 50) {
$(`.circle-bar-right-${key}`).css(
'transform',
'rotate(' + percent * 3.6 + 'deg)'
);
} else {
$(`.circle-bar-right-${key}`).css({
transform: 'rotate(0deg)',
background: baseColor,
});
$(`.circle-bar-left-${key}`).css(
'transform',
'rotate(' + (percent - 50) * 3.6 + 'deg)'
);
}
}
$(function () {
setProcessValue(1);
setProcessValue(3);
setProcessValue(4);
setProcessValue(5);
setProcessValue(6);
setProcessValue(7);
let investDom = document.getElementById('investChart');
if (investDom) {
investChart = echarts.init(investDom);
const data = []
let investOption = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
show: true,
right: "50%",
itemWidth: 10,
itemHeight: 5,
textStyle: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 16,
},
},
grid: {
left: "3%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
minInterval: 50,
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, 1)",
opacity: 0.4,
},
},
axisLabel: {
show: true,
color: "rgba(255, 255, 255, 0.8)",
fontWeight: "lighter",
},
},
yAxis: {
type: "category",
data: ["严重滞后", "可追赶", "正常状态"],
axisLabel: {
show: true,
color: "rgba(255, 255, 255, 0.8)",
fontWeight: "lighter",
},
},
series: [
{
name: "政府投资",
type: "bar",
barWidth: "20%",
data: [153, 153, 153],
label: {
show: true,
position: "insideRight",
fontSize: 18,
textBorderColor: "rgba(108, 106, 106, 1)",
textBorderWidth: 3,
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 1, color: "rgba(0, 216, 255, 1)" },
{ offset: 0, color: "rgba(0, 182, 255, 1)" },
]),
},
},
{
name: "招商引资",
type: "bar",
barWidth: "20%",
data: [106, 106, 106],
label: {
show: true,
position: "insideRight",
fontSize: 18,
textBorderColor: "rgba(108, 106, 106, 1)",
textBorderWidth: 3,
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 1, color: "rgba(162, 246, 152, 1)" },
{ offset: 0, color: "rgba(53, 179, 39, 1)" },
]),
},
},
],
};
investOption && investChart.setOption(investOption);
}
let companyTypeDom = document.getElementById('companyType');
if (companyTypeDom) {
companyTypeChart = echarts.init(companyTypeDom);
const data = [
{ value: 33, name: '纺织' },
{ value: 28, name: '锂电新材料' },
{ value: 22, name: '食/药品加工' },
{ value: 20, name: '其他' },
];
let companyTypeDesc = document.querySelector('.companyType-desc');
const el = data.forEach((item, index) => {
const div = getDiv(item.name, item.value, colorList[index]);
companyTypeDesc.innerHTML += div;
});
let companyTypeOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
color: colorList,
legend: {
show: false,
},
grid: {
containLabel: true,
},
series: [
{
name: 'Radius Mode',
type: 'pie',
radius: [0, 30],
roseType: 'radius',
label: {
show: false,
},
data: data,
},
],
};
companyTypeOption && companyTypeChart.setOption(companyTypeOption);
}
let chartDom = document.getElementById('repair-require');
if (chartDom) {
myChart = echarts.init(chartDom);
const data = [
{ value: 28, name: '噪音告警' },
{ value: 22, name: 'PM2.5告警' },
{ value: 20, name: 'PM10告警' },
];
let repaiDesc = document.querySelector('.repair-desc');
const el = data.forEach((item, index) => {
const div = getDiv(item.name, item.value, colorList[index]);
repaiDesc.innerHTML += div;
});
let option = {
tooltip: {
trigger: 'item',
},
grid: {
left: 30,
},
legend: false,
color: colorList,
series: [
{
name: '',
type: 'pie',
radius: ['75%', '88%'],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
borderColor: '',
borderWidth: 2,
},
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: data,
},
],
};
option && myChart.setOption(option);
}
let chartDom2 = document.getElementById('contract');
if (chartDom2) {
myChart2 = echarts.init(chartDom2);
const data = [
{ value: 18, name: '金融诉求' },
{ value: 5, name: '招工诉求' },
];
let contractDesc = document.querySelector('.contract-new');
const el = data.forEach((item, index) => {
const div = getDiv(item.name, item.value, colorList[index]);
contractDesc.innerHTML += div;
});
let option = {
tooltip: {
trigger: 'item',
},
legend: false,
color: colorList,
series: [
{
name: '',
type: 'pie',
radius: ['75%', '88%'],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
borderColor: '',
borderWidth: 2,
},
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: data,
},
],
};
option && myChart2.setOption(option);
}
window.onresize = function () {
investChart.resize();
companyTypeChart.resize();
myChart.resize();
myChart2.resize();
};
});
</script>
</body>
</html>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论