104 lines
1.8 KiB
Vue
104 lines
1.8 KiB
Vue
<!--
|
|
* @Author: zhp
|
|
* @Date: 2023-09-13 09:02:25
|
|
* @LastEditTime: 2026-03-18 14:45:07
|
|
* @LastEditors: zwq
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div :class="className" :style="{ height: height, width: width }" />
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
require('echarts/theme/macarons'); // echarts theme
|
|
// import resize from './mixins/resize'
|
|
|
|
export default {
|
|
// mixins: [resize],
|
|
props: {
|
|
className: {
|
|
type: String,
|
|
default: 'chart',
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '100%',
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '350px',
|
|
},
|
|
// autoResize: {
|
|
// type: Boolean,
|
|
// default: true
|
|
// }
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
};
|
|
},
|
|
// watch: {
|
|
// chartData: {
|
|
// deep: true,
|
|
// handler(val) {
|
|
// this.setOptions(val)
|
|
// }
|
|
// }
|
|
// },
|
|
mounted() {
|
|
// this.$nextTick(() => {
|
|
// this.initChart()
|
|
// })
|
|
},
|
|
// beforeDestroy() {
|
|
// if (!this.chart) {
|
|
// return
|
|
// }
|
|
// this.chart.dispose()
|
|
// this.chart = null
|
|
// },
|
|
methods: {
|
|
initChart(xData, yData, lineName) {
|
|
this.chart = echarts.init(this.$el, 'macarons');
|
|
this.setOptions(xData, yData, lineName);
|
|
},
|
|
setOptions(xData, yData, lineName) {
|
|
let seriesData = [];
|
|
lineName.forEach((item, index) => {
|
|
seriesData.push(
|
|
{
|
|
name: item + '白班',
|
|
data: yData[index].map(item => item.day),
|
|
type: 'line',
|
|
},
|
|
{
|
|
name: item + '夜班',
|
|
data: yData[index].map(item => item.night),
|
|
type: 'line',
|
|
}
|
|
);
|
|
});
|
|
const result = lineName.flatMap((item) => [item + '白班', item + '夜班']);
|
|
this.chart.setOption(
|
|
{
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xData,
|
|
},
|
|
legend: {
|
|
data: result,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: seriesData,
|
|
},
|
|
true
|
|
);
|
|
},
|
|
},
|
|
};
|
|
</script>
|