vue项目引入highcharts步骤：
第一步:
安装 highcharts 命令如下：

npm  install highcharts  --save

第二步：

编写公用的组件： 在src ------> components (组件目录下)新建 charts.vue 页面

代码如下：

<template>
  <div class="x-bar">
    <div :id="id"  :option="option"></div>
  </div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
  // 验证类型
  props: {
    id: {
      type: String
    },
    option: {
      type: Object
    }
  },
  watch: {
    option () {
         HighCharts.chart(this.id,this.option);
    }
},
  mounted() {
    HighCharts.chart(this.id,this.option)
  }
}
</script>

第三步： 编写可视页面：
代码如下：

<template>
  <div>
    <x-chart id="highcharts" class="high" :option="option"></x-chart>
  </div>
</template>
<script>
  // 导入chart组件
  import XChart from '@/components/charts'
  export default {
    data() {
      return {
        option:{
         title: {
				text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
		},
		subtitle: {
				text: '数据来源：thesolarfoundation.com'
		},
		yAxis: {
				title: {
						text: '就业人数'
				}
		},
		legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'middle'
		},
		plotOptions: {
				series: {
						label: {
								connectorAllowed: false
						},
						pointStart: 2010
				}
		},
		series: [{
				name: '安装，实施人员',
				data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
		}, {
				name: '工人',
				data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
		}, {
				name: '销售',
				data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
		}, {
				name: '项目开发',
				data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
		}, {
				name: '其他',
				data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
		}],
		responsive: {
				rules: [{
						condition: {
								maxWidth: 500
						},
						chartOptions: {
								legend: {
										layout: 'horizontal',
										align: 'center',
										verticalAlign: 'bottom'
								}
						}
				}]
        }
    },
    components: {
      XChart
    }
  }
</script>

这样就可以，运行结果如下：

这样安装对于大多数图就欧克了！

可以这次我是想要弄Highcharts 桑基图 然后我就按部就班换option 可就是不行报错误码#17 说是数据格式有误 但是普通html就可以 就是和Vue的差别好像就是HTML引入了两个JS即:

<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/sankey.js"></script>

如果我把sankey.js去掉就也会报#17的错误警告 所以定位到应该是没有安装sankey组件啥的；怎么引用的，我几经波折终于找到：
就是他 在main.js中添加：

var Highcharts = require('highcharts')
// 在 Highcharts 加载之后加载功能模块
require('highcharts/modules/sankey')(Highcharts)

对就是他，害的我找了好几个小时呐 我壳太难了
总结： 对于highcharts 以及echarts引用的时候 多看看组件的引用 两个组件相似
附echarts引入例子：

let echarts = require('echarts/lib/echarts')
// 引入折线图/柱状图等组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')

未完待续 好了 喜欢的朋友点赞呦