You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
4.2 KiB
159 lines
4.2 KiB
import { mapState } from 'vuex';
|
|
const mixin = {
|
|
data() {
|
|
return {
|
|
series1: [10, 20, 30, 10, 20, 30, 10, 20, 30, 10, 20, 30, 10, 20, 30, 10, 20, 30], // 传感器1
|
|
series2: [20, 30, 10, 20, 30, 10, 20, 30, 10, 20, 30, 10, 20, 30, 10, 20, 30, 10], // 传感器2
|
|
series3: [30, 10, 20, 30, 10, 20, 30, 10, 20, 30, 10, 20, 30, 10, 20, 30, 10, 20], // 传感器3
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState('messages', ['vibrationSensor']),
|
|
option() {
|
|
return {
|
|
legend: {
|
|
x: 'center',
|
|
y: '8%',
|
|
data: ['X轴', 'Y轴', 'Z轴'],
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
color: '#ccc', //标题颜色
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
max: this.series1.length >= 6 ? this.series1.length - 1 : 6,
|
|
min: this.series1.length >= 6 ? this.series1.length - 6 : 0,
|
|
axisLine: {
|
|
//y轴
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
show: true,
|
|
type: 'value',
|
|
splitLine: { show: false }, //去除网格线
|
|
nameTextStyle: {
|
|
color: '#abb8ce',
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: '#abb8ce',
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
//y轴刻度线
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
//y轴
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: 'X轴',
|
|
data: this.series1,
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(10,73,130,1)', // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(10,73,130,0)', // 100% 处的颜色
|
|
},
|
|
],
|
|
global: false, // 缺省为 false
|
|
},
|
|
},
|
|
areaStyle: {},
|
|
lineStyle: { normal: { color: 'rgb(39,149,243)', width: 2 } },
|
|
},
|
|
{
|
|
name: 'Y轴',
|
|
data: this.series2,
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(91,225,251,1)', // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(91,225,251,0)', // 100% 处的颜色
|
|
},
|
|
],
|
|
global: false, // 缺省为 false
|
|
},
|
|
},
|
|
areaStyle: {},
|
|
lineStyle: {
|
|
normal: {
|
|
color: 'rgb(91,225,251)',
|
|
width: 2,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'Z轴',
|
|
data: this.series3,
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(241,158,194,1)', // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(241,158,194,0)', // 100% 处的颜色
|
|
},
|
|
],
|
|
global: false, // 缺省为 false
|
|
},
|
|
},
|
|
areaStyle: {},
|
|
lineStyle: {
|
|
normal: {
|
|
color: 'rgb(241,158,194)',
|
|
width: 2,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
},
|
|
},
|
|
watch: {},
|
|
};
|
|
|
|
export default mixin;
|
|
|