修改单车监控界面
夜笙歌
2 years ago
parent
b083c4d153
commit
dd1392813b
@ -1,190 +1,190 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" id="myChart"/>
|
||||
<div id="myChart" :class="className" :style="{height:height,width:width}"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, toRefs, reactive, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
import {defineComponent, toRefs, reactive, onMounted} from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
export default defineComponent({
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '500px'
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
name: 'Histogram',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
option: {
|
||||
title: {
|
||||
text: '胎温胎压速度变化'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['速度(千米)', '温度(℃)', '压力(Kpa)']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
interval: 0, //显示所有X轴信息
|
||||
rotate: -40 //倾斜角度
|
||||
},
|
||||
data: ['2023-03-15 08:31', '2023-03-15 08:32', '2023-03-15 08:33', '2023-03-15 08:34', '2023-03-15 08:35', '2023-03-15 08:36', '2023-03-15 08:37', '2023-03-15 08:38', '2023-03-15 08:39']
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '速度',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'blue',
|
||||
},
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '500px'
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'blue',
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '温度',
|
||||
position: 'left',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
name: 'Histogram',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
option: {
|
||||
title: {
|
||||
text: '胎温胎压速度变化'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['速度(千米)', '温度(℃)', '压力(Kpa)' ]
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
interval: 0, //显示所有X轴信息
|
||||
rotate: -40 //倾斜角度
|
||||
},
|
||||
data: ['2023-03-15 08:31', '2023-03-15 08:32', '2023-03-15 08:33', '2023-03-15 08:34', '2023-03-15 08:35', '2023-03-15 08:36', '2023-03-15 08:37', '2023-03-15 08:38','2023-03-15 08:39']
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '速度',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'blue',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'blue',
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '温度',
|
||||
position: 'left',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
offset: 30,
|
||||
},
|
||||
|
||||
{
|
||||
type: 'value',
|
||||
name: '压力',
|
||||
position: 'left',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'green',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'green',
|
||||
},
|
||||
},
|
||||
offset: 60,
|
||||
}
|
||||
],
|
||||
offset: 30,
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '速度(千米)',
|
||||
type: 'line',
|
||||
data: [0,0,0,18,21,36,44,45,58,66],
|
||||
symbol: "none",
|
||||
// symbolSize: 10,
|
||||
yAxisIndex: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'blue',
|
||||
lineStyle: {
|
||||
color: 'blue' //改变折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '温度(℃)',
|
||||
type: 'line',
|
||||
data: [20,20,20,25,32,40,46,53,70,87],
|
||||
yAxisIndex: 1,//对应y轴
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'red',
|
||||
lineStyle: {
|
||||
color: 'red' //改变折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '压力(Kpa)',
|
||||
type: 'line',
|
||||
data: [600,600,600,615,616,617,620,622,622,622],
|
||||
yAxisIndex: 2,//对应右侧的y轴
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'green',
|
||||
lineStyle: {
|
||||
color: 'green' //改变折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
})
|
||||
const initeCharts = () => {
|
||||
let myChart = echarts.init(document.getElementById('myChart'))
|
||||
// 绘制图表
|
||||
myChart.setOption(state.option)
|
||||
}
|
||||
{
|
||||
type: 'value',
|
||||
name: '压力',
|
||||
position: 'left',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'green',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'green',
|
||||
},
|
||||
},
|
||||
offset: 60,
|
||||
}
|
||||
],
|
||||
|
||||
onMounted(() => {
|
||||
initeCharts()
|
||||
})
|
||||
series: [
|
||||
{
|
||||
name: '速度(千米)',
|
||||
type: 'line',
|
||||
data: [0, 0, 0, 18, 21, 36, 44, 45, 58, 66],
|
||||
symbol: "none",
|
||||
// symbolSize: 10,
|
||||
yAxisIndex: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'blue',
|
||||
lineStyle: {
|
||||
color: 'blue' //改变折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '温度(℃)',
|
||||
type: 'line',
|
||||
data: [20, 20, 20, 25, 32, 40, 46, 53, 70, 87],
|
||||
yAxisIndex: 1,//对应y轴
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'red',
|
||||
lineStyle: {
|
||||
color: 'red' //改变折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '压力(Kpa)',
|
||||
type: 'line',
|
||||
data: [600, 600, 600, 615, 616, 617, 620, 622, 622, 622],
|
||||
yAxisIndex: 2,//对应右侧的y轴
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'green',
|
||||
lineStyle: {
|
||||
color: 'green' //改变折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
})
|
||||
const initeCharts = () => {
|
||||
let myChart = echarts.init(document.getElementById('myChart'))
|
||||
// 绘制图表
|
||||
myChart.setOption(state.option)
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
}
|
||||
},
|
||||
onMounted(() => {
|
||||
initeCharts()
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue