1、沒有Vue安裝Vue環(huán)境的請看這篇博客：
https://www.jianshu.com/p/02b12c600c7b
2、安裝JetBrains WebStorm 11.0.3網(wǎng)上有資源，這里不在累贅。
3、WebStorm打開第一步創(chuàng)建的Vue項目

npm進行highchars的導入，導入完成后就可以進行highchars的可視化組件開發(fā)了
一、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組件建好后，開始創(chuàng)建chart-options目錄，里面創(chuàng)建一個options.js用來存放模擬的chart數(shù)據(jù)，如下圖目錄

內容如下：

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組件模擬數(shù)據(jù)import options from './chart-options/options'export default { // name: 'app',data() {let option = options.barreturn {id: 'test',option: option}},components: {XChart}} </script><style>#test {width: 600px;height: 600px;margin: 40px auto;} </style>

代碼書寫完畢！運行Vue項目！

npm run dev-------(回車)

訪問：localhost:8080即可！

總結

以上是生活随笔為你收集整理的Vue中引入heighchars图表------蜘蛛图/雷达图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。