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

<template>
  <section>
    <div class="control">
      <el-row type="flex" align="middle">
        <el-col :span="4" :offset="20">
          <el-select v-model="selectType" size="small" @change="statusChange">
            <el-option
              v-for="item in graphTypeList"
              :key="item.code"
              :label="item.label"
              :value="item.code"
            />
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div class="chart-contain">
      <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" @onClick="toLink" />
    </div>
  </section>
</template>
<script>
import normalEchart from '@/components/chart/normalEchart'
import echarts from 'echarts'
export default {
  components: { normalEchart },
  props: {
    id: {
      type: String,
      default: 'develop-cycle-chart',
      required: false
    },
    chartData: {
      type: Array,
      default: () => [],
      required: false
    },
    type: {
      type: String,
      default: '',
      required: false
    },
    graphType: {
      type: Number,
      default: 1,
      required: false
    },
    graphTypeList: {
      type: Array,
      default: () => [],
      required: false
    }
  },
  data() {
    return {
      echartsOption: null,
      selectType: this.graphType
    }
  },
  watch: {
    chartData: {
      handler(newV) {
        this.setChart()
      },
      deep: true,
      immediate: true
    },
    timeType: {
      handler(newV) {
        this.timeType = newV
      },
      immediate: true
    },
    graphType: {
      handler(newV) {
        this.selectType = newV
      },
      immediate: true
    }
  },
  methods: {
    statusChange(val) {
      this.selectType = val
      this.$emit('update:graphType', this.selectType)
      this.$emit('change')
    },
    setChart() {
      const target = this.graphTypeList.find(value => {
        return value.code === this.graphType
      })
      this.echartsOption = {
        grid: { left: '0%', right: '2%', bottom: '0%', top: '3%', containLabel: true },
        tooltip: {
          showDelay: 0,
          formatter: (params) => {
            if (params.componentType === 'markLine') {
              return `平均${target.label}：${params.value.toFixed(1)}天`
            } else {
              return `交付日期：${params.data[0]}<br/> ${target.label}：${params.data[1]}天`
            }
          },
          axisPointer: {
            show: true,
            type: 'cross',
            lineStyle: {
              type: 'dashed',
              width: 1
            }
          }
        },
        xAxis: {
          type: 'time'

        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '',
          data: this.chartData,
          type: 'scatter',
          symbolSize: 10,
          markLine: {
            data: [{ type: 'average', name: '平均研发交付周期' }],
            label: {
              formatter: function(params) {
                return params.value.toFixed(1)
              }
            }
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(25, 100, 150, 0.5)',
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
              offset: 0,
              color: 'rgb(129, 227, 238)'
            }, {
              offset: 1,
              color: 'rgb(25, 183, 207)'
            }])
          }
        }]
      }
    },
    toLink(params) {
      if (!params.data[2]) return
      if (this.type === 'require') {
        const newTab = this.$router.resolve({ name: '需求详情', query: { id: params.data[2] }})
        window.open(newTab.href, '_blank')
      } else if (this.type === 'task') {
        const newTab = this.$router.resolve({ name: '任务详情', query: { id: params.data[2] }})
        window.open(newTab.href, '_blank')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-contain {
  position: relative;
  height: 400px;
  width: 84%;
  margin: auto;
  margin-top: 20px;
}
.control{
  width: 84%;
  margin: auto;
  margin-top: 20px;
}
</style>