thoth-frontend-test/src/views/quality/components/distributionChart.vue

<template>
  <section>
    <div class="control">
      <el-row type="flex" align="middle">
        <el-col :span="4">
          <el-select v-model="curStatus" size="small" @change="statusChange">
            <el-option
              v-for="item in statusList"
              :key="item.code"
              :disabled="activeTab === '2'&&item.code === 1"
              :label="item.label"
              :value="item.code"
            />
          </el-select>
        </el-col>
        <el-col :span="4" :offset="16" class="col-flex-end">
          <div class="bar-pie" :class="[barOrPie==='bar'?'active':'']" @click="changeBarOrPie('bar')">柱状图</div>
          <div class="bar-pie" :class="[barOrPie==='pie'?'active':'']" @click="changeBarOrPie('pie')">饼图</div>
        </el-col>
      </el-row>
    </div>
    <div class="chart-contain">
      <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" />
    </div>
  </section>
</template>
<script>
import normalEchart from '@/components/chart/normalEchart'
export default {
  components: { normalEchart },
  props: {
    id: {
      type: String,
      default: 'distribute-chart',
      required: false
    },
    statusList: {
      type: Array,
      default: () => [],
      required: true
    },
    chartData: {
      type: Object,
      default: () => null,
      required: false
    },
    status: {
      type: Number,
      default: NaN,
      required: true
    },
    activeTab: {
      type: String,
      default: '1',
      required: false
    }
  },
  data() {
    return {
      echartsOption: null,
      curStatus: 1, // 当前状态
      barOrPie: 'bar' // 柱状图or饼图
    }
  },
  watch: {
    chartData: {
      handler(newV) {
        this.changeBarOrPie(this.barOrPie)
      },
      deep: true,
      immediate: true
    },
    status: {
      handler(newV) {
        this.curStatus = newV
      },
      immediate: true
    },
    activeTab: {
      handler(newV) {
        this.activeTab = newV
      },
      immediate: true
    }
  },
  mounted() {
    this.changeBarOrPie(this.barOrPie)
  },
  methods: {
    statusChange(e) {
      this.$emit('update:status', this.curStatus)
      this.$emit('change')
    },
    changeBarOrPie(type) { // 饼图柱状图切换
      this.barOrPie = type
      if (!this.chartData) return
      if (type === 'bar') {
        this.echartsOption = {
          color: ['#3AA1FF'],
          tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
          grid: { left: '0', right: '0', top: '10%', bottom: '0', containLabel: true },
          xAxis: [{ type: 'category', data: this.chartData.xaxis, axisLabel: { interval: 0, rotate: 0 }, axisTick: { alignWithLabel: true }}],
          yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
          series: [{
            name: '数量', type: 'bar', barWidth: '20px', data: this.chartData.yaxis[0] && this.chartData.yaxis[0].data || [],
            itemStyle: { normal: { label: { show: true, formatter: '{c}', position: 'top' }}}
          }]
        }
      } else {
        const newArr = this.chartData.xaxis.map((item, index) => {
          return {
            value: this.chartData.yaxis[0] && this.chartData.yaxis[0].data[index] || null,
            name: item
          }
        })
        this.echartsOption = {
          color: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'],
          grid: { left: '0', right: '0', top: '5%', bottom: '0' },
          tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
          legend: { orient: 'vertical', left: 'right', top: 'center', data: this.chartData.xaxis },
          series: [{
            name: '数量', type: 'pie', radius: ['45%', '60%'], right: '30%', label: { position: 'outer', alignTo: 'edge', margin: 20 }, data: newArr,
            itemStyle: { normal: { label: { show: true, formatter: '{b} : {c} ({d}%)' }, labelLine: { show: true }}}
          }]
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-contain {
  position: relative;
  height: 400px;
  width: 84%;
  margin: 20px auto;
}
.control{
  width: 84%;
  margin: auto;
  margin-top: 20px;
}
.bar-pie {
  font-size: 14px;
  width: 40%;
  display: inline-block;
  padding: 6px 10px;
  margin-left: 5%;
  color: #50A6FF;
  border: 1px solid #50A6FF;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}
.active {
  color: #ffffff;
  background: #50A6FF;
}
</style>