gdy_qywx_pc/src/views/integral/TrendChart.vue

<template>
  <div>
    <div :id="id" :options="options"></div>
  </div>
</template>
<script>
  import HighCharts from 'highcharts';

  export default {
    // 验证类型
    props: {
      id: {
        type: String
      },
      options: {
        type: Object
      }
    },
    data() {
      return {
        title: "积分趋势图",
        chart: null
      }
    },
    mounted() {
      this.chart = HighCharts.chart(this.id, this.options)
    },
    methods: {
      updateData: function (data) {
        if (!data) {
          return
        }
        while (this.chart.series.length > 0) {
          this.chart.series[0].remove()
        }
        if (data.filter_text) {
          let filterText = data.filter_text
          let titleSuffix = "（ " + filterText.time_range + "）"
          if (filterText.employee) {
            titleSuffix += "・" + filterText.employee
          }
          if (filterText.dept) {
            titleSuffix += "・" + filterText.dept
          }
          if (filterText.category) {
            titleSuffix += "・" + filterText.category
          }
          this.chart.setTitle({text: this.title + titleSuffix})
        }
        if (data.chart) {
          let chartData = data.chart
          this.chart.xAxis[0].setCategories(chartData.labels)
          this.chart.addSeries({
            name: "奖分",
            data: chartData.p_positive.map(Number)
          })
          this.chart.addSeries({
            name: "扣分",
            data: chartData.p_negative.map(Number)
          })
        }
      }
    }
  }
</script>