在VUE.CLI中使用highcharts

 

二、在VUE.CLI中引用三方开发插件

相关地址：

1.highcharts :https://www.highcharts.com.cn/demo/highcharts/line-basic

1）引入highcharts

   1.在项目组安装highcharts

  npm进行highchars的导入，导入完成后就可以进行highchars的可视化组件开发了

 

npm install highcharts --save

 

2.项目中注册highcharts

在 main.js中创建highcharts的vue对象

//引入HighCharts
import HighCharts from 'highcharts'
Vue.use(HighCharts)

3.在src目录中新增目录

   3.1在src目录中新增chart-options目录，用来存放chart的js

3.2在src目录中的view新增charts目录，用来存放chart组件文件

4.代码编写：

4.1新建js代码，代码可以从 highcharts中拷贝拷贝方法如下：

拷贝部分：

 

 

编写部分：

新增js 在在src目录中新增chart-options目录中 hhhhxL.js

上图拷贝代码：拷贝在下图{}之间,该属性名可以自定义

module.exports = {
    hhhhxL: {
        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'
                    }
                }
            }]
        }
    }
}

 

新增组件 src目录中的view新增charts目录中 HhhhxL.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
  }
},
  mounted() {
    HighCharts.chart(this.id,this.option)
  }
}
</script>

5.组件调用：

5.1 在使用的地方分别引用：options.js和charts.vue例：

//导入chart组件
import XChart from '@/views/charts/HhhhxL.vue'
//导入chart组件模拟数据
import options from '@/chart-options/hhhhxL.js'

 

5.2 就和vue语法一样直接使用组件就可以了：

<template>
<div id="app">
<x-chart :id="id" :option="option"></x-chart>
</div>
</template>
<script>
  //导入chart组件
  import XChart from '@/views/charts/HhhhxL.vue'
  //导入chart组件模拟数据
  import options from '@/chart-options/hhhhxL.js'
export default {
  name: 'app',
data() {
  let option = options.hhhhxL
  return {
      id: 'test2',
      option: option
    }
  },
components: {
    XChart
  }
}
</script>
<style>
#test {
width: 400px;
height: 400px;
margin: 40px auto;
}
</style>