salt-lake-hospital/src/components/Sensor/Sensor.js

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;