dzhh-frontend/.svn/pristine/76/76d4ca4c061f3d2019976c92d20fac2ddb8758c3.svn-base

<template>
  <div>
    <pie
      v-if="graphType === 'pie'"
      :title="title?head.name:''"
      @click="handleChartClick(arguments,'pie')"
      :dataSource="chartData"
      :field="head.groupField.split(',')[0]"
      :xField="head.xaxisField"
    >
    </pie>
    <pie-multi-storey
      v-if="graphType === 'PieMultiStorey'"
      :title="title?head.name:''"
      @click="handleChartClick(arguments,'pie')"
      :dataSource="chartData"
      :field="head.groupField.split(',')"
      :xField="head.xaxisField"
    >
    </pie-multi-storey>
    <bar-multid
      v-else-if="graphType === 'bar'"
      @click="handleChartClick(arguments,'bar')"
      :title="title?head.name:''"
      :dataSource="chartData"
      :xField="head.xaxisField"
      :yField="head.isGroup?'':head.yaxisField"
      :fields="head.groupField.split(',')"
      :aliases="aliases"
    >
    </bar-multid>
    <bar-stack
      v-else-if="graphType === 'barStack'"
      @click="handleChartClick(arguments,'bar')"
      :title="title?head.name:''"
      :dataSource="chartData"
      :xField="head.xaxisField"
      :yField="head.isGroup?'':head.yaxisField"
      :fields="head.groupField.split(',')"
      :aliases="aliases"
    >
    </bar-stack>
    <transverse-bar-muiltid
      v-else-if="graphType === 'transverseBarMuiltid'"
      @click="handleChartClick(arguments,'transverseBar')"
      :title="title?head.name:''"
      :dataSource="chartData"
      :xField="head.xaxisField"
      :yField="head.isGroup?'':head.yaxisField"
      :fields="head.groupField.split(',')"
      :aliases="aliases"
      >
    </transverse-bar-muiltid>
    <line-chart-multid
      v-else-if="graphType === 'line'"
      @click="handleChartClick(arguments,'line')"
      :title="title?head.name:''"
      :dataSource="chartData"
      :xField="head.xaxisField"
      :yField="head.isGroup?'':head.yaxisField"
      :fields="head.groupField.split(',')"
      :aliases="aliases"
    ></line-chart-multid>
    <radar
      v-else-if="graphType === 'radar'"
      @click="handleChartClick(arguments,'radar')"
      :title="title?head.name:''"
      :dataSource="chartData"
      :fields="head.groupField.split(',')"
      :xField="head.xaxisField"
      :aliases="aliases"
    >
    </radar>
    <funnel
      v-else-if="graphType === 'funnel'"
      @click="handleChartClick(arguments,'funnel')"
      :title="title?head.name:''"
      :dataSource="chartData"
      :field="head.groupField.split(',')[0]"
      :xField="head.xaxisField"
      >
    </funnel>
  </div>
</template>

<script>
import Pie from '@/components/chart/Pie'
import BarMultid from '@/components/chart/BarMultid'
import BarStack from '@/components/chart/BarStack'
import LineChartMultid from '@/components/chart/LineChartMultid'
import TransverseBarMuiltid from '@/components/chart/TransverseBarMuiltid'
import Radar from '@/components/chart/Radar'
import Funnel from '@/components/chart/Funnel'
import PieMultiStorey from '@/components/chart/PieMultiStorey'
export default {
  name: 'Chart',
  components: {
    Pie,
    BarMultid,
    LineChartMultid,
    TransverseBarMuiltid,
    Radar,
    Funnel,
    BarStack,
    PieMultiStorey
  },
  props: ['chartData', 'head', 'graphType', 'title', 'aliases'],
  methods: {
    handleChartClick(msg, type) {
      if (this.head.extendJs) {
        this.chartClick(type, msg)
      }
    },
    chartClick(type, msg) {
      var onClick = {}
      eval(this.head.extendJs)
      if (onClick && onClick[type]) {
        onClick[type].call(this, msg)
      }
    }
  }
}
</script>
<style scoped>

</style>