gdy_qywx_pc/src/views/integral/StructureChart.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
      },
      negative: {
        type: Boolean
      }
    },
    data() {
      return {
        title: this.negative ? "扣分构成图" : "奖分构成图",
        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
          if (chartData) {
            this.chart.addSeries({
              size: '80%',
              innerSize: '60%',
              name: '分值',
              data: chartData,
              dataLabels: {
                style: {
                  fontSize: '13px'
                }
              }
            })
          }
        }
      }
    }
  }
</script>