AnalysisSystemForRadionuclide_vue/src/views/spectrumAnalysis/gamma-analysis.vue

<template>
  <div class="gamma-analysis">
    <div class="gamma-analysis-chart">
      <custom-chart ref="chartRef" :option="option" style="height: 100%" />
    </div>
    <div class="gamma-analysis-thumbnail">
      <custom-chart :option="thumbnailOption" style="height: 100%" />
    </div>
  </div>
</template>

<script>
import CustomChart from '@/components/CustomChart/index.vue'

// 初始配置
const initialOption = {
  grid: {
    top: 40,
    left: 60,
    right: 0
  },
  title: {
    text: '',
    left: 'center',
    bottom: 10,
    textStyle: {
      color: '#8FD4F8',
      rich: {
        a: {
          padding: [0, 20, 0, 0],
          fontSize: 16
        }
      }
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
      type: 'cross',
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: '#ade6ee'
      }
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#ade6ee'
      }
    },
    data: new Array(3928).fill(0).map((_, index) => index)
  },
  yAxis: {
    name: 'Counts',
    nameTextStyle: {
      color: '#8FD4F8',
      fontSize: 16
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#ade6ee'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(173, 230, 238, .2)'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#ade6ee'
      }
    }
  },
  series: [
    {
      type: 'line',
      data: new Array(3928)
        .fill(0)
        .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 16000) : parseInt(Math.random() * 800))),
      itemStyle: {
        color: '#24FF0B'
      },
      lineStyle: {
        width: 1
      },
      symbol: 'none',
      markLine: {
        symbol: 'none',
        label: {
          show: false
        },
        lineStyle: {
          type: 'solid'
        },
        data: [{
          xAxis: 100,
          lineStyle: {
            color: 'red'
          }
        }]
      }
    },
    {
      type: 'line',
      data: new Array(3928)
        .fill(0)
        .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 14000) : parseInt(Math.random() * 600))),
      itemStyle: {
        color: '#D8DE07'
      },
      lineStyle: {
        width: 1
      },
      symbol: 'none'
    }
  ],
  dataZoom: {
    type: 'inside',
    start: 0,
    end: 20,
    zoomLock: true
  }
}

// 缩略图配置
const thumbnailOption = {
  grid: {
    top: 0,
    left: 5,
    right: 5,
    bottom: 0
  },
  xAxis: {
    type: 'category',
    axisLine: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    data: new Array(3928).fill(0).map((_, index) => index)
  },
  yAxis: {
    axisLine: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    }
  },
  series: [
    {
      type: 'line',
      data: new Array(3928)
        .fill(0)
        .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 16000) : parseInt(Math.random() * 800))),
      itemStyle: {
        color: '#24FF0B'
      },
      lineStyle: {
        width: 1
      },
      symbol: 'none'
    },
    {
      type: 'line',
      data: new Array(3928)
        .fill(0)
        .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 14000) : parseInt(Math.random() * 600))),
      itemStyle: {
        color: '#D8DE07'
      },
      lineStyle: {
        width: 1
      },
      symbol: 'none'
    }
  ]
}

export default {
  props: {
    data: {
      type: Object
    },
    chartType: {
      type: String,
      default: ''
    }
  },
  components: {
    CustomChart
  },
  data() {
    return {
      option: initialOption,
      thumbnailOption
    }
  },
  created() {
    this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}'

    console.log('%c [  ]-108', 'font-size:13px; background:pink; color:#bf2c9f;', this.option)
  },
  methods: {
    resize() {
      this.$refs.chartRef.resize()
    },

    /**
     * 向某一个方向移动标记线
     * @param { 'left'| 'right' } direction
     */
    moveMarkLine(direction) {
      if(direction == 'left') {
        this.option.series[0].markLine.data[0].xAxis = this.option.series[0].markLine.data[0].xAxis - 10
      }
      else {
        this.option.series[0].markLine.data[0].xAxis = this.option.series[0].markLine.data[0].xAxis + 10
      }

      this.$emit('markLineChange', {  })
    }
  },
  watch: {
    data: {
      handler() {},
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.gamma-analysis {
  height: 100%;
  position: relative;

  &-chart {
    height: 100%;
  }

  &-thumbnail {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 500px;
    height: 150px;
    background-color: #153E44;
  }
}
</style>