首先安装依赖

 

1

npm install -S vue-highcharts

 

  

在main.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

import Vue from 'vue'

import App from './App'

import router from './router'

 

//highcharts的引入

import VueHighcharts from 'vue-highcharts';

 

Vue.use(VueHighcharts)

Vue.config.productionTip = false

 

new Vue({

  el: '#app',

  router,

  template: '<App/>',

  components: { App },

  methods:{

 

    moreChart() {

        var options = this.getMoreOptions(this.type);

 

        if (this.chart) {

            this.chart.destroy();

        };

    // 初始化 Highcharts 图表

    this.chart = new Highcharts.Chart('highcharts-more', options);

    }

  }

})

图表组件名charts.vue,代码如下(div绑定obj属性是用于动态改变数据,调用update方法,其他博客没有讲解这一点):

<template>
  <div class="x-bar">
    <div :id="id" :option="option" :obj="chartObj"></div>
  </div>
</template>
<script>
//import exportCSV from '@/export-csv.js';
import HighCharts from 'highcharts';
export default {
  // 验证类型
    data() {
        return {
            chartObj:{}
        }
    },
  props: {
    id: {
      type: String
    },
    option: {
      type: Object
    }
  },
  watch: {
    option () {
      HighCharts.chart(this.id,this.option);
    }
  },
  mounted() {
    HighCharts.chart(this.id,this.option);
        this.chartObj=HighCharts.chart(this.id,this.option);
  }
}
</script>

在需要使用的页面调用组件

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

<template>

    <div class="hello">

        <div class="charts">

            <x-chart :id="id" :option="option" ref="wish"></x-chart>

        </div>

    </div>

</template>

 

<script>

    // 导入chart组件

    import XChart from './charts.vue'

    export default {

        data() {

            return {

                id: 'test',

                option: {

                    chart: {

                        type: 'line'

                    },

                    title: {

                        text: '月平均气温'//表头文字

                    },

                    subtitle: {

                        text: '数据来源: WorldClimate.com'//表头下文字

                    },

                    xAxis: {//x轴显示的内容

                        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],

                        plotbands:[{//可以显示一个方块,如果需要的话可以更改透明度和颜色

                                from:4.5,

                                to:6.5,

                                color:''rgba(68,170,213,0)//透明度和颜色

                            }]

                                                 },

 

                        yAxis: {//y轴显示的内容

                        title: {

                            text: '气温 (°C)'

                        }

                    },

                    plotOptions: {

                        line: {

                            dataLabels: {

                                enabled: true // 开启数据标签

                            },

                            enableMouseTracking: false // 关闭鼠标跟踪,对应的提示框、点击事件会失效

                        }

                    },

                    series: [{//两条数据

                        name: '东京',

                        data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

                    }, {

                        name: '伦敦',

                        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

                    }]

                }

            }

        },

        components: {

            XChart

        }

    }

</script>

 动态改变数据语句:

 this.$refs.wish.chartObj.series[0].update({
                data: [29.9, 71.5, 306.4, 429.2, 144.0, 176.0, 135.6, 248.5, 216.4, 194.1, 95.6, 54.4]
            });

Logo

前往低代码交流专区

更多推荐