update 3d techy-bar
This commit is contained in:
parent
41fba93d47
commit
6df938da04
@ -2,7 +2,7 @@
|
|||||||
<techy-box style="width: 100%; height: calc(100% - 36px);">
|
<techy-box style="width: 100%; height: calc(100% - 36px);">
|
||||||
<!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
|
<!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
|
||||||
|
|
||||||
<new-bar
|
<!-- <new-bar
|
||||||
chart-name="realtime-cost-production"
|
chart-name="realtime-cost-production"
|
||||||
:name-list="['A', 'B', 'C', 'D', 'E', 'F']"
|
:name-list="['A', 'B', 'C', 'D', 'E', 'F']"
|
||||||
:data-list="[
|
:data-list="[
|
||||||
@ -19,17 +19,29 @@
|
|||||||
data: [32, 65, 65, 54, 37, 77]
|
data: [32, 65, 65, 54, 37, 77]
|
||||||
}
|
}
|
||||||
]"
|
]"
|
||||||
/>
|
/> -->
|
||||||
|
|
||||||
|
<techy-bar :extra-space-between-zero="16" :datainfo="[
|
||||||
|
{
|
||||||
|
name: '产量',
|
||||||
|
list: [64, 91, 55, 65, 37, 77]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '能耗',
|
||||||
|
list: [32, 65, 65, 54, 37, 77]
|
||||||
|
}
|
||||||
|
]" />
|
||||||
</techy-box>
|
</techy-box>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TechyBox from './TechyBox.vue'
|
import TechyBox from './TechyBox.vue'
|
||||||
import newBar from './newBar.vue'
|
// import newBar from './newBar.vue'
|
||||||
|
import TechyBar from './TechyBar.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RealtimeProductionHorizontalBarChart',
|
name: 'RealtimeProductionHorizontalBarChart',
|
||||||
components: { TechyBox, newBar },
|
components: { TechyBox, TechyBar },
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {}
|
||||||
|
|||||||
286
src/views/3DOverview/components/TechyBar.vue
Normal file
286
src/views/3DOverview/components/TechyBar.vue
Normal file
@ -0,0 +1,286 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="techyBar" class="techy-bar"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts' // echarts theme
|
||||||
|
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||||
|
import * as BottomPic from './bottom.png'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'TechyBarFor3DPage',
|
||||||
|
props: {
|
||||||
|
datainfo: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [
|
||||||
|
{
|
||||||
|
name: '产线A',
|
||||||
|
list: [100, 102, 104, 105, 100, 117]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '产线B',
|
||||||
|
list: [110, 92, 124, 85, 100, 120]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
unitName: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
extraSpaceBetweenZero: {
|
||||||
|
type: Number,
|
||||||
|
default: 25
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mixins: [resize],
|
||||||
|
data() {
|
||||||
|
const color_gradients = [
|
||||||
|
/** 蓝 */
|
||||||
|
{
|
||||||
|
direction: 'to top',
|
||||||
|
from: '#49B2FF', // * 0.6 是底部颜色和顶部颜色
|
||||||
|
to: '#49B2FF00',
|
||||||
|
topAndBottom: '#49B2FF9F'
|
||||||
|
},
|
||||||
|
/** 绿 */
|
||||||
|
{
|
||||||
|
direction: 'to top',
|
||||||
|
from: '#49FBD6', // * 0.6 是底部颜色和顶部颜色
|
||||||
|
to: '#49FBD600',
|
||||||
|
topAndBottom: '#49FBD69F'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
let result = []
|
||||||
|
|
||||||
|
this.datainfo.map((pl, index) => {
|
||||||
|
let topCircle = {
|
||||||
|
__position: 'top',
|
||||||
|
name: pl.name,
|
||||||
|
barGap: '10%',
|
||||||
|
barCategoryGap: '48%',
|
||||||
|
type: 'pictorialBar',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolPosition: 'end',
|
||||||
|
symbolOffset: ['25%', '-50%'],
|
||||||
|
// symbolSize: ['100%', 6],
|
||||||
|
symbolSize: ['200%', 6],
|
||||||
|
data: pl.list,
|
||||||
|
z: 10,
|
||||||
|
itemStyle: {
|
||||||
|
// color: color_gradients[index].topAndBottom
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 1,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: color_gradients[index].topAndBottom
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: color_gradients[index].to
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let bottomCircle = {
|
||||||
|
__position: 'top',
|
||||||
|
name: pl.name,
|
||||||
|
barGap: '10%',
|
||||||
|
barCategoryGap: '48%',
|
||||||
|
type: 'pictorialBar',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolOffset: ['-25%', '50%'],
|
||||||
|
symbolSize: ['200%', 6],
|
||||||
|
data: pl.list,
|
||||||
|
z: 10,
|
||||||
|
itemStyle: {
|
||||||
|
color: color_gradients[index].from
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let mainBar = {
|
||||||
|
__position: 'main',
|
||||||
|
type: 'bar',
|
||||||
|
name: pl.name,
|
||||||
|
// barWidth: 20, // 不需要设置 barWidth
|
||||||
|
barGap: '10%',
|
||||||
|
barCategoryGap: '48%',
|
||||||
|
data: pl.list,
|
||||||
|
z: 0,
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 1,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: color_gradients[index].from
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.15,
|
||||||
|
color: color_gradients[index].topAndBottom
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: color_gradients[index].to
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
color: '#fff8',
|
||||||
|
fontSize: 8,
|
||||||
|
offset: [0, 6]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
result.push(topCircle)
|
||||||
|
result.push(mainBar)
|
||||||
|
result.push(bottomCircle)
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
BottomPic,
|
||||||
|
width: 0,
|
||||||
|
chart: null,
|
||||||
|
option: {
|
||||||
|
legend: {
|
||||||
|
icon: 'rect',
|
||||||
|
itemWidth: 8,
|
||||||
|
itemHeight: 8,
|
||||||
|
top: '2%',
|
||||||
|
right: '10%',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff8'
|
||||||
|
},
|
||||||
|
data: this.datainfo.map(item => item.name)
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 24,
|
||||||
|
left: '8%',
|
||||||
|
bottom: 24
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
onZero: false,
|
||||||
|
show: false,
|
||||||
|
lineStyle: {}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff8',
|
||||||
|
fontSize: 10
|
||||||
|
},
|
||||||
|
data: ['产线A', '产线B', '产线C', '产线D', '产线E', '产线F']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
// min: -25,
|
||||||
|
min: this.extraSpaceBetweenZero * -1,
|
||||||
|
name: this.unitName,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff8',
|
||||||
|
fontSize: 8,
|
||||||
|
verticalAlign: 'top',
|
||||||
|
align: 'right'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#31A2FF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff8',
|
||||||
|
fontSize: 10,
|
||||||
|
/** y轴不从0开始，也可以用 xAxis 向下 offset 的方式模拟 **/
|
||||||
|
formatter: function(value, index) {
|
||||||
|
if (value < 0) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#569acd',
|
||||||
|
type: 'dotted',
|
||||||
|
opacity: 0.2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
series: result,
|
||||||
|
|
||||||
|
graphic: [
|
||||||
|
{
|
||||||
|
type: 'image',
|
||||||
|
left: 0,
|
||||||
|
bottom: 0,
|
||||||
|
style: {
|
||||||
|
image: 'image url',
|
||||||
|
height: 0,
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener('resize', this.refreshOption)
|
||||||
|
if (!this.chart) this.chart = echarts.init(this.$refs.techyBar)
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.updateOption(this.option)
|
||||||
|
this.chart.setOption(this.option)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateOption(option) {
|
||||||
|
// console.log('option', this.BottomPic.default)
|
||||||
|
let width = this.$refs.techyBar.querySelector('div').clientWidth
|
||||||
|
let height = this.$refs.techyBar.querySelector('div').clientHeight
|
||||||
|
option.graphic[0].style.width = width * 0.88
|
||||||
|
option.graphic[0].style.height = height * 0.3
|
||||||
|
option.graphic[0].style.image = this.BottomPic.default
|
||||||
|
option.graphic[0].left = '8%'
|
||||||
|
option.graphic[0].bottom = 24
|
||||||
|
},
|
||||||
|
refreshOption() {
|
||||||
|
this.updateOption(this.option)
|
||||||
|
this.chart.setOption(this.option)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.techy-bar {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.techy-bar >>> div {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/views/3DOverview/components/bottom.png
Normal file
BIN
src/views/3DOverview/components/bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
@ -281,7 +281,7 @@ import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
|
|||||||
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
|
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
import screenfull from 'screenfull'
|
import screenfull from 'screenfull'
|
||||||
import NewBar from './components/charts/newBar.vue'
|
|
||||||
import TechyBar from './components/charts/TechyBar.vue'
|
import TechyBar from './components/charts/TechyBar.vue'
|
||||||
import NewLineStack from './components/charts/newLineStack.vue'
|
import NewLineStack from './components/charts/newLineStack.vue'
|
||||||
|
|
||||||
@ -298,7 +298,6 @@ export default {
|
|||||||
TechyTable,
|
TechyTable,
|
||||||
// FaultCategoryChart,
|
// FaultCategoryChart,
|
||||||
PlFaultAnalysisPieChart,
|
PlFaultAnalysisPieChart,
|
||||||
NewBar,
|
|
||||||
TechyBar,
|
TechyBar,
|
||||||
NewLineStack
|
NewLineStack
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,413 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
ref="chartContainer"
|
|
||||||
class="chartContainer"
|
|
||||||
:class="bindClass"
|
|
||||||
style="position: relative; width: 100%; height:100%"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from 'echarts' // echarts theme
|
|
||||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
|
||||||
import * as BottomPic from './bottom.png'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'OverviewBar',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
unitName: {
|
|
||||||
type: String,
|
|
||||||
default: '单位: 片'
|
|
||||||
},
|
|
||||||
chartName: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
xlabelFontSize: {
|
|
||||||
type: Number,
|
|
||||||
default: 12
|
|
||||||
},
|
|
||||||
xlabelRotate: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
nameList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
dataList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
BottomPic,
|
|
||||||
chart: null,
|
|
||||||
series: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
bindClass() {
|
|
||||||
return {
|
|
||||||
'fault-category-chart': this.chartName === 'fault-category',
|
|
||||||
'process-fault-chart': this.chartName === 'process-fault',
|
|
||||||
'realtime-production-cost-chart': this.chartName === 'realtime-cost-production'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log('BottomPic, ', this.BottomPic)
|
|
||||||
|
|
||||||
if (this.dataList.length > 1) {
|
|
||||||
this.series = [
|
|
||||||
{
|
|
||||||
// 柱体
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 16,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[0].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: this.dataList[0].data,
|
|
||||||
barCategoryGap: '20%'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// 柱顶
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: 16,
|
|
||||||
symbol: 'circle',
|
|
||||||
symbolPosition: 'end',
|
|
||||||
symbolOffset: ['-70%', '-50%'],
|
|
||||||
symbolSize: [16, 6],
|
|
||||||
zlevel: 2,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
|
|
||||||
{ offset: 1, color: '#2c6e7d' }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: this.dataList[0].data,
|
|
||||||
label: {
|
|
||||||
color:
|
|
||||||
this.chartName === 'process-fault'
|
|
||||||
? 'rgba(119, 255, 242, 1)'
|
|
||||||
: this.chartName === 'fault-category'
|
|
||||||
? '#31a2ff'
|
|
||||||
: '#fff9',
|
|
||||||
show: true,
|
|
||||||
offset: [-12, 10],
|
|
||||||
position: 'top',
|
|
||||||
vertialAlign: 'bottom'
|
|
||||||
},
|
|
||||||
barCategoryGap: '20%'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// 柱底
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: 16,
|
|
||||||
symbol: 'circle',
|
|
||||||
symbolOffset: ['-62%', '50%'],
|
|
||||||
symbolSize: [16.5, 5],
|
|
||||||
itemStyle: { color: this.dataList[0].bottomColor },
|
|
||||||
data: this.dataList[0].data,
|
|
||||||
barCategoryGap: '20%'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// 柱体
|
|
||||||
name: this.dataList[1].name,
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 16,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[1].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: this.dataList[1].data,
|
|
||||||
barCategoryGap: '20%'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// 柱顶
|
|
||||||
name: this.dataList[1].name,
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: 16,
|
|
||||||
symbol: 'circle',
|
|
||||||
symbolPosition: 'end',
|
|
||||||
symbolOffset: ['66%', '-50%'],
|
|
||||||
symbolSize: [16, 6],
|
|
||||||
zlevel: 2,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[1].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: this.dataList[1].data,
|
|
||||||
label: {
|
|
||||||
color:
|
|
||||||
this.chartName === 'process-fault'
|
|
||||||
? 'rgba(119, 255, 242, 1)'
|
|
||||||
: this.chartName === 'fault-category'
|
|
||||||
? '#31a2ff'
|
|
||||||
: '#fff9',
|
|
||||||
show: true,
|
|
||||||
offset: [12, 5],
|
|
||||||
position: 'top',
|
|
||||||
vertialAlign: 'bottom'
|
|
||||||
},
|
|
||||||
barCategoryGap: '20%'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// 柱底
|
|
||||||
name: this.dataList[1].name,
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: 16,
|
|
||||||
symbol: 'circle',
|
|
||||||
symbolOffset: ['66%', '50%'],
|
|
||||||
symbolSize: [16, 6],
|
|
||||||
itemStyle: { color: this.dataList[1].bottomColor },
|
|
||||||
data: this.dataList[1].data,
|
|
||||||
barCategoryGap: '20%'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
} else {
|
|
||||||
const barWidth = 400 / 2 / this.dataList[0].data.length
|
|
||||||
this.series = [
|
|
||||||
{
|
|
||||||
// 柱体
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: barWidth,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[0].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: this.dataList[0].data
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// 柱顶
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: barWidth,
|
|
||||||
symbol: 'circle',
|
|
||||||
symbolPosition: 'end',
|
|
||||||
symbolOffset: [0, '-50%'],
|
|
||||||
symbolSize: [barWidth, 6],
|
|
||||||
zlevel: 2,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
|
|
||||||
{ offset: 1, color: '#2c6e7d' }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
color:
|
|
||||||
this.chartName === 'process-fault'
|
|
||||||
? 'rgba(119, 255, 242, 1)'
|
|
||||||
: this.chartName === 'fault-category'
|
|
||||||
? '#31a2ff'
|
|
||||||
: '#fff9',
|
|
||||||
show: true,
|
|
||||||
offset: [0, 10],
|
|
||||||
position: 'top',
|
|
||||||
vertialAlign: 'bottom'
|
|
||||||
},
|
|
||||||
data: this.dataList[0].data
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// 柱底
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: barWidth,
|
|
||||||
symbol: 'circle',
|
|
||||||
symbolOffset: [0, '50%'],
|
|
||||||
symbolSize: [barWidth, 6],
|
|
||||||
itemStyle: { color: '#2c6e7d' },
|
|
||||||
data: this.dataList[0].data
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
this.$nextTick(() => {
|
|
||||||
console.log('on Mounted(): ')
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (!this.chart) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
calcSize(size /** px */) {
|
|
||||||
// const beilv =
|
|
||||||
},
|
|
||||||
initChart() {
|
|
||||||
this.chart = echarts.init(this.$refs.chartContainer)
|
|
||||||
this.chart.setOption({
|
|
||||||
grid: {
|
|
||||||
top: '24%',
|
|
||||||
left: '8%',
|
|
||||||
right: '5%',
|
|
||||||
bottom: '5%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: false,
|
|
||||||
itemWidth: 10,
|
|
||||||
itemHeight: 10,
|
|
||||||
selectedMode: false,
|
|
||||||
top: '7%',
|
|
||||||
right: '2%',
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff9',
|
|
||||||
fontSize: 12
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
margin: 16,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: this.xlabelFontSize,
|
|
||||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
|
||||||
},
|
|
||||||
rotate: this.xlabelRotate
|
|
||||||
},
|
|
||||||
data: this.nameList
|
|
||||||
},
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
name: this.unitName, // '单位: 片',
|
|
||||||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
|
||||||
type: 'value',
|
|
||||||
splitNumber: 3,
|
|
||||||
axisTick: { show: false },
|
|
||||||
onZero: true,
|
|
||||||
position: 'left',
|
|
||||||
offset: 10,
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: this.dataList[0].bottomColor,
|
|
||||||
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
|
||||||
width: '1' // 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dotted',
|
|
||||||
color: 'rgba(119, 255, 242, 0.2)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
type: 'value'
|
|
||||||
}
|
|
||||||
// {
|
|
||||||
// name: '能耗kw/h',
|
|
||||||
// nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
|
||||||
// type: 'value',
|
|
||||||
// splitNumber: 3,
|
|
||||||
// axisTick: { show: false },
|
|
||||||
// onZero: true,
|
|
||||||
// position: 'left',
|
|
||||||
// offset: 48,
|
|
||||||
// axisLine: {
|
|
||||||
// lineStyle: {
|
|
||||||
// type: 'solid',
|
|
||||||
// color: this.dataList[1].bottomColor,
|
|
||||||
// width: '1' // 坐标线的宽度
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// axisLabel: {
|
|
||||||
// textStyle: {
|
|
||||||
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// splitLine: {
|
|
||||||
// show: false
|
|
||||||
// // lineStyle: {
|
|
||||||
// // type: 'dotted',
|
|
||||||
// // color: 'rgba(119, 255, 242, 0.2)'
|
|
||||||
// // }
|
|
||||||
// },
|
|
||||||
// type: 'value'
|
|
||||||
// }
|
|
||||||
],
|
|
||||||
series: this.series,
|
|
||||||
graphic: [
|
|
||||||
{
|
|
||||||
type: 'image',
|
|
||||||
id: 'bottom-pic',
|
|
||||||
bottom: '12%',
|
|
||||||
left: '10%',
|
|
||||||
style: { image: BottomPic.default, width: 380, height: 50 }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.chartContainer >>> div {
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
/* position: relative !important; */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .fault-category-chart >>> div::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 25px;
|
|
||||||
left: 9%;
|
|
||||||
height: 52px;
|
|
||||||
width: 90%;
|
|
||||||
background: linear-gradient(to top, #31a2ff6d, transparent);
|
|
||||||
transform: skew(-45deg);
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
.process-fault-chart >>> div::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 26px;
|
|
||||||
left: 10%;
|
|
||||||
height: 48px;
|
|
||||||
width: 90%;
|
|
||||||
background: linear-gradient(to top, #49fbd789, transparent);
|
|
||||||
transform: skew(-45deg);
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
.realtime-production-cost-chart >>> div::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 12%;
|
|
||||||
left: 6%;
|
|
||||||
height: 30px;
|
|
||||||
width: 90%;
|
|
||||||
border-radius: 3px;
|
|
||||||
background: linear-gradient(to top, #49fbd789 5%, transparent);
|
|
||||||
transform: skew(-35deg);
|
|
||||||
z-index: 0;
|
|
||||||
} */
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user