Vue中引入heighchars图表------蜘蛛图/雷达图

1、没有Vue安装Vue环境的请看这篇博客：
https://www.jianshu.com/p/02b12c600c7b
2、安装JetBrains WebStorm 11.0.3网上有资源，这里不在累赘。
3、WebStorm打开第一步创建的Vue项目

npm进行highchars的导入，导入完成后就可以进行highchars的可视化组件开发了
一、npm install highcharts --save（回车）

二、components目录下新建一个chart.vue组件

内容如下：

<template>
  <div class="x-bar">
    <div :id="id"
         :option="option"></div>
  </div>
</template>
<script>
  import HighCharts from 'highcharts'
  import HighchartsMore from 'highcharts/highcharts-more';//不引入雷达图不显示
  HighchartsMore(HighCharts);//不引入雷达图不显示
  export default {
    // 验证类型
    props: {
      id: {
        type: String
      },
      option: {
        type: Object
      }
    },
    mounted() {
      HighCharts.chart(this.id,this.option)
    }
  }
</script>

三、chart组件建好后，开始创建chart-options目录，里面创建一个options.js用来存放模拟的chart数据，如下图目录

内容如下：

module.exports = {
  bar: {
    chart: {
      polar: true,
      type: 'line'
    },
    title: {
      text: '预测与实际风险',
      x: -80
    },
    pane: {
      size: '80%'
    },
    xAxis: {
      categories: ['倒地', '碰撞', '厌食', '爬窗',
        '焦躁', '冲突'],
      tickmarkPlacement: 'on',
      lineWidth: 0
    },
    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 0,
      min: 0
    },
    tooltip: {
      shared: true,
      pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
    },
    legend: {
      align: 'right',
      verticalAlign: 'top',
      y: 70,
      layout: 'vertical'
    },
    series: [{
      name: '预测风险',
      data: [10, 32, 12, 43, 13, 64],
      pointPlacement: 'on'
    }, {
      name: '实际风险',
      data: [3, 20, 10, 33, 7, 50],
      pointPlacement: 'on'
    }]

  }
}

四、再App.vue中引用chart组件

内容如下：

<template>
  <div id="app">
    <x-chart :id="id" :option="option"></x-chart>
  </div>
</template>

<script>
  // 导入chart组件
  import XChart from './components/chart.vue'
  // 导入chart组件模拟数据
  import options from './chart-options/options'
  export default {
//    name: 'app',
    data() {
      let option = options.bar
      return {
        id: 'test',
        option: option
      }
    },
    components: {
      XChart
    }
  }
</script>

<style>
  #test {
    width: 600px;
    height: 600px;
    margin: 40px auto;
  }
</style>

代码书写完毕！运行Vue项目！

npm run dev-------(回车)

访问：localhost:8080即可！