Vue中使用highcharts之柱状图

参考http://blog.jianshukeji.com/2017/09/use-highcharts-with-vue/

目录

1、在Vue项目中下载highcharts

2、简单的封装一个 Components

3、调用组件

4、结果图

---

1、在Vue项目中下载highcharts

npm install highcharts

下载完以后可以看到

2、简单的封装一个 Components

HighchartsComponent.vue

<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'
  // 树状图中的点（矩形）的颜色是由和它同级的数据点的值来计算的。
  // 如果需要 colorAxis 功能则需额外的引入http://cdn.hcharts.cn/highcharts/modules/heatmap.js 。
  import HeatMap from 'highcharts/modules/heatmap'
  import Exporting from 'highcharts/modules/exporting'
  import TreeMap from 'highcharts/modules/treemap'
  HighchartsMore(Highcharts)
  HighchartsDrilldown(Highcharts)
  Highcharts3D(Highcharts)
  HeatMap(Highcharts)
  Exporting(Highcharts)
  TreeMap(Highcharts)
  export default {
    props: ['defOptions', 'styles'],
    name: 'highcharts',
    data () {
      return {
        chart: null
      }
    },
    mounted () {
      this.initChart()
    },
    watch: {
      // 当外面传进来的defOptions有变化时重新渲染视图
      defOptions: function (val, oldVal) {
        this.initChart()
      }
    },
    methods: {
      initChart () {
        // 根据传进来的style设置宽高
        this.$el.style.width = (this.styles.width || 800) + 'px'
        this.$el.style.height = (this.styles.height || 400) + 'px'
        this.chart = new Highcharts.Chart(this.$el, this.defOptions)
      }
    }
  }
</script>
<style>
  .highcharts-container {
    width: 800px;
    height: 400px;
  }
</style>

3、调用组件

<template>
  <highcharts-container :defOptions="options" :styles="sty"></highcharts-container>
</template>

<script>
    import HighchartsContainer from '../../common/HighchartsComponent.vue'
    export default {
      components: {
        HighchartsContainer
      },
      data () {
        return {
          sty: {
            width: 1200,
            height: 400
          },
          options: {
            title: {
              text: '按时间汇总',
              x: -20 // center
            },
            chart: {
              type: 'column'
            },
            xAxis: {
              categories: ['00:00~01:00', '01:00~02:00', '02:00~03:00', '03:00~04:00', '04:00~05:00', '05:00~06:00',
                '06:00~07:00', '07:00~08:00', '08:00~09:00', '09:00~10:00', '10:00~11:00',
                '11:00~12:00', '12:00~13:00', '13:00~14:00', '14:00~15:00', '15:00~16:00',
                '16:00~17:00', '17:00~18:00', '18:00~19:00', '19:00~20:00', '20:00~21:00',
                '21:00~22:00', '22:00~23:00', '23:00~24:00'
              ]
            },
            yAxis: {
              title: {
                text: '过车统计'
              },
              // 标示线
              plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
              }]
            },
            tooltip: {
              valueSuffix: '辆' // 提示信息所带单位
            },
            legend: {
              enabled: false //  禁用图例
            },
            credits: {
              enabled: false // 禁用版权信息
            },
            series: [{
              name: '过车数量', 
              data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6,
                7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }]
          }
        }
      }
    }
</script>

<style>

</style>

 

4、结果图