|
|
@@ -74,7 +74,22 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="table-container2">
|
|
|
+ <div class="schedule ">
|
|
|
+ <div style="display: inline-block; background-color: rgba(215,202,135,0.34); padding: 10px; border-radius: 10px;">
|
|
|
+ <button class="span-left" @click="selectcounty(0)">省</button>
|
|
|
+ </div>
|
|
|
+ <div style="display: inline-block; background-color: rgba(33,152,143,0.4); padding: 10px; border-radius: 10px;">
|
|
|
+ <button class="span-left" @click="selectcounty(1)">市</button>
|
|
|
+ </div>
|
|
|
+ <div style="display: inline-block; background-color: rgba(215,202,135,0.34); padding: 10px; border-radius: 10px;">
|
|
|
+ <button class="span-left" @click="selectcounty(2)">区</button>
|
|
|
+ </div>
|
|
|
+ <div style="display: inline-block; background-color: rgba(33,152,143,0.4); padding: 10px; border-radius: 10px;">
|
|
|
+ <button class="span-right" @click="selectcounty(3)">乡镇</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="button-container">
|
|
|
<button class="button" @click="btnMethod(0)">告警数量</button>
|
|
|
<button class="button" @click="btnMethod(1)">完成率</button>
|
|
|
@@ -103,15 +118,13 @@
|
|
|
<div class="span-right">完成率</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div id="chart" style="position: fixed; bottom: 0; left: 0; background-color: rgba(97, 132, 219, 0.4); width: 300px; height: 200px;">
|
|
|
+ <div id="chart" style="position: fixed; bottom: 0; left: 0; background-color: rgba(97, 132, 219, 0.4); width: 400px; height: 300px;">
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="echarts-containers">
|
|
|
|
|
|
- <div id="echarts-container" style="position: fixed; bottom: 0; left: 0; background-color: rgba(97, 132, 219, 0.4); width: 300px; height: 200px;"></div>
|
|
|
- </div>
|
|
|
+
|
|
|
<div class="table-container">
|
|
|
- <div class="schedule" style="width: 300px; margin: auto;">
|
|
|
+ <div class="schedule" style="width: 500px; margin: auto;">
|
|
|
<div class="schedule">
|
|
|
<div style="display: inline-block; background-color: rgba(232,219,129,0.26); padding: 20px; border-radius: 20px;">
|
|
|
<div class="span-left">摄像机在线数量</div>
|
|
|
@@ -121,7 +134,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div id="twochart" style="position: fixed; bottom: 0; left: 0; background-color: rgba(97, 132, 219, 0.4); width: 300px; height: 200px;"></div>
|
|
|
+ <div id="twochart" style="position: fixed; bottom: 0; left: 0; background-color: rgba(97, 132, 219, 0.4); width: 400px; height: 200px;"></div>
|
|
|
</div>
|
|
|
<!-- echarts 图表容器 -->
|
|
|
|
|
|
@@ -201,10 +214,12 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.initEcharts();
|
|
|
+
|
|
|
this.oneEchart();
|
|
|
this.twochart();
|
|
|
+ this.selectcounty(0);
|
|
|
this.echarts1q()
|
|
|
+
|
|
|
this.btnMethod(0)
|
|
|
this.echarts3q()
|
|
|
this.echarts4q()
|
|
|
@@ -547,6 +562,31 @@ export default {
|
|
|
};
|
|
|
_doc.setOption(option)
|
|
|
},
|
|
|
+ selectcounty(num){
|
|
|
+ this.areaBoxNum = num;
|
|
|
+ let param = this.areaBoxNum;
|
|
|
+ this.currentPage1 = 1;
|
|
|
+
|
|
|
+ this.$requestSDK(
|
|
|
+ "/jilin-devloper/jilin/getEvenAreaCompletion",
|
|
|
+ { param },
|
|
|
+ {},
|
|
|
+ "post"
|
|
|
+ ).then(response => {
|
|
|
+ const result = response.rows;
|
|
|
+
|
|
|
+ // 提取数据
|
|
|
+ const names = result.rows.map(o => o.regionName);
|
|
|
+ const values = result.rows.map(o => o.allNum);
|
|
|
+ const values1 = result.rows.map(o => o.completionRates);
|
|
|
+
|
|
|
+ // 调用echarts2q函数，并传递处理后的数据
|
|
|
+ this.echarts2q(names, values, values1);
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('Error fetching data:', error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
btnMethod(num){
|
|
|
this.num=num
|
|
|
this.currentPage1 = 1
|
|
|
@@ -1128,408 +1168,205 @@ export default {
|
|
|
{},
|
|
|
"post"
|
|
|
)
|
|
|
- let _doc = echarts.init(document.getElementById('chart'));
|
|
|
- var getName = [
|
|
|
- "处理中",
|
|
|
- ];
|
|
|
- var getValue = [219];
|
|
|
- var max = Math.max.apply(null, getValue);
|
|
|
- var getMax = [];
|
|
|
- for (let i = 0; i < getName.length; i++) {
|
|
|
- getMax.push(max);
|
|
|
- }
|
|
|
- let option = {
|
|
|
- backgroundColor: "#003366",
|
|
|
- grid: {
|
|
|
- left: "8%", // Adjusted to 2%
|
|
|
- right: "2%", // Adjusted to 1%
|
|
|
- bottom: "1%", // Adjusted to 1%
|
|
|
- top: "1%", // Adjusted to 1%
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- type: "none",
|
|
|
+ // .then(response => {
|
|
|
+ // let handleNum = response.data.handleNum;
|
|
|
+ let _doc = echarts.init(document.getElementById('chart'));
|
|
|
+ var getName = [
|
|
|
+ "处理中",
|
|
|
+ ];
|
|
|
+ var getValue = [277];
|
|
|
+ var max = Math.max.apply(null, getValue);
|
|
|
+ var getMax = [];
|
|
|
+ for (let i = 0; i < getName.length; i++) {
|
|
|
+ getMax.push(max);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ backgroundColor: "#003366",
|
|
|
+ grid: {
|
|
|
+ left: "8%", // Adjusted to 2%
|
|
|
+ right: "2%", // Adjusted to 1%
|
|
|
+ bottom: "1%", // Adjusted to 1%
|
|
|
+ top: "1%", // Adjusted to 1%
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- formatter: function (params) {
|
|
|
- return params[0].name + " : " + params[0].value;
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "none",
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ return params[0].name + " : " + params[0].value;
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- show: false,
|
|
|
- type: "value",
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- inverse: true,
|
|
|
- offset: 100,
|
|
|
+ xAxis: {
|
|
|
+ show: false,
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ inverse: true,
|
|
|
+ offset: 100,
|
|
|
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- align: "left",
|
|
|
- textStyle: {
|
|
|
- color: "#66cc00",
|
|
|
- },
|
|
|
- formatter: function (value, index) {
|
|
|
- var num = "";
|
|
|
- var str = "";
|
|
|
- let no = "NO.";
|
|
|
- num = index + 1;
|
|
|
- if (index === 0) {
|
|
|
- str = "{no1|" + no + "} {num1|" + num + "} {title1|" + value + "}";
|
|
|
- } else if (index === 1) {
|
|
|
- str = "{no2|" + no + "} {num2|" + num + "} {title2|" + value + "}";
|
|
|
- } else if (index === 2) {
|
|
|
- str = "{no3|" + no + "} {num3|" + num + "} {title3|" + value + "}";
|
|
|
- } else {
|
|
|
- str = "{no|" + no + "} {num|" + num + "} {title|" + value + "}";
|
|
|
- }
|
|
|
- return str;
|
|
|
- },
|
|
|
- rich: {
|
|
|
- no: {
|
|
|
- color: "#ffcccc",
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- no1: {
|
|
|
- color: "#ff4d4d",
|
|
|
- fontSize: 14,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ align: "left",
|
|
|
+ textStyle: {
|
|
|
+ color: "#66cc00",
|
|
|
},
|
|
|
- no2: {
|
|
|
- color: "#4dd2ff",
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- no3: {
|
|
|
- color: "#ffff00",
|
|
|
- fontSize: 14,
|
|
|
+ formatter: function (value, index) {
|
|
|
+ var num = "";
|
|
|
+ var str = "";
|
|
|
+ let no = "NO.";
|
|
|
+ num = index + 1;
|
|
|
+ if (index === 0) {
|
|
|
+ str = "{no1|" + no + "} {num1|" + num + "} {title1|" + value + "}";
|
|
|
+ } else if (index === 1) {
|
|
|
+ str = "{no2|" + no + "} {num2|" + num + "} {title2|" + value + "}";
|
|
|
+ } else if (index === 2) {
|
|
|
+ str = "{no3|" + no + "} {num3|" + num + "} {title3|" + value + "}";
|
|
|
+ } else {
|
|
|
+ str = "{no|" + no + "} {num|" + num + "} {title|" + value + "}";
|
|
|
+ }
|
|
|
+ return str;
|
|
|
},
|
|
|
- num: {
|
|
|
- color: "#fff",
|
|
|
- backgroundColor: "#ffcccc",
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
- fontSize: 14,
|
|
|
- align: "center",
|
|
|
- borderRadius: 100,
|
|
|
- },
|
|
|
- num1: {
|
|
|
- color: "#fff",
|
|
|
- backgroundColor: "#ff4d4d",
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
- fontSize: 14,
|
|
|
- align: "center",
|
|
|
- borderRadius: 100,
|
|
|
- },
|
|
|
- num2: {
|
|
|
- color: "#fff",
|
|
|
- backgroundColor: "#4dd2ff",
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
- fontSize: 14,
|
|
|
- align: "center",
|
|
|
- borderRadius: 100,
|
|
|
- },
|
|
|
- num3: {
|
|
|
- color: "#fff",
|
|
|
- backgroundColor: "#ffff00",
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
- fontSize: 14,
|
|
|
- align: "center",
|
|
|
- borderRadius: 100,
|
|
|
- },
|
|
|
- title: {
|
|
|
- color: "#ffcccc",
|
|
|
- },
|
|
|
- title1: {
|
|
|
- color: "#ff4d4d",
|
|
|
- },
|
|
|
- title2: {
|
|
|
- color: "#4dd2ff",
|
|
|
- },
|
|
|
- title3: {
|
|
|
- color: "#ffff00",
|
|
|
+ rich: {
|
|
|
+ no: {
|
|
|
+ color: "#ffcccc",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ no1: {
|
|
|
+ color: "#ff4d4d",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ no2: {
|
|
|
+ color: "#4dd2ff",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ no3: {
|
|
|
+ color: "#ffff00",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ num: {
|
|
|
+ color: "#fff",
|
|
|
+ backgroundColor: "#ffcccc",
|
|
|
+ width: 20,
|
|
|
+ height: 20,
|
|
|
+ fontSize: 14,
|
|
|
+ align: "center",
|
|
|
+ borderRadius: 100,
|
|
|
+ },
|
|
|
+ num1: {
|
|
|
+ color: "#fff",
|
|
|
+ backgroundColor: "#ff4d4d",
|
|
|
+ width: 20,
|
|
|
+ height: 20,
|
|
|
+ fontSize: 14,
|
|
|
+ align: "center",
|
|
|
+ borderRadius: 100,
|
|
|
+ },
|
|
|
+ num2: {
|
|
|
+ color: "#fff",
|
|
|
+ backgroundColor: "#4dd2ff",
|
|
|
+ width: 20,
|
|
|
+ height: 20,
|
|
|
+ fontSize: 14,
|
|
|
+ align: "center",
|
|
|
+ borderRadius: 100,
|
|
|
+ },
|
|
|
+ num3: {
|
|
|
+ color: "#fff",
|
|
|
+ backgroundColor: "#ffff00",
|
|
|
+ width: 20,
|
|
|
+ height: 20,
|
|
|
+ fontSize: 14,
|
|
|
+ align: "center",
|
|
|
+ borderRadius: 100,
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ color: "#ffcccc",
|
|
|
+ },
|
|
|
+ title1: {
|
|
|
+ color: "#ff4d4d",
|
|
|
+ },
|
|
|
+ title2: {
|
|
|
+ color: "#4dd2ff",
|
|
|
+ },
|
|
|
+ title3: {
|
|
|
+ color: "#ffff00",
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- data: getName,
|
|
|
- },
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- inverse: true,
|
|
|
- offset: -25,
|
|
|
- axisTick: "none",
|
|
|
- axisLine: "none",
|
|
|
- show: true,
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: "#ffffff",
|
|
|
- fontSize: "12",
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
- },
|
|
|
- data: getValue,
|
|
|
- },
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "告警数量",
|
|
|
- type: "bar",
|
|
|
- zlevel: 1,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- barBorderRadius: 5, // Adjusted to 5
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "rgb(128,204,255,1)",
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "rgb(46,200,207,1)",
|
|
|
- },
|
|
|
- ]),
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
- },
|
|
|
- barWidth: 5, // Adjusted to 5
|
|
|
- data: getValue,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "完结率",
|
|
|
- type: "bar",
|
|
|
- barWidth: 5, // Adjusted to 5
|
|
|
- barGap: "-50%", // Adjusted to "-50%"
|
|
|
- data: getMax,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: "rgba(24,31,68,1)",
|
|
|
- barBorderRadius: 5, // Adjusted to 5
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
+ data: getName,
|
|
|
},
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- _doc.setOption(option)
|
|
|
- },
|
|
|
- initEcharts() {
|
|
|
- let param = {"queryStartTime":"2023-08-04 00:00:00","queryEndTime":"2023-08-09 23:59:59","warningSourceList":["1","2"],"warningTypeList":["1212102"],"deviceCodeIndustryList":["11010800831327000008","10210010010000"],"orderStatusList":[]}
|
|
|
- this.$requestSDK(
|
|
|
- "/jilin-devloper/jilin/getEvenAreaCompletion",
|
|
|
- param,
|
|
|
- {},
|
|
|
- "post"
|
|
|
- )
|
|
|
- let _doc = echarts.init(document.getElementById('echarts-container'));
|
|
|
- var getName = [
|
|
|
- "四川省",
|
|
|
- "长春市",
|
|
|
- "北京市",
|
|
|
- "湖南市",
|
|
|
- "辽宁省",
|
|
|
- "湖北省",
|
|
|
-
|
|
|
- ];
|
|
|
- var getValue = [219, 241, 174, 44, 435, 617];
|
|
|
- var max = Math.max.apply(null, getValue);
|
|
|
- var getMax = [];
|
|
|
- for (let i = 0; i < getName.length; i++) {
|
|
|
- getMax.push(max);
|
|
|
- }
|
|
|
- let option = {
|
|
|
- backgroundColor: "#003366",
|
|
|
- grid: {
|
|
|
- left: "8%", // Adjusted to 2%
|
|
|
- right: "2%", // Adjusted to 1%
|
|
|
- bottom: "1%", // Adjusted to 1%
|
|
|
- top: "1%", // Adjusted to 1%
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- type: "none",
|
|
|
- },
|
|
|
- formatter: function (params) {
|
|
|
- return params[0].name + " : " + params[0].value;
|
|
|
- },
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- show: false,
|
|
|
- type: "value",
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- inverse: true,
|
|
|
- offset: 100,
|
|
|
-
|
|
|
- axisLabel: {
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ inverse: true,
|
|
|
+ offset: -25,
|
|
|
+ axisTick: "none",
|
|
|
+ axisLine: "none",
|
|
|
show: true,
|
|
|
- align: "left",
|
|
|
- textStyle: {
|
|
|
- color: "#66cc00",
|
|
|
- },
|
|
|
- formatter: function (value, index) {
|
|
|
- var num = "";
|
|
|
- var str = "";
|
|
|
- let no = "NO.";
|
|
|
- num = index + 1;
|
|
|
- if (index === 0) {
|
|
|
- str = "{no1|" + no + "} {num1|" + num + "} {title1|" + value + "}";
|
|
|
- } else if (index === 1) {
|
|
|
- str = "{no2|" + no + "} {num2|" + num + "} {title2|" + value + "}";
|
|
|
- } else if (index === 2) {
|
|
|
- str = "{no3|" + no + "} {num3|" + num + "} {title3|" + value + "}";
|
|
|
- } else {
|
|
|
- str = "{no|" + no + "} {num|" + num + "} {title|" + value + "}";
|
|
|
- }
|
|
|
- return str;
|
|
|
- },
|
|
|
- rich: {
|
|
|
- no: {
|
|
|
- color: "#ffcccc",
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- no1: {
|
|
|
- color: "#ff4d4d",
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- no2: {
|
|
|
- color: "#4dd2ff",
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- no3: {
|
|
|
- color: "#ffff00",
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- num: {
|
|
|
- color: "#fff",
|
|
|
- backgroundColor: "#ffcccc",
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
- fontSize: 14,
|
|
|
- align: "center",
|
|
|
- borderRadius: 100,
|
|
|
- },
|
|
|
- num1: {
|
|
|
- color: "#fff",
|
|
|
- backgroundColor: "#ff4d4d",
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
- fontSize: 14,
|
|
|
- align: "center",
|
|
|
- borderRadius: 100,
|
|
|
- },
|
|
|
- num2: {
|
|
|
- color: "#fff",
|
|
|
- backgroundColor: "#4dd2ff",
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
- fontSize: 14,
|
|
|
- align: "center",
|
|
|
- borderRadius: 100,
|
|
|
- },
|
|
|
- num3: {
|
|
|
- color: "#fff",
|
|
|
- backgroundColor: "#ffff00",
|
|
|
- width: 20,
|
|
|
- height: 20,
|
|
|
- fontSize: 14,
|
|
|
- align: "center",
|
|
|
- borderRadius: 100,
|
|
|
- },
|
|
|
- title: {
|
|
|
- color: "#ffcccc",
|
|
|
- },
|
|
|
- title1: {
|
|
|
- color: "#ff4d4d",
|
|
|
- },
|
|
|
- title2: {
|
|
|
- color: "#4dd2ff",
|
|
|
- },
|
|
|
- title3: {
|
|
|
- color: "#ffff00",
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#ffffff",
|
|
|
+ fontSize: "12",
|
|
|
},
|
|
|
},
|
|
|
+ data: getValue,
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- data: getName,
|
|
|
- },
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- inverse: true,
|
|
|
- offset: -25,
|
|
|
- axisTick: "none",
|
|
|
- axisLine: "none",
|
|
|
- show: true,
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: "#ffffff",
|
|
|
- fontSize: "12",
|
|
|
- },
|
|
|
- },
|
|
|
- data: getValue,
|
|
|
- },
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "告警数量",
|
|
|
- type: "bar",
|
|
|
- zlevel: 1,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- barBorderRadius: 5, // Adjusted to 5
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "rgb(128,204,255,1)",
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "rgb(46,200,207,1)",
|
|
|
- },
|
|
|
- ]),
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "告警数量",
|
|
|
+ type: "bar",
|
|
|
+ zlevel: 1,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: 5, // Adjusted to 5
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgb(128,204,255,1)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgb(46,200,207,1)",
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
},
|
|
|
+ barWidth: 5, // Adjusted to 5
|
|
|
+ data: getValue,
|
|
|
},
|
|
|
- barWidth: 5, // Adjusted to 5
|
|
|
- data: getValue,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "完结率",
|
|
|
- type: "bar",
|
|
|
- barWidth: 5, // Adjusted to 5
|
|
|
- barGap: "-50%", // Adjusted to "-50%"
|
|
|
- data: getMax,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: "rgba(24,31,68,1)",
|
|
|
- barBorderRadius: 5, // Adjusted to 5
|
|
|
+ {
|
|
|
+ name: "完结率",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 5, // Adjusted to 5
|
|
|
+ barGap: "-50%", // Adjusted to "-50%"
|
|
|
+ data: getMax,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "rgba(24,31,68,1)",
|
|
|
+ barBorderRadius: 5, // Adjusted to 5
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- _doc.setOption(option)
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ _doc.setOption(option)
|
|
|
+ // });
|
|
|
},
|
|
|
+
|
|
|
+
|
|
|
/**
|
|
|
* 3D地图打点
|
|
|
* @param mapDom 地图实例
|
|
|
@@ -2192,27 +2029,26 @@ html {
|
|
|
position: fixed;
|
|
|
top: 50%;
|
|
|
left: 0;
|
|
|
- transform: translateY(-70%);
|
|
|
+ transform: translateY(-270%);
|
|
|
color:#fff;
|
|
|
background-color: rgb(66, 113, 227);
|
|
|
- width: 300px;
|
|
|
+ width: 400px;
|
|
|
height: 200px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.table-containers {
|
|
|
position: fixed;
|
|
|
- top: 11%;
|
|
|
- left: 0;
|
|
|
- transform: translateY(-50%);
|
|
|
- color:#fff;
|
|
|
+ bottom: 190px; /* 距离底部的距离 */
|
|
|
+ right: 10px; /* 距离右侧的距离 */
|
|
|
+ color: #fff;
|
|
|
background-color: rgb(66, 113, 227);
|
|
|
- width: 300px;
|
|
|
+ width: 400px;
|
|
|
height: 200px;
|
|
|
-
|
|
|
}
|
|
|
|
|
|
|
|
|
+
|
|
|
.echarts-containers {
|
|
|
position: fixed;
|
|
|
top: 70%;
|
|
|
@@ -2299,14 +2135,16 @@ html {
|
|
|
}
|
|
|
.table-container2 {
|
|
|
position: fixed;
|
|
|
- right: 0;
|
|
|
- top: 66vh;
|
|
|
- color:#fff;
|
|
|
- background-color: rgba(97,132,219,0.4);
|
|
|
+ left: 1px; /* 距离左侧的距离 */
|
|
|
+ top: 65%; /* 垂直居中 */
|
|
|
+ transform: translateY(-50%);
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgba(97, 132, 219, 0.4);
|
|
|
width: 400px;
|
|
|
- height: 270px;
|
|
|
+ height: 800px;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
+
|
|
|
</style>
|
conghelong