70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<RightTitle subtitle="功率输出趋势" icon="glsc" />
|
||
|
|
</div>
|
||
|
|
<div ref="chartRef" style="width: 100%; height: 400px;"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
import { ref, onMounted } from 'vue';
|
||
|
|
import RightTitle from './RightTitle.vue';
|
||
|
|
// 创建对 chart DOM 的引用
|
||
|
|
const chartRef = ref(null);
|
||
|
|
|
||
|
|
// 初始化图表并设置配置
|
||
|
|
onMounted(() => {
|
||
|
|
const chart = echarts.init(chartRef.value); // 初始化图表
|
||
|
|
|
||
|
|
const option = {
|
||
|
|
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: ['发电机1', '发电机2'],
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
min: 10,
|
||
|
|
max: 20,
|
||
|
|
interval: 2,
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '发电机1',
|
||
|
|
type: 'line',
|
||
|
|
data: [14, 16, 14, 15, 16, 14, 16, 15, 16, 17, 16],
|
||
|
|
smooth: true,
|
||
|
|
color: '#3366FF',
|
||
|
|
areaStyle: {
|
||
|
|
opacity: 0.2,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '发电机2',
|
||
|
|
type: 'line',
|
||
|
|
data: [16, 17, 15, 16, 18, 16, 17, 17, 18, 19, 18],
|
||
|
|
smooth: true,
|
||
|
|
color: '#FFCC00',
|
||
|
|
areaStyle: {
|
||
|
|
opacity: 0.2,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
// 设置图表的配置
|
||
|
|
chart.setOption(option);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* Optional styling */
|
||
|
|
</style>
|