AttributioClassification/src/views/chart/pages/ConfigureChart.vue

<template>
  <div class="list-wrap">
    <div class="section-head">Configure chart</div>
    <div class="list-box">
      <div class="filter-wrap">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <!--<el-form-item label="Activity reference time">
            <el-date-picker v-model="queryParams.acquisition_start_begin" type="datetime" placeholder="选择日期时间" class="dark-date-picker" popper-class="dark-date-picker"></el-date-picker>
          </el-form-item>
          <el-form-item label="Concentration reference time">
            <el-date-picker v-model="queryParams.acquisition_start_end" type="datetime" placeholder="选择日期时间" class="dark-date-picker" popper-class="dark-date-picker"></el-date-picker>
          </el-form-item>-->

          <el-form-item label="Create time">
            <el-date-picker
                v-model="dateRage"
                type="daterange"
                range-separator="至"
                start-placeholder="start"
                end-placeholder="end"
                value-format="YYYY-MM-DD"
                class="dark-date-picker"
                popper-class="dark-date-picker"
                @change="dateChange"></el-date-picker>
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSearch">Select</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="chart-wrap">
        <div ref="chartDom" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {
        page: 1,
        size: 100,
        create_time_begin: '',
        create_time_end: '',
      },
      tableData: [],
      dateRage: [],
      chartData: {
        xAxisData: [],
        seriesData: []
      }, // xe131m_conc
    }
  },
  created () {
    this.onSearch()
  },
  mounted() {
    this.chart()
  },
  methods: {
    onSearch () {
      this.loading = true
      this.$axios.get(window.CONFIG.baseUrl + '/nuclide/query_samples', { params: this.queryParams }).then((res) => {
        debugger
        this.tableData = res.data.items
        this.total = res.data.pagination.total_count

        res.data.items.forEach(item => {
          switch (item.type) { // 最多只有
            case 'aaaaaa':
              break
            case 'bbbbbb':
              break
            case 'cccccc':
              break
            case 'dddddd':
              break
            case 'eeeeee':
              break
            default:
          }

          this.chartData.seriesData.push({

          })
        })

      }).finally(() => {
        this.loading = false
      })
    },
    dateChange(dates) {
      this.queryParams.create_time_begin = dates[0]
      this.queryParams.create_time_end = dates[1]
    },
    chart() {
      this.myChart = this.$echarts.init(this.$refs.chartDom)
      const option = {
        grid: {
          left: 60,
          right: 20,
          bottom: 30,
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              color: '#273F4B',
              width: 1,
            },
          },
          axisTick: {
            lineStyle: {
              color: '#152029',
              width: 1,
            },
          },
          axisLabel: {
            color: '#a2b4c9',
            // rotate: 0
          },
          splitLine: {
            lineStyle: {
              color: '#152029',
              type: 'dashed',
            },
          },
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#273F4B',
            },
          },
          axisLabel: {
            color: '#a2b4c9',
          },
          splitLine: {
            lineStyle: {
              color: '#152029',
              type: 'dashed',
            },
          },
          // axisTick: {
          //   show: true,
          //   lineStyle: {
          //     color: '#f00'
          //   }
          // }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          // borderWidth: 1,
          // borderColor: '#ccc',
          // padding: 10,
          // textStyle: {
          //   color: '#000',
          // },
          // position: function (pos, params, el, elRect, size) {
          //   const obj = {
          //     top: 10,
          //   }
          //   obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
          //   return obj
          // },
          // extraCssText: 'width: 170px'
        },
        color: ['#0A4072', '#683F14', '#0F605A', '#0F5A7A', '#5C5F25'],
        series: [
          {
            name: 'aaa',
            type: 'scatter',
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
            ],
          },
          {
            name: 'bbb',
            type: 'scatter',
            symbolSize: 20,
            data: [
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
            ],
          },
          {
            name: 'ccc',
            type: 'scatter',
            symbolSize: 20,
            data: [
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
            ],
          },
          {
            name: 'ddd',
            type: 'scatter',
            symbolSize: 20,
            data: [
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
            ],
          },
          {
            name: 'eee',
            type: 'scatter',
            symbolSize: 20,
            data: [
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68]
            ],
          },
        ]
      }
      this.myChart.setOption(option)
    },
  },
}
</script>

<style scoped lang="scss">
.list-wrap {
  height: 100%;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  .section-head {
    height: 32px;
    padding: 0 13px;
    background-color: #1c2630;
    border-left: 4px solid #be8728;
    font-family: MICROGRAMMADMEDEXT;
    font-size: 20px;
    font-weight: bold;
  }
  .list-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    .filter-wrap {
      height: 50px;
      margin-top: 16px;
      ::v-deep .el-form-item__label {
        font-size: 16px;
        color: #a7bacf;
      }
    }
    .chart-wrap {
      flex: 1;
    }
  }
}
</style>