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] //数据
    }]
  }
}