vue项目引入highcharts方法，以及遇到的坑

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')

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