173 lines
3.8 KiB
Vue
173 lines
3.8 KiB
Vue
<template>
|
||
<div class="thicknessDistributionChart">
|
||
<div class="top-table">
|
||
<ul>
|
||
<li>转换速度：32654654</li>
|
||
<li>配方类型：G8.5-0943</li>
|
||
<li>玻璃索引：56565</li>
|
||
<li>等级：G1</li>
|
||
<li></li>
|
||
</ul>
|
||
<ul>
|
||
<li class="red-tip">最大值：235454</li>
|
||
<li class="blue-tip">最小值：5652356</li>
|
||
<li class="purple-tip">平均值：6856532656</li>
|
||
<li class="green-tip">厚度差：656413212</li>
|
||
<li class="yellow-tip">研磨类型：4ABC</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<span class="title">玻璃ID：46745386415274874</span>
|
||
</div>
|
||
<div
|
||
id="thicknessChart"
|
||
style="width: 100%"
|
||
:style="{ height: chartHeight + 'px' }"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
import { tableHeight } from '@/utils/index'
|
||
import resize from '@/utils/chartMixins/resize'
|
||
export default {
|
||
name: 'thicknessDistributionChart',
|
||
mixins: [resize],
|
||
data() {
|
||
return {
|
||
chartDom: '',
|
||
chart: '',
|
||
chartHeight: tableHeight(320)
|
||
}
|
||
},
|
||
mounted() {
|
||
this.chartDom = document.getElementById('thicknessChart')
|
||
this.chart = echarts.init(this.chartDom)
|
||
this.getChart()
|
||
window.addEventListener('resize', () => {
|
||
this.chartHeight = tableHeight(320)
|
||
})
|
||
},
|
||
methods: {
|
||
getChart() {
|
||
let long = []
|
||
for (let i = 1; i <= 21; i++) {
|
||
long.push(i)
|
||
}
|
||
let wide = []
|
||
for (let i = 1; i <= 7; i++) {
|
||
wide.push(i)
|
||
}
|
||
const data = []
|
||
for (let k = 0; k < long.length; k++) {
|
||
for (let j = 0; j < wide.length; j++) {
|
||
let arr = []
|
||
arr[0] = k
|
||
arr[1] = j
|
||
arr[2] = parseInt(Math.random() * 80 + 470)
|
||
data.push(arr)
|
||
}
|
||
}
|
||
console.log(data)
|
||
var option = {
|
||
tooltip: {
|
||
position: 'top'
|
||
},
|
||
grid: {
|
||
height: '50%',
|
||
top: '10%'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: long,
|
||
splitArea: {
|
||
show: true
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: wide,
|
||
splitArea: {
|
||
show: true
|
||
}
|
||
},
|
||
visualMap: {
|
||
min: 470,
|
||
max: 550,
|
||
calculable: true,
|
||
color: ['#FF8481', '#F9E35E', '#A6FF99', '#46EBE8', '#4572FF'],
|
||
orient: 'horizontal',
|
||
right: '9%',
|
||
top: '3%'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Punch Card',
|
||
type: 'heatmap',
|
||
data: data,
|
||
label: {
|
||
show: true
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
option && this.chart.setOption(option)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.thicknessDistributionChart {
|
||
.top-table {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
margin-bottom: 16px;
|
||
ul {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
li {
|
||
color: rgba(0, 0, 0, 0.85);
|
||
width: 20%;
|
||
padding: 10px;
|
||
border: 1px solid rgba(232, 232, 232, 1);
|
||
}
|
||
.red-tip {
|
||
color: rgba(255, 78, 78, 0.85);
|
||
}
|
||
.blue-tip {
|
||
color: rgba(80, 125, 215, 1);
|
||
}
|
||
.purple-tip {
|
||
color: rgba(152, 83, 255, 0.85);
|
||
}
|
||
.green-tip {
|
||
color: rgba(80, 187, 144, 1);
|
||
}
|
||
.yellow-tip {
|
||
color: rgba(236, 180, 65, 1);
|
||
}
|
||
}
|
||
}
|
||
.title {
|
||
font-size: 14px;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
}
|
||
.title::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 16px;
|
||
background: #0b58ff;
|
||
border-radius: 1px;
|
||
margin-right: 8px;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
</style>
|