蜘蛛圖效果展示：

**第一步：**安裝highcharts到項目
yarn add highcharts 或 npm install highcharts

**第二步：**在UI界面中準備一個盒子來放圖表

<view class="charts-main"><view id="charts" style="width: 100%;height: 460rpx;"></view> </view>

**第三步：**在需要展示圖表的.vue組件中import進行導入
以下示例展示蜘蛛圖

import hightcharts from '@/node_modules/highcharts' //不引入雷達圖不顯示，只顯示成折線圖 import HighchartsMore from 'highcharts/highcharts-more'; //不引入雷達圖不顯示，只顯示成折線圖 HighchartsMore(hightcharts);

第四步：在methods方法中初始化圖表，然后在mounted方法中調用該方法

export default {methods: {// 初始化蜘蛛圖表spiderCharts() {// 初始化圖表let chart = hightcharts.chart('charts', {chart: {polar: true,type: 'line' // 折線圖},title: {text: '蜘蛛圖' // 圖表表態},pane: {size: '80%'},xAxis: {categories: ['箱變', '35KV配電室', '繼保室', '園區圍欄','10KV配電室', '主變及管母'],tickmarkPlacement: 'on',lineWidth: 0},yAxis: {gridLineInterpolation: 'polygon',lineWidth: 0,min: 0},series: [{name: '預算撥款', //統一的前置詞,非必須data: [43000, 19000, 60000, 35000, 17000, 10000],pointPlacement: 'on'}]});}},mounted() {this.spiderCharts()} }

注：
關于tooltip 屬性，如果只展示折線圖，可以加上，且點擊時不會報錯，也會彈出提示信息，但如果要展示成雷達圖的樣式，就不能加tooltip，否則點擊某個點時會報錯。
關于圖表右下角的：Highcharts.com如何才能去掉，需要在項目中打開highcharts.js文件，然后Ctrl+F搜索：highcharts.com，將出現的text:"Highcharts.com"改為空串即可

總結

以上是生活随笔為你收集整理的【uniapp】uniapp开发移动端项目使用highcharts（蜘蛛图示例）的全部內容，希望文章能夠幫你解決所遇到的問題。

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