Vue项目中使用HighChart

记：初次在Vue项目中使用 HighChart 的时候要走的坑

感谢这位哥们的思路 传送门

Vue-cli项目使用

npm install highcharts --save

让我们看看 highcharts 的使用方法，传送门

　　Highcharts.chart(targetTag, option)

重启项目，建立chart.vue文件

 <template>
   <div class="x-bar">
     <p :id="id" :option="option"></p>
   </div>
 </template>
 <script>
   import HighCharts from 'highcharts'
   export default {
     data() {
       return {}
     },
     // 验证类型
     props: {
       id: {
         type: String
       },
       option: {
         default() {
           return {}
         }
       }
     },
     mounted() {
       this.hChart = HighCharts // 这个this.hChart是便于每次组件chart的时候都是一个新的chart
       this.checkAndSetOption()
     },
     watch: {

     },
     methods: {
       checkAndSetOption() {
         let option = this.option
         let id = this.id
         if(this.isValidOption(option)) {
           // this.hChart.setOption(option)
           this.hChart.chart(id,option)
         }else{
           console.error("chart option ERROR")
         }
       },
       isValidOption(option) {
         return this.isObject(option) && !this.isEmptyObject(option)
           && this.hasSeriesKey(option)
           && this.isSeriesArray(option) && !this.isSeriesEmpty(option)
       },
       isObject(option) {
         return Object.prototype.isPrototypeOf(option)
       },
       isEmptyObject(option) {
         return Object.keys(option).length === 0
       },
       hasSeriesKey(option) {
         return !!option['series']
       },
       isSeriesArray(option) {
         return Array.isArray(option['series'])
       },
       isSeriesEmpty(option) {
         return option['series'].length === 0
       }
     }
   }
 </script>

调用 chart 组件

<template>
  <div id="appDiv">
      <x-chart :id="id1" :option="options"></x-chart>
    </div>
  </div>
</template>

<script>
  import XChart from '@/components/base/chart/chart
  import chartOptions from '@/components/base/chart/chart-options'
  export default {
    name: 'chart',
    data() {
      let options = chartOptions.bar
      return {
        id1: 'test',
        options: options
      }
    },
    components: {
      XChart
    }
  }
</script>
<style>
  #test {
    width: 400px;
    height: 400px;
    margin: 40px auto;
  }
</style>

chart-options.js 内容（用于配置 chart 的 options）

module.exports = {
  bar: {
    chart: {
      type:'column'//指定图表的类型，默认是折线图（line）
    },
    credits: {
      enabled:false
    },//去掉地址
    title: {
      text: '我的第一个图表' //指定图表标题
    },
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
      '#24CBE5' ],
    xAxis: {
      categories: ['1号', '2号', '3号','3号','3号'] //指定x轴分组
    },
    yAxis: {
      title: {
        text: '最近七天', //指定y轴的标题
      },
    },
    plotOptions: {
      column: {
        colorByPoint:true
      },
    },
    series: [{ //指定数据列
      name: '小明',
      data: [{
        y:1000,
        color:"red"}, 5000, 4000,5000,2000] //数据
    }]
  }
}