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/chartimport chartOptions from '@/components/base/chart/chart-options'export default {name: 'chart',data() {let options = chartOptions.barreturn {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] //数据}]}
}