Vue.js集成Highcharts

发表于 更新于 阅读次数：

Vue.js集成Highcharts方法

  1. 安装highcharts
1
npm install --save highcharts
  1. 封装hightcharts成Vue.js组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
  <div class="highcharts-container">
  </div>
</template>
<script>
import Highcharts from 'highcharts/highstock'
import HighchartsMore from 'highcharts/highcharts-more'
import HighchartsDrilldown from 'highcharts/modules/drilldown'
import Highcharts3D from 'highcharts/highcharts-3d'
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts)
Highcharts3D(Highcharts)

export default {
  props: ['options'],
  name: 'HighCharts',
  data () {
    return {
      chart: null
    }
  },
  watch: {
    options: function (newVal, oldVal) { // watch it
      this.chart.update(newVal, true)
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      this.chart = new Highcharts.Chart(this.$el, this.options)
    }
  }
}

</script>
  1. 在src/main.js引入组件
1
2
import HighCharts from './components/HighCharts.vue'
Vue.component('HighCharts', HighCharts)
  1. 使用组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
  <div class="radarGraph">
    <HighCharts :options="options" class="radar" ></HighCharts>
  </div>
</template>
<script>

export default {
  name: 'RadarGraph',
  computed: {
    gameInfo () {
      return this.$store.state.gameInfo
    },
    options () {
      return {

        chart: {
          polar: true,
          type: 'line',
          marginTop: 0,
          marginBottom: 0,
          marginLeft: 0,
          marginRight: 0
        },

        credits: {
          enabled: false
        },

        pane: {
          size: '75%'
        },

        title: null,

        legend: {
          enabled: false
        },

        xAxis: {
          categories: ['分类1', '分类2', '分类3', '分类4',
            '分类5', '分类6'
          ],
          labels: {
            style: {
              fontSize: '14px'
            }
          },
          tickmarkPlacement: 'on',
          lineWidth: 0
        },

        yAxis: {
          gridLineInterpolation: 'polygon',
          lineWidth: 0,
          min: 0
        },

        series: [{
          type: 'area',
          name: '得分',
          data: [this.gameInfo.radar1, this.gameInfo.radar2, this.gameInfo.radar3, this.gameInfo.radar4, this.gameInfo.radar5, this.gameInfo.radar6],
          pointPlacement: 'on'
        }]
      }
    },
    ...mapGetters([
      'userId'
    ])
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.$store.dispatch('GetGameInfo', this.userId)
    }
  }
}

</script>

参考链接

  1. 在 Vue 中使用 Highcharts,by 简数科技.