【uniapp】uniapp开发移动端项目使用highcharts（蜘蛛图示例）

蜘蛛图效果展示：

**第一步：**安装highcharts到项目
yarn add highcharts 或 npm install highcharts

**第二步：**在UI界面中准备一个盒子来放图表

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

**第三步：**在需要展示图表的.vue组件中import进行导入
以下示例展示蜘蛛图

import hightcharts from '@/node_modules/highcharts'
//不引入雷达图不显示，只显示成折线图
import HighchartsMore from 'highcharts/highcharts-more'; 
//不引入雷达图不显示，只显示成折线图
HighchartsMore(hightcharts); 
1
2
3
4
5

第四步：在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()
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

注：
关于tooltip 属性，如果只展示折线图，可以加上，且点击时不会报错，也会弹出提示信息，但如果要展示成雷达图的样式，就不能加tooltip，否则点击某个点时会报错。
关于图表右下角的：Highcharts.com如何才能去掉，需要在项目中打开highcharts.js文件，然后Ctrl+F搜索：highcharts.com，将出现的text:"Highcharts.com"改为空串即可