You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
385 lines
10 KiB
Vue
385 lines
10 KiB
Vue
<template>
|
|
<div class="bottom-right-table-1" style=" margin-left: 10px">
|
|
<dv-border-box-13 style="width: 770px;height: 600px;">
|
|
<div class="table-name">
|
|
<div id="echart1" style="margin: auto; width: 770px; height: 600px"></div>
|
|
</div>
|
|
</dv-border-box-13>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
name: 'BottomRightechart1',
|
|
props: {
|
|
tableData: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
borderBoxKey: 1, // 初始化一个key值
|
|
tablelist: [],
|
|
}
|
|
},
|
|
watch: {
|
|
// 监听 tableData 的变化，更新 config 中的 data
|
|
tableData(newVal) {
|
|
console.log("newVal-11111",newVal)
|
|
this.tablelist = newVal;
|
|
this.initChart1()
|
|
}
|
|
},
|
|
methods: {
|
|
initChart1() {
|
|
const _this = this;
|
|
var existingChart = echarts.getInstanceByDom(document.getElementById('echart1'));
|
|
if (existingChart) {
|
|
// 如果已经有实例，先销毁它
|
|
existingChart.dispose();
|
|
}
|
|
var myChart1 = echarts.init(document.getElementById('echart1'));
|
|
const CubeLeft = echarts.graphic.extendShape({
|
|
shape: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
buildPath: function (ctx, shape) {
|
|
const xAxisPoint = shape.xAxisPoint
|
|
const c0 = [shape.x, shape.y]
|
|
const c1 = [shape.x - 9, shape.y - 9]
|
|
const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
|
|
const c3 = [xAxisPoint[0], xAxisPoint[1]]
|
|
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
|
|
}
|
|
})
|
|
const CubeRight = echarts.graphic.extendShape({
|
|
shape: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
buildPath: function (ctx, shape) {
|
|
const xAxisPoint = shape.xAxisPoint
|
|
const c1 = [shape.x, shape.y]
|
|
const c2 = [xAxisPoint[0], xAxisPoint[1]]
|
|
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
|
|
const c4 = [shape.x + 18, shape.y - 9]
|
|
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
|
|
}
|
|
})
|
|
const CubeTop = echarts.graphic.extendShape({
|
|
shape: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
buildPath: function (ctx, shape) {
|
|
const c1 = [shape.x, shape.y]
|
|
const c2 = [shape.x + 18, shape.y - 9]
|
|
const c3 = [shape.x + 9, shape.y - 18]
|
|
const c4 = [shape.x - 9, shape.y - 9]
|
|
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
|
|
}
|
|
})
|
|
echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
let xAxisname = []
|
|
let MAX = []
|
|
let VALUE = []
|
|
|
|
_this.tablelist.forEach((item) => {
|
|
xAxisname.push(item.equipment_name)
|
|
});
|
|
for (let i = 0; i < _this.tablelist.length; i++) {
|
|
MAX.push(100)
|
|
VALUE.push(96+Math.floor(Math.random() * 5))
|
|
}
|
|
// VALUE = this.generateRandomNumbers(_this.tablelist.length);
|
|
var option1 = {
|
|
// backgroundColor: "#010d3a",
|
|
title: {
|
|
text: '',
|
|
top: 32,
|
|
left: 18,
|
|
textStyle: {
|
|
color: '#00F6FF',
|
|
fontSize: 24
|
|
}
|
|
},
|
|
grid: {
|
|
left: 20,
|
|
right: 40,
|
|
bottom: '19%',
|
|
top: 107,
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xAxisname,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'white'
|
|
}
|
|
},
|
|
offset: 20,
|
|
axisTick: {
|
|
show: false,
|
|
length: 9,
|
|
alignWithLabel: true,
|
|
lineStyle: {
|
|
color: '#7DFFFD'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
fontSize: 10
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'white'
|
|
}
|
|
},
|
|
max: '100',
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
fontSize: 16,
|
|
formatter: "{value}%",
|
|
},
|
|
boundaryGap: ['20%', '20%']
|
|
},
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
const location = api.coord([api.value(0), api.value(1)])
|
|
return {
|
|
type: 'group',
|
|
children: [{
|
|
type: 'CubeLeft',
|
|
shape: {
|
|
api,
|
|
xValue: api.value(0),
|
|
yValue: api.value(1),
|
|
x: location[0],
|
|
y: location[1],
|
|
xAxisPoint: api.coord([api.value(0), 0])
|
|
},
|
|
style: {
|
|
fill: 'rgba(7,29,97,.6)'
|
|
}
|
|
}, {
|
|
type: 'CubeRight',
|
|
shape: {
|
|
api,
|
|
xValue: api.value(0),
|
|
yValue: api.value(1),
|
|
x: location[0],
|
|
y: location[1],
|
|
xAxisPoint: api.coord([api.value(0), 0])
|
|
},
|
|
style: {
|
|
fill: 'rgba(10,35,108,.7)'
|
|
}
|
|
}, {
|
|
type: 'CubeTop',
|
|
shape: {
|
|
api,
|
|
xValue: api.value(0),
|
|
yValue: api.value(1),
|
|
x: location[0],
|
|
y: location[1],
|
|
xAxisPoint: api.coord([api.value(0), 0])
|
|
},
|
|
style: {
|
|
fill: 'rgba(11,42,106,.8)'
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
data: MAX
|
|
}, {
|
|
type: 'custom',
|
|
renderItem: (params, api) => {
|
|
const location = api.coord([api.value(0), api.value(1)])
|
|
return {
|
|
type: 'group',
|
|
children: [{
|
|
type: 'CubeLeft',
|
|
shape: {
|
|
api,
|
|
xValue: api.value(0),
|
|
yValue: api.value(1),
|
|
x: location[0],
|
|
y: location[1],
|
|
xAxisPoint: api.coord([api.value(0), 0])
|
|
},
|
|
style: {
|
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#3B80E2'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#49BEE5'
|
|
}
|
|
])
|
|
}
|
|
}, {
|
|
type: 'CubeRight',
|
|
shape: {
|
|
api,
|
|
xValue: api.value(0),
|
|
yValue: api.value(1),
|
|
x: location[0],
|
|
y: location[1],
|
|
xAxisPoint: api.coord([api.value(0), 0])
|
|
},
|
|
style: {
|
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#3B80E2'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#49BEE5'
|
|
}
|
|
])
|
|
}
|
|
}, {
|
|
type: 'CubeTop',
|
|
shape: {
|
|
api,
|
|
xValue: api.value(0),
|
|
yValue: api.value(1),
|
|
x: location[0],
|
|
y: location[1],
|
|
xAxisPoint: api.coord([api.value(0), 0])
|
|
},
|
|
style: {
|
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#3B80E2'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#49BEE5'
|
|
}
|
|
])
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
data: VALUE
|
|
}, {
|
|
type: 'bar',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: (e) => {
|
|
switch (e.name) {
|
|
case '10kV线路':
|
|
return VALUE[0]
|
|
case '公用配变':
|
|
return VALUE[1]
|
|
case '35kV主变':
|
|
return VALUE[2]
|
|
case '水':
|
|
|
|
}
|
|
},
|
|
fontSize: 16,
|
|
color: '#fff',
|
|
offset: [4, -25]
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: 'transparent'
|
|
},
|
|
data: VALUE
|
|
}]
|
|
}
|
|
myChart1.setOption(option1);
|
|
},
|
|
|
|
|
|
// 格式化 tableData 数据
|
|
},
|
|
mounted() {
|
|
this.initChart1();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.bottom-right-table-1 {
|
|
width: calc(~"100% + 10px");
|
|
height: 100%;
|
|
margin: 0 -5px;
|
|
|
|
|
|
.border-box-content {
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.table-name {
|
|
height: 330px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
|
|
img {
|
|
width: 79px;
|
|
height: 30px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-rows: repeat(2, auto);
|
|
/* 每行的高度为内容的高度 */
|
|
gap: 10px;
|
|
/* 调整行之间的垂直间距 */
|
|
}
|
|
|
|
.dv-scroll-board {
|
|
height: calc(~"100% - 0px");
|
|
}
|
|
|
|
}
|
|
|
|
::v-deep .dv-scroll-board .rows .ceil {
|
|
border-bottom: 1px solid #ebeef4 !important;
|
|
}
|
|
|
|
/deep/ .dv-scroll-board {
|
|
margin-top: 30px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
/deep/ .dv-scroll-board .rows .row-item .ceil {
|
|
font-size: 18px !important;
|
|
height: 49px !important;
|
|
line-height: 45px !important;
|
|
}
|
|
|
|
/deep/ .dv-scroll-board .header .header-item {
|
|
font-size: 18px !important;
|
|
height: 49px !important;
|
|
line-height: 45px !important;
|
|
}
|
|
</style>
|