蜘蛛图效果展示:
**第一步:**安装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"
改为空串即可