DataOps-web/src/views/dataChart/dataChartEdit.vue

<template>
  <div class="d-flex chart heightFull widthFull">
    <div class="chart-list heightFull overflow-y-auto mr-3">
      <div v-for="(chart, key) in Charts" :key="key" class="chart-type mb-3" @click="onChange(key)">
        <div>
          <span class="mdi" :class="chart.icon"></span>
        </div>
        <div>
          {{ chart.title }}
        </div>
      </div>
    </div>

    <div class="chart-content d-flex heightFull">
      <FullscreenToggle class="chart-content-show heightFull white mr-3 overflow-hidden pa-3 position-relative" ref="box">
        <template v-slot="{ toggle, isFullscreen }">
          <div v-if="!empty" class="position-absolute" style="right: 10px; top: 80px; z-index: 999">
            <v-btn
                icon
                color="primary"
                @click="toggle"
              >
                <v-icon>{{ isFullscreen ? 'mdi-arrow-collapse' : 'mdi-arrow-expand'}}</v-icon>
              </v-btn>
          </div>
          <MEmpty v-if="empty"></MEmpty>
          <InitChart ref="chart" class="heightFull widthFull"></InitChart>
        </template>
      </FullscreenToggle>
      <DataChartEditChat @render="onRender"></DataChartEditChat>
    </div>
  </div>
</template>

<script>
import MEmpty from '@/components/Common/empty.vue'
// 属性模块
import * as Charts from './utils/options.js'
import DataChartEditChat from './dataChartEditChat.vue'
import InitChart from '@/charts/initChart'
import { cloneDeep } from 'lodash'

import FullscreenToggle from '@/components/FullscreenToggle'
export default {
  name: 'dataChartEdit',
  components: {
    DataChartEditChat,
    InitChart,
    MEmpty,
    FullscreenToggle
  },
  data () {
    return {
      Charts,
      chart: null,
      chartsOpt: {
        data: [[]],
        config: {
          xAxisData: []
        },
        key: null
      }
    }
  },
  computed: {
    empty () {
      return !this.chartsOpt.config.xAxisData.length
    }
  },
  mounted () {
    this.chart = this.$refs.chart.init()
  },
  methods: {
    onChange (key) {
      this.chartsOpt.key = key
      this.setData()
    },
    onRender ({ type, data }) {
      this.chartsOpt.config.xAxisData = type
      this.chartsOpt.data = data
      this.chartsOpt.key = this.chartsOpt.key || 'bar'
      this.setData()
    },
    setData () {
      const { data, key, config } = this.chartsOpt
      this.chart.showLoading()
      // 根据key值处理data
      const _option = cloneDeep(Charts[key].option)
      const series = _option.series
      const _data = []
      if (key === 'pie') {
        (data || [[]]).forEach(e => {
          _data.push(e.map((_e, i) => {
            return {
              value: _e,
              name: config.xAxisData[i] ?? _e
            }
          }))
        })
      } else {
        _data.push(...data)
      }
      const _tem = series[0]
      const { data: dataSource, ...opt } = _tem
      data.forEach((d, i) => {
        series[i] = {
          data: _data[i],
          ...opt
        }
      })
      if (_option.xAxis?.data) {
        _option.xAxis.data = config?.xAxisData ?? data[0].map((e, i) => i)
      }
      this.chart.setOption(_option, true)
      this.chart.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
.heightFull {
  height: 100%;
}
.widthFull {
  width: 100%;
}
.chart {
  &-list {
    // width: 100px;
    .chart-type {
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      cursor: pointer;
      .mdi {
        font-size: 24px;
      }
      &:hover {
        background-color: #f5f5f5;
      }
    }
  }
  &-content {
    width: 0;
    flex: 1;
    &-show {
      width: 50%;
      border: 1px solid #ccc !important;
    }
  }
}
.position {
  &-relative {
    position: relative;
  }
  &-absolute {
    position: absolute;
  }
}
</style>