Skip to content

R
report-html-template
Commit d7af2e59 by Tippi.Rao
Options

招商情况 chart 修改

parent 176abe1a
正在显示 包含 184 行增加 和 10 行删除
period-report/report-ioc.css
...@@ -125,6 +125,7 @@ body { ...@@ -125,6 +125,7 @@ body {
.invest-wrapper-content-left { .invest-wrapper-content-left {
color: #fff; color: #fff;
font-size: 28px; font-size: 28px;
margin-left: 16px;
} }
.invest-wrapper-content-left-item { .invest-wrapper-content-left-item {
...@@ -160,6 +161,10 @@ body { ...@@ -160,6 +161,10 @@ body {
font-weight: 700; font-weight: 700;
font-family: DIN Alternate-Bold; font-family: DIN Alternate-Bold;
} }
.invest-chart-wrapper {
width: 420px;
height: 165px;
}
.invest-wrapper-content-right { .invest-wrapper-content-right {
margin-left: 130px; margin-left: 130px;
margin-top: 40px; margin-top: 40px;
......
period-report/report-ioc.html
...@@ -35,7 +35,10 @@ ...@@ -35,7 +35,10 @@
</div> </div>
<div class="invest-wrapper-content-first-text">今日录入客户数</div> <div class="invest-wrapper-content-first-text">今日录入客户数</div>
<span class="invest-wrapper-content-customers">12</span> <span class="invest-wrapper-content-customers">12</span>
<div class="invest-wrapper-content-second-text">人，客户信息更新</div> <!-- <div class="invest-wrapper-content-second-text">人，客户信息更新</div> -->
<div class="invest-wrapper-content-second-text">人，录入公共商机库</div>
<span class="invest-wrapper-content-customers">24</span>
<div class="invest-wrapper-content-second-text">份，客户信息更新</div>
<span class="invest-wrapper-content-customers">9</span> <span class="invest-wrapper-content-customers">9</span>
<div class="invest-wrapper-content-last-text">份</div> <div class="invest-wrapper-content-last-text">份</div>
<div class="invest-wrapper-right-bracket"> <div class="invest-wrapper-right-bracket">
...@@ -50,7 +53,8 @@ ...@@ -50,7 +53,8 @@
</div> </div>
<div class="invest-wrapper-flex"> <div class="invest-wrapper-flex">
<div class="invest-wrapper-content-left"> <div class="invest-wrapper-content-left">
<div class="invest-wrapper-content-left-item"> <div id="investChart" class="invest-chart-wrapper"></div>
<!-- <div class="invest-wrapper-content-left-item">
<div class="invest-wrapper-content-left-item-img"> <div class="invest-wrapper-content-left-item-img">
<img src="./assets/qzxm.png" style="width: 100%; height: 100%" /> <img src="./assets/qzxm.png" style="width: 100%; height: 100%" />
</div> </div>
...@@ -104,7 +108,7 @@ ...@@ -104,7 +108,7 @@
/> />
<div class="invest-wrapper-content-left-item-type">签订合同</div> <div class="invest-wrapper-content-left-item-type">签订合同</div>
<div class="invest-wrapper-content-left-item-num">2</div> <div class="invest-wrapper-content-left-item-num">2</div>
</div> </div> -->
</div> </div>
<div class="invest-wrapper-content invest-wrapper-content-right"> <div class="invest-wrapper-content invest-wrapper-content-right">
<div <div
...@@ -113,10 +117,15 @@ ...@@ -113,10 +117,15 @@
<img src="./assets/bracket-left-big.png" /> <img src="./assets/bracket-left-big.png" />
</div> </div>
<div class="invest-wrapper-content-first-text"> <div class="invest-wrapper-content-first-text">
本<span>月</span>入录客户数 本<span>月</span>录入客户数
</div> </div>
<span class="invest-wrapper-content-customers">12</span> <span class="invest-wrapper-content-customers">12</span>
<div class="invest-wrapper-content-second-text">人，客户信息更新</div> <!-- <div class="invest-wrapper-content-second-text">人，客户信息更新</div> -->
<div class="invest-wrapper-content-second-text">
人，录入公共商机库
</div>
<span class="invest-wrapper-content-customers">24</span>
<div class="invest-wrapper-content-second-text">份，客户信息更新</div>
<span class="invest-wrapper-content-customers">9</span> <span class="invest-wrapper-content-customers">9</span>
<div class="invest-wrapper-content-last-text">份</div> <div class="invest-wrapper-content-last-text">份</div>
<br /> <br />
...@@ -514,6 +523,76 @@ ...@@ -514,6 +523,76 @@
); );
} }
var investDom = document.getElementById("investChart");
investChart = echarts.init(investDom);
var investOption = {
title: {
show: false,
},
color: [""],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
show: false,
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
top: 0,
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisLine: {
show: false,
},
// splitLine: { show: false },
},
yAxis: {
type: "category",
data: [
"成功项目",
"签订合同",
"后续跟进",
"现场来访",
"电话来访",
"潜在项目",
],
axisLabel: {
color: "#fff",
fontSize: 16,
},
},
series: [
{
name: "2012",
type: "bar",
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: "#00D8FF" },
{ offset: 1, color: "#00B6FF" },
]),
},
},
data: [9325, 3438, 1000, 1594, 4141, 1807],
},
],
};
investOption && investChart.setOption(investOption);
var chartDom = document.getElementById("repair-require"); var chartDom = document.getElementById("repair-require");
console.log("chartDom==", chartDom); console.log("chartDom==", chartDom);
myChart = echarts.init(chartDom); myChart = echarts.init(chartDom);
......
period-report/report.css
...@@ -73,6 +73,10 @@ ...@@ -73,6 +73,10 @@
.invest-wrapper-content-left-item-num { .invest-wrapper-content-left-item-num {
font-size: 1.21rem; font-size: 1.21rem;
} }
.invest-chart-wrapper {
width: 22.75rem;
height: 11.07rem;
}
.invest-wrapper-content-right { .invest-wrapper-content-right {
margin-left: 0; margin-left: 0;
margin-top: 1.79rem; margin-top: 1.79rem;
...@@ -527,6 +531,10 @@ ...@@ -527,6 +531,10 @@
.invest-wrapper-content-left-item-num { .invest-wrapper-content-left-item-num {
font-size: 22px; font-size: 22px;
} }
.invest-chart-wrapper {
width: 420px;
height: 165px;
}
.invest-wrapper-content-right { .invest-wrapper-content-right {
margin-left: 130px; margin-left: 130px;
margin-top: 40px; margin-top: 40px;
...@@ -894,6 +902,10 @@ ...@@ -894,6 +902,10 @@
.invest-wrapper-content-left-item-num { .invest-wrapper-content-left-item-num {
font-size: 34px; font-size: 34px;
} }
.invest-chart-wrapper {
width: 600px;
height: 225px;
}
.invest-wrapper-content-right { .invest-wrapper-content-right {
margin-left: 184px; margin-left: 184px;
margin-top: 60px; margin-top: 60px;
......
period-report/report.html
...@@ -39,7 +39,9 @@ ...@@ -39,7 +39,9 @@
</div> </div>
<div class="invest-wrapper-content-first-text">今日录入客户数</div> <div class="invest-wrapper-content-first-text">今日录入客户数</div>
<span class="invest-wrapper-content-customers">12</span> <span class="invest-wrapper-content-customers">12</span>
<div class="invest-wrapper-content-second-text">人，客户信息更新</div> <div class="invest-wrapper-content-second-text">人，录入公共商机库</div>
<span class="invest-wrapper-content-customers">24</span>
<div class="invest-wrapper-content-second-text">份，客户信息更新</div>
<span class="invest-wrapper-content-customers">9</span> <span class="invest-wrapper-content-customers">9</span>
<div class="invest-wrapper-content-last-text">份</div> <div class="invest-wrapper-content-last-text">份</div>
<div class="invest-wrapper-right-bracket"> <div class="invest-wrapper-right-bracket">
...@@ -54,7 +56,8 @@ ...@@ -54,7 +56,8 @@
</div> </div>
<div class="invest-wrapper-flex"> <div class="invest-wrapper-flex">
<div class="invest-wrapper-content-left"> <div class="invest-wrapper-content-left">
<div class="invest-wrapper-content-left-item"> <div id="investChart" class="invest-chart-wrapper"></div>
<!-- <div class="invest-wrapper-content-left-item">
<div class="invest-wrapper-content-left-item-img"> <div class="invest-wrapper-content-left-item-img">
<img src="./assets/qzxm.png" style="width: 100%; height: 100%" /> <img src="./assets/qzxm.png" style="width: 100%; height: 100%" />
</div> </div>
...@@ -108,7 +111,7 @@ ...@@ -108,7 +111,7 @@
/> />
<div class="invest-wrapper-content-left-item-type">签订合同</div> <div class="invest-wrapper-content-left-item-type">签订合同</div>
<div class="invest-wrapper-content-left-item-num">2</div> <div class="invest-wrapper-content-left-item-num">2</div>
</div> </div> -->
</div> </div>
<div class="invest-wrapper-content invest-wrapper-content-right"> <div class="invest-wrapper-content invest-wrapper-content-right">
<div <div
...@@ -117,10 +120,14 @@ ...@@ -117,10 +120,14 @@
<img src="./assets/bracket-left-big.png" /> <img src="./assets/bracket-left-big.png" />
</div> </div>
<div class="invest-wrapper-content-first-text"> <div class="invest-wrapper-content-first-text">
本<span>月</span>入录客户数 本<span>月</span>录入客户数
</div> </div>
<span class="invest-wrapper-content-customers">12</span> <span class="invest-wrapper-content-customers">12</span>
<div class="invest-wrapper-content-second-text">人，客户信息更新</div> <div class="invest-wrapper-content-second-text">
人，录入公共商机库
</div>
<span class="invest-wrapper-content-customers">24</span>
<div class="invest-wrapper-content-second-text">份，客户信息更新</div>
<span class="invest-wrapper-content-customers">9</span> <span class="invest-wrapper-content-customers">9</span>
<div class="invest-wrapper-content-last-text">份</div> <div class="invest-wrapper-content-last-text">份</div>
<br /> <br />
...@@ -465,6 +472,7 @@ ...@@ -465,6 +472,7 @@
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
var myChart, myChart2; var myChart, myChart2;
var investChart;
$(function () { $(function () {
var percent = parseInt($(".mask :first-child").text()); var percent = parseInt($(".mask :first-child").text());
...@@ -524,6 +532,75 @@ ...@@ -524,6 +532,75 @@
"rotate(" + (percent3 - 50) * 3.6 + "deg)" "rotate(" + (percent3 - 50) * 3.6 + "deg)"
); );
} }
var investDom = document.getElementById("investChart");
investChart = echarts.init(investDom);
var investOption = {
title: {
show: false,
},
color: [""],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
show: false,
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
top: 0,
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisLine: {
show: false,
},
// splitLine: { show: false },
},
yAxis: {
type: "category",
data: [
"成功项目",
"签订合同",
"后续跟进",
"现场来访",
"电话来访",
"潜在项目",
],
axisLabel: {
color: "#fff",
fontSize: 16,
},
},
series: [
{
name: "2012",
type: "bar",
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: "#00D8FF" },
{ offset: 1, color: "#00B6FF" },
]),
},
},
data: [9325, 3438, 1000, 1594, 4141, 1807],
},
],
};
investOption && investChart.setOption(investOption);
var chartDom = document.getElementById("repair-require"); var chartDom = document.getElementById("repair-require");
console.log("chartDom==", chartDom); console.log("chartDom==", chartDom);
...@@ -624,6 +701,7 @@ ...@@ -624,6 +701,7 @@
option && myChart2.setOption(option); option && myChart2.setOption(option);
window.onresize = function () { window.onresize = function () {
investChart.resize();
myChart.resize(); myChart.resize();
myChart2.resize(); myChart2.resize();
}; };
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论