update 3d techy-bar
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user