在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>