|
|
|
@ -54,7 +54,33 @@
|
|
|
|
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
|
|
|
|
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Chart class="chart1" ref="chart1"></Chart>
|
|
|
|
|
|
|
|
<Chart class="chart2" ref="chart2"></Chart>
|
|
|
|
|
|
|
|
<Chart class="chart3" ref="chart3"></Chart>
|
|
|
|
|
|
|
|
<Chart class="chart4" ref="chart4"></Chart>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="table">
|
|
|
|
|
|
|
|
<vue-seamless-scroll
|
|
|
|
|
|
|
|
:class-option="scrollTableOption"
|
|
|
|
|
|
|
|
:data="scrollTableData"
|
|
|
|
|
|
|
|
class="case-item"
|
|
|
|
|
|
|
|
style="height: 100%"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
v-for="(item, index) in scrollTableData"
|
|
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
|
|
|
|
|
|
|
|
<div class="scrollTableItem" style="color:#65c2f3;">
|
|
|
|
|
|
|
|
{{ item.value1 }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="scrollTableItem" style="color:#65c2f3;">
|
|
|
|
|
|
|
|
{{ item.value2 }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</vue-seamless-scroll>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
@ -62,12 +88,7 @@
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import Chart from '@/components/Charts/Chart'
|
|
|
|
import Chart from '@/components/Charts/Chart'
|
|
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
|
|
import {
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
baseMonitorInfoList,
|
|
|
|
|
|
|
|
countCabinet,
|
|
|
|
|
|
|
|
boardTempList,
|
|
|
|
|
|
|
|
selectLastTWTempertureData, recordBusbarAlarmCount
|
|
|
|
|
|
|
|
} from "@/api/board/index2";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
@ -86,7 +107,7 @@ export default {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
name: '颗粒物柱状图',
|
|
|
|
name: '颗粒物柱状图',
|
|
|
|
top: 69.6,
|
|
|
|
top: 69.6,
|
|
|
|
left: 30.8
|
|
|
|
left: 3
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
name: '1#变压器测温',
|
|
|
|
name: '1#变压器测温',
|
|
|
|
@ -114,6 +135,22 @@ export default {
|
|
|
|
left: 68
|
|
|
|
left: 68
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
|
|
|
|
scrollTableOption: {
|
|
|
|
|
|
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
|
|
|
|
|
|
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
|
|
|
|
|
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
|
|
|
|
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
|
|
|
|
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
|
|
|
|
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
|
|
|
|
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
|
|
|
|
|
waitTime: 0,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
scrollTableData: Array(5).fill('').map(function (i, k) {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
value1: 'ASDFGHJKL_1',
|
|
|
|
|
|
|
|
value2: '2222-22-22 22:22:22',
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}),
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
components: {
|
|
|
|
@ -125,6 +162,387 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
getData() {
|
|
|
|
getData() {
|
|
|
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
|
|
type: "shadow",
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
|
|
top: "15%",
|
|
|
|
|
|
|
|
left: "10%",
|
|
|
|
|
|
|
|
right: "5%",
|
|
|
|
|
|
|
|
bottom: "15%",
|
|
|
|
|
|
|
|
// containLabel: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
xAxis: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
type: "category",
|
|
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
splitArea: {
|
|
|
|
|
|
|
|
// show: true,
|
|
|
|
|
|
|
|
color: "#f00",
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
color: "#f00",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
|
|
|
data: ["A", "B", "C", "D", "E", "F"],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
type: "value",
|
|
|
|
|
|
|
|
min: 0,
|
|
|
|
|
|
|
|
// max: 140,
|
|
|
|
|
|
|
|
splitNumber: 4,
|
|
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
color: "rgba(255,255,255,0.1)",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
|
|
margin: 20,
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: "#d1e6eb",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
series: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: "注册总量",
|
|
|
|
|
|
|
|
type: "line",
|
|
|
|
|
|
|
|
showAllSymbol: true,
|
|
|
|
|
|
|
|
symbol: "circle",
|
|
|
|
|
|
|
|
symbolSize: 10,
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
|
|
color: "#00ca95",
|
|
|
|
|
|
|
|
shadowColor: "rgba(0, 0, 0, .3)",
|
|
|
|
|
|
|
|
shadowBlur: 0,
|
|
|
|
|
|
|
|
shadowOffsetY: 5,
|
|
|
|
|
|
|
|
shadowOffsetX: 5,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
label: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
position: "top",
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: "#00ca95",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
color: "#00ca95",
|
|
|
|
|
|
|
|
borderColor: "#fff",
|
|
|
|
|
|
|
|
borderWidth: 3,
|
|
|
|
|
|
|
|
shadowColor: "rgba(0, 0, 0, .3)",
|
|
|
|
|
|
|
|
shadowBlur: 0,
|
|
|
|
|
|
|
|
shadowOffsetY: 2,
|
|
|
|
|
|
|
|
shadowOffsetX: 2,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
areaStyle: {
|
|
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
|
|
|
0,
|
|
|
|
|
|
|
|
0,
|
|
|
|
|
|
|
|
0,
|
|
|
|
|
|
|
|
1,
|
|
|
|
|
|
|
|
[
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
|
|
color: "rgba(0,202,149,0.3)",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
|
|
color: "rgba(0,202,149,0)",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
false
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
shadowColor: "rgba(0,202,149, 0.9)",
|
|
|
|
|
|
|
|
shadowBlur: 20,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
this.$refs.chart2.setData({
|
|
|
|
|
|
|
|
series: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
|
|
type: "gauge",
|
|
|
|
|
|
|
|
min: 0,
|
|
|
|
|
|
|
|
max: 100,
|
|
|
|
|
|
|
|
splitNumber: 10,
|
|
|
|
|
|
|
|
startAngle: 180,
|
|
|
|
|
|
|
|
endAngle: 0,
|
|
|
|
|
|
|
|
center: ["50%", '95%'],
|
|
|
|
|
|
|
|
radius: '180%',
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
distance: 0,
|
|
|
|
|
|
|
|
fontFamily: "Microsoft YaHei UI",
|
|
|
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
|
|
|
fontWeight: "normal",
|
|
|
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
|
|
|
color: "#FFFFFF",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
width: 2,
|
|
|
|
|
|
|
|
color: '#2776e3',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
pointer: {
|
|
|
|
|
|
|
|
length:'50%',
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
|
|
color: '#2776e3',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
|
|
length: 16,
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
width: 4,
|
|
|
|
|
|
|
|
color: '#2776e3',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
|
|
length: 32,
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
width: 4,
|
|
|
|
|
|
|
|
color: '#2776e3',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
detail: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
value: 66,
|
|
|
|
|
|
|
|
name: "半圆仪表_0",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
this.$refs.chart3.setData({
|
|
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
|
|
top: "15%",
|
|
|
|
|
|
|
|
left: "5%",
|
|
|
|
|
|
|
|
right: "5%",
|
|
|
|
|
|
|
|
bottom: "5%",
|
|
|
|
|
|
|
|
containLabel: true,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
|
|
type: "none",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
xAxis: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
type: "category",
|
|
|
|
|
|
|
|
position: "bottom",
|
|
|
|
|
|
|
|
data: ["1#", "2#", "3#"],
|
|
|
|
|
|
|
|
boundaryGap: true,
|
|
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
series: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: "数量",
|
|
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
|
|
barCategoryGap: "50%",
|
|
|
|
|
|
|
|
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
|
|
|
|
|
|
|
|
data: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: "1#",
|
|
|
|
|
|
|
|
value: 10,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: "2#",
|
|
|
|
|
|
|
|
value: 6,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: "3#",
|
|
|
|
|
|
|
|
value: 5,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
this.$refs.chart4.setData({
|
|
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
|
|
left: "2%",
|
|
|
|
|
|
|
|
right: "2%",
|
|
|
|
|
|
|
|
bottom: "2%",
|
|
|
|
|
|
|
|
top: "2%",
|
|
|
|
|
|
|
|
containLabel: true,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
|
|
type: "none",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
|
|
|
return params[0].name + " : " + params[0].value;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
type: "value",
|
|
|
|
|
|
|
|
axisLine:{
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisTick:{
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel:{
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
splitLine:{
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
type: "category",
|
|
|
|
|
|
|
|
inverse: true,
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data: [1,2,3,4,5],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
type: "category",
|
|
|
|
|
|
|
|
inverse: true,
|
|
|
|
|
|
|
|
axisTick: "none",
|
|
|
|
|
|
|
|
axisLine: "none",
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
|
|
|
fontSize: "12",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data: [1,2,3,4,5],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
series: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: "值",
|
|
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
|
|
zlevel: 1,
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
|
|
barBorderRadius: 0,
|
|
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
|
|
color: "rgb(57,89,255,1)",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
|
|
color: "rgb(46,200,207,1)",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
]),
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
barWidth: 20,
|
|
|
|
|
|
|
|
data: [1,2,3,4,5],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: "背景",
|
|
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
|
|
barWidth: 20,
|
|
|
|
|
|
|
|
barGap: "-100%",
|
|
|
|
|
|
|
|
data: [5,5,5,5,5],
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
|
|
color: "rgba(24,31,68,1)",
|
|
|
|
|
|
|
|
barBorderRadius: 0,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -185,4 +603,47 @@ export default {
|
|
|
|
font-size: 0.9vw;
|
|
|
|
font-size: 0.9vw;
|
|
|
|
letter-spacing: 1px;
|
|
|
|
letter-spacing: 1px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.chart1{
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: 15.4%;
|
|
|
|
|
|
|
|
left: 2.2%;
|
|
|
|
|
|
|
|
width: 30.8%;
|
|
|
|
|
|
|
|
height: 20.2%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.chart2{
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: 44.6%;
|
|
|
|
|
|
|
|
left: 2.2%;
|
|
|
|
|
|
|
|
width: 30.8%;
|
|
|
|
|
|
|
|
height: 20.2%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.chart3{
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: 74%;
|
|
|
|
|
|
|
|
left: 2.2%;
|
|
|
|
|
|
|
|
width: 30.8%;
|
|
|
|
|
|
|
|
height: 20.2%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.chart4{
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: 15.4%;
|
|
|
|
|
|
|
|
left: 67.1%;
|
|
|
|
|
|
|
|
width: 30.8%;
|
|
|
|
|
|
|
|
height: 34.8%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.table {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: 59.4%;
|
|
|
|
|
|
|
|
left: 67.1%;
|
|
|
|
|
|
|
|
width: 30.8%;
|
|
|
|
|
|
|
|
height: 34.8%;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.scrollTableItem {
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
width: 50%;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
padding: 14px 0;
|
|
|
|
|
|
|
|
color: #4e99c5
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
夜笙歌
1 year ago