349 lines
9.6 KiB
Vue
349 lines
9.6 KiB
Vue
<template>
|
||
<div id="rose-chart" style="width: 100%;height:100%">
|
||
<div class="chart-title">
|
||
本月不良率推移图
|
||
</div>
|
||
<div :id="pieId" class="pie-chart-container"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
import testRes from './test';
|
||
function getCurrentMonthDates() {
|
||
const dates = [];
|
||
const today = new Date();
|
||
const year = today.getFullYear();
|
||
const month = today.getMonth();
|
||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||
|
||
for (let i = 1; i <= daysInMonth; i++) {
|
||
const formattedDate = `${(month + 1).toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;
|
||
dates.push(formattedDate);
|
||
}
|
||
|
||
return dates;
|
||
}
|
||
export default {
|
||
name: 'RoseChart',
|
||
props: {
|
||
pieId: {
|
||
type: String,
|
||
},
|
||
chartData: {
|
||
type: Object,
|
||
},
|
||
dataType: {
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
option: {}
|
||
}
|
||
},
|
||
methods: {
|
||
createData() {
|
||
const dates = getCurrentMonthDates();
|
||
const today = new Date();
|
||
const currentDay = today.getDate();
|
||
|
||
// 生成模拟数据，未到日期的值为0
|
||
const generateData = () => {
|
||
return dates.map((date, index) => {
|
||
const day = parseInt(date.split('-')[1]);
|
||
let step = this.dataType == '6'? 6 : 10;
|
||
return day <= currentDay ? (Math.random() * step).toFixed(2) : 0;
|
||
});
|
||
};
|
||
|
||
var myChart = echarts.init(document.getElementById(this.pieId));
|
||
this.option = {
|
||
title: {
|
||
// text: '本月不良率推移图',
|
||
textStyle: {
|
||
fontSize: 25,
|
||
fontWight:'bold',
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
itemWidth: 20,
|
||
itemHeight: 20,
|
||
itemGap: 40,
|
||
// data: ['反白', '偏移', '侧立', '缺件', '少锡'],
|
||
data: ['不良率'],
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 20, // 25 -> 20
|
||
fontWight:'bold'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
fontSize: 25, // 30 -> 25
|
||
color: '#fff',
|
||
onZero: false
|
||
},
|
||
data: getCurrentMonthDates()
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
max: 10, // 设置最大值为10%
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#999',
|
||
width: 2,
|
||
height:1,
|
||
dashArray: [15, 5]
|
||
}
|
||
},
|
||
axisLabel: {
|
||
fontSize: 25,
|
||
color: '#fff',
|
||
formatter: function (value) {
|
||
return value + '%'; // 添加百分比符号
|
||
}
|
||
},
|
||
},
|
||
series:
|
||
[
|
||
{
|
||
name: '反白',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: generateData(),
|
||
lineStyle: { width: 4 },
|
||
symbolSize: 12,
|
||
},
|
||
// {
|
||
// name: '偏移',
|
||
// type: 'line',
|
||
// smooth: true,
|
||
// data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
|
||
// lineStyle: { width: 4 },
|
||
// symbolSize: 12,
|
||
// },
|
||
// {
|
||
// name: '侧立',
|
||
// type: 'line',
|
||
// smooth: true,
|
||
// data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
|
||
// lineStyle: { width: 4 },
|
||
// symbolSize: 12,
|
||
// },
|
||
// {
|
||
// name: '缺件',
|
||
// type: 'line',
|
||
// smooth: true,
|
||
// data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
|
||
// lineStyle: { width: 4 },
|
||
// symbolSize: 12,
|
||
// },
|
||
// {
|
||
// name: '少锡',
|
||
// type: 'line',
|
||
// smooth: true,
|
||
// data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
|
||
// lineStyle: { width: 4 },
|
||
// symbolSize: 12,
|
||
// }
|
||
]
|
||
};
|
||
myChart.setOption(this.option);
|
||
},
|
||
createData2() {
|
||
var myChart = echarts.init(document.getElementById(this.pieId));
|
||
console.log(myChart)
|
||
this.option = {
|
||
title: {
|
||
text: '近一周产量趋势',
|
||
textStyle: {
|
||
fontSize:30,
|
||
fontWight:'bold',
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
itemWidth: 20, // 色块宽度
|
||
itemHeight: 20, // 色块高度
|
||
itemGap: 40, // 图例之间的间距
|
||
data:['水件', '进水阀', '排水阀','按钮'],
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize:30,
|
||
fontWight:'bold'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
|
||
axisLabel: {
|
||
fontSize: 35, // 设置 Y 轴字体大小
|
||
color: '#fff', // 可选：设置字体颜色
|
||
onZero: false ,// 确保 y 轴不与第一个数据点对齐
|
||
// 只显示奇数索引的 x 轴标签
|
||
// formatter: function (value, index) {
|
||
// return index % 2 === 1 ? value : ''; // 奇数索引显示，偶数索引隐藏
|
||
// }
|
||
},
|
||
|
||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["日期"]})
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true, // 显示 y 轴辅助线
|
||
lineStyle: {
|
||
type: 'dashed', // 设置为虚线
|
||
color: '#999', // 虚线颜色
|
||
width: 2, // 虚线宽度
|
||
height:1,
|
||
dashArray: [15, 5]
|
||
}
|
||
},
|
||
axisLabel: {
|
||
fontSize: 35, // 设置 Y 轴字体大小
|
||
color: '#fff', // 可选：设置字体颜色
|
||
// 只显示偶数的 y 轴标签
|
||
formatter: function (value) {
|
||
return value % 200 === 0 ? value : ''; // 偶数显示，奇数隐藏
|
||
}
|
||
},
|
||
},
|
||
series:
|
||
[
|
||
{
|
||
name: '水件',
|
||
type: 'line',
|
||
// stack: 'null',
|
||
smooth: true,
|
||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["水件"]}),
|
||
lineStyle: {
|
||
width: 4, // 数据线加粗
|
||
},
|
||
symbolSize: 12, // 数据点大小
|
||
},
|
||
{
|
||
name: '进水阀',
|
||
type: 'line',
|
||
// stack: 'null',
|
||
smooth: true,
|
||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["进水阀"]}),
|
||
lineStyle: {
|
||
width: 4, // 数据线加粗
|
||
},
|
||
symbolSize: 12, // 数据点大小
|
||
},
|
||
{
|
||
name: '排水阀',
|
||
type: 'line',
|
||
// stack: 'null',
|
||
smooth: true,
|
||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["排水阀"]}),
|
||
lineStyle: {
|
||
width: 4, // 数据线加粗
|
||
},
|
||
symbolSize: 12, // 数据点大小
|
||
},
|
||
{
|
||
name: '按钮',
|
||
type: 'line',
|
||
// stack: 'null',
|
||
smooth: true,
|
||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["按钮"]}),
|
||
lineStyle: {
|
||
width: 4, // 数据线加粗
|
||
},
|
||
symbolSize: 12, // 数据点大小
|
||
},
|
||
|
||
]
|
||
};
|
||
myChart.setOption(this.option);
|
||
},
|
||
},
|
||
mounted() {
|
||
const { createData,createData2 } = this
|
||
if(this.dataType == 3){
|
||
createData2()
|
||
}else{
|
||
createData()
|
||
}
|
||
|
||
// setInterval(createData, 100000)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
#rose-chart {
|
||
box-sizing: border-box;
|
||
color: white;
|
||
.chart-title {
|
||
font-size: 25px;
|
||
color: white;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
// margin-bottom: 15px;
|
||
|
||
&::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 20px;
|
||
background-color: #08e5ff; // 浅蓝色
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.pie-chart-container {
|
||
height:calc(100% - 30px);
|
||
}
|
||
}
|
||
</style>
|