Vue.js集成Highcharts

发表于 | 更新于 | 评论数： | 阅读次数：

Vue.js集成Highcharts方法

  1. 安装highcharts
    1
    npm install --save highcharts
  2. 封装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>
  3. 在src/main.js引入组件
    1
    2
    import HighCharts from './components/HighCharts.vue'
    Vue.component('HighCharts', HighCharts)
  4. 使用组件
    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
    <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 简数科技.