wt_project_web_bak/src/views/invest/components/chart.vue

<template>
  <div>
    <charts id="chart" height="255px" :option="option"/>
  </div>
</template>

<script>
import charts from '../../../components/echarts/index.vue'

export default {
  components: {charts},
  props: {
    deptId: {
      type: String,
      default: ''
    },
    quarter: {
      type: Object,
      default: null
    },
    year: {
      type: String,
      default: null
    }
  },
  watch: {
    deptId: {
      handler(val) {
        this.init()
      },
      immediate: true
    },
    quarter: {
      handler(val) {
        this.init()
      },
      immediate: true
    },
    year: {
      handler(val) {
        this.init()
      },
      immediate: true
    }
  },
  data() {
    return {
      option: {
        title: {
          text: '单位：(万元)',
          textStyle: {
            color: 'white',
            fontSize: '12'
          },
          x: 'right',
          y: 'top'
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            splitLine: {show: false},
            data: [],
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#B2BFCB',
                width: '2'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {show: false},
            splitLine: {show: false},
            axisLine: {
              show: true,
              lineStyle: {
                color: '#B2BFCB',
                width: '2'
              }
            }
          },
          {
            type: 'value',
            name: '',
            axisTick: {show: true},
            splitLine: {show: true},
            interval: 5,
            axisLabel: {
              formatter: '',
              lineStyle: {
                color: 'red',
                width: '2'
              }
            }
          }
        ],
        series: [
          {
            name: '计划完成总投资',
            type: 'line',
            barWidth: '45',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: 'red',
                  fontSize: 12
                }
              }
            },
            label: {
              show: true,
              position: 'top'
            },
            lineStyle: {color: '#528BEC', type: 'solid', borderColor: 'red'},
            data: []
          },
          {
            name: '平均值',
            type: 'line',
            barWidth: '45',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: 'red',
                  fontSize: 12
                }
              }
            },
            label: {
              show: true,
              position: 'top'
            },
            lineStyle: {color: 'red', type: 'solid', borderColor: 'red'},
            data: []
          }
        ]
      },
      type: 1
    }
  },
  created() {
  },
  methods: {
    init() {
      this.$api.invest.count({
        deptId: this.deptId === null ? '' : this.deptId,
        year: this.year === null ? '' : this.year,
        quarter: this.quarter.value === undefined ? '' : this.quarter.value
      }).then(res => {
        if (res.code === 200) {
          this.option.xAxis[0].data = res.data.map(res => res.month)
          this.option.series[0].data = res.data.map(res => res.sum_complete_amount)
          this.option.series[1].data = res.data.map(res => res.average)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss" type="text/scss"></style>