nezha-nezha-fronted/nezha-fronted/src/components/chart/chart.vue

<template>
  <div class="nz-chart">
    <chart-no-data v-if="isNoData"></chart-no-data>
    <template v-else>
      <chart-time-series
        v-if="isTimeSeries(chartInfo.type)"
        :chart-data="chartData"
        :chart-info="chartInfo"
        :chart-option="chartOption"
      ></chart-time-series>
<!--      <chartHexagon-->
<!--        :ref="'chart'+chartInfo.id"-->
<!--        v-if="isHexagonFigure(chartInfo.type)"-->
<!--        :chart-data="chartData"-->
<!--        :chart-info="chartInfo"-->
<!--        :chart-option="chartOption"-->
<!--      ></chartHexagon>-->
    </template>
  </div>
</template>

<script>
import chartAssetInfo from './chart/chartAssetInfo'
import chartBar from './chart/chartBar'
import chartClock from './chart/chartClock'
import chartDiagram from './chart/chartDiagram'
import chartEndpointInfo from './chart/chartEndpointInfo'
import chartGauge from './chart/chartGauge'
import chartGroup from './chart/chartGroup'
import chartLog from './chart/chartLog'
import chartNoData from './chart/chartNoData'
import chartPie from './chart/chartPie'
import chartStat from './chart/chartStat'
import chartTable from './chart/chartTable'
import chartText from './chart/chartText'
import chartTimeSeries from './chart/chartTimeSeries'
import chartTreemap from './chart/chartTreemap'
import chartUrl from './chart/chartUrl'
import chartValue from './chart/chartValue'
import chartHexagon from './chart/chartHexagon'
import { getOption, isTimeSeries, isHexagonFigure } from './chart/tools'
import lodash from 'lodash'

export default {
  name: 'chart',
  components: {
    chartAssetInfo,
    chartBar,
    chartClock,
    chartDiagram,
    chartEndpointInfo,
    chartGauge,
    chartGroup,
    chartLog,
    chartNoData,
    chartPie,
    chartStat,
    chartTable,
    chartText,
    chartTimeSeries,
    chartTreemap,
    chartUrl,
    chartValue,
    chartHexagon
  },
  props: {
    chartInfo: Object,
    chartData: [Object, Array, String], // 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染
    customChartOption: Object // 需要自定义echarts的option时传入，非必须；传入该值时仍需传对应格式的chartData
  },
  data () {
    return {
    }
  },
  computed: {
    isNoData () {
      return !this.chartData || this.chartData.length === 0
    },
    chartOption () {
      if (this.customChartOption) {
        return lodash.cloneDeep(this.customChartOption)
      } else {
        return getOption(this.chartInfo.type)
      }
    }
  },
  methods: {
    isTimeSeries,
    isHexagonFigure,
    resize () {
      this.$refs['chart' + this.chartInfo.id].resize()
    }
  },
  mounted () {
  }
}
</script>

<style scoped>

</style>