highcharts中的仪表盘样式
仪表盘的样式如下：
是双表盘展示
左边的图中minorTickInterval的值为null，右边的minorTickInterval的值为“auto”
左边的图中lineColor的值为‘#f00’，右边的lineColor的值为“transparent”
yAxis: [{ min: 0, // 最小刻度值 max: 100, // 最大刻度值 minorTickInterval: 'auto', // 表盘中比较短的刻度值 minorTickWidth: that.torem(2), // 表盘中比较短的刻度值的宽度 minorTickLength: that.torem(20), // 表盘中比较短的刻度值的长度 minorTickPosition: 'inside', // 表盘中比较短的刻度值在内部还是在外部显示 minorTickColor: '#00bfd3', // 表盘中比较短的刻度值的颜色 tickPixelInterval: 'auto', // 表盘中比较长的刻度值 tickWidth: that.torem(4), // 表盘中比较长的刻度值的宽度 tickPosition: 'inside', // 表盘中比较长的刻度值在内部还是在外部显示 tickLength: that.torem(26), // 表盘中比较长的刻度值的长度 tickColor: '#48c7ff', // 表盘中比较长的刻度值的颜色 tickInterval: 10, // 间隔 lineColor: 'transparent', // 表盘最外层的连接线 }]
labels: { style: { // 刻度值数字的样式 color: '#f00', fontSize: that.torem(28) // step: 20 }, distance: that.offetY },
y轴的一些设置
yAxis: [{ min: 0, // 最小刻度值 max: 100, // 最大刻度值 minorTickInterval: 'auto', // 表盘中比较短的刻度值 minorTickWidth: that.torem(2), // 表盘中比较短的刻度值的宽度 minorTickLength: that.torem(20), // 表盘中比较短的刻度值的长度 minorTickPosition: 'inside', // 表盘中比较短的刻度值在内部还是在外部显示 minorTickColor: '#00bfd3', // 表盘中比较短的刻度值的颜色 tickPixelInterval: 'auto', // 表盘中比较长的刻度值 tickWidth: that.torem(4), // 表盘中比较长的刻度值的宽度 tickPosition: 'inside', // 表盘中比较长的刻度值在内部还是在外部显示 tickLength: that.torem(26), // 表盘中比较长的刻度值的长度 tickColor: '#48c7ff', // 表盘中比较长的刻度值的颜色 tickInterval: 10, // 间隔 lineColor: 'transparent', // 表盘最外层的连接线 labels: { style: { // 刻度值数字的颜色 color: '#48c7ff', fontSize: that.torem(28) // step: 20 }, distance: that.offetY }, pane: 0, // 第一个面板，第二个面板是1 title: { // 描述文字 text: this.text1, verticalAlign: 'bottom', style: { color: '#fff', fontSize: that.torem(28) }, y: that.torem(220) // 离y轴的距离 } }, { min: 0, max: 100, minorTickInterval: 'auto', minorTickWidth: that.torem(2), minorTickLength: that.torem(20), minorTickPosition: 'inside', minorTickColor: '#00bfd3', tickPixelInterval: 30, tickWidth: that.torem(4), tickPosition: 'inside', tickLength: that.torem(26), tickColor: '#48c7ff', tickInterval: 10, // 间隔 tickmarkPlacement: 'on', lineColor: 'transparent', labels: { style: { color: '#48c7ff', fontSize: that.torem(28) }, distance: that.offetY }, pane: 1, title: { text: this.text2, verticalAlign: 'bottom', style: { color: '#fff', fontSize: that.torem(28) }, y: that.torem(220) } }],
指针以及表盘内百分比的显示的设置
plotOptions: { gauge: { dataLabels: { borderWidth: 0, enabled: true, color: '#48c7ff', fontSize: that.torem(80), format: ` <span> {y} % </span>` }, dial: { radius: '80%', // 半径：指针长度 backgroundColor: '#1b4b77', //指针背景色 borderColor: 'black', borderWidth: that.torem(1), baseWidth: that.torem(10), topWidth: that.torem(1), baseLength: '90%', // of radius rearLength: '15%' //尾巴长度 }, borderWidth: 0 } },
指针中的百分比值，也就是y轴的初始刻度值
series: [{// 第一个表盘对应的数据
data: [80],
yAxis: 0
}, {// 第二个表盘对应的数据
data: [70],
yAxis: 1
}]
完整的代码
<template>
<div class="highcharts-container" ref="chart_gauge"></div>
</template>
<script>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
import { font } from '@/mixins';
export default {
props: ['name', 'title'],
name: 'highcharts',
mixins: [font],
data() {
return {
chart1: null,
data_terminal: [
{
name: '华为',
y: 21.9
},
{
name: '苹果',
y: 14.9
},
{
name: '三星',
y: 15.2
},
{
name: '小米',
y: 25.7
},
{
name: '其他',
y: 35.7
}
],
data_flow: [
{
name: '热点1',
y: 21.9
},
{
name: '热点2',
y: 14.9
},
{
name: '热点3',
y: 15.2
},
{
name: '热点4',
y: 25.7
},
{
name: '其他',
y: 35.7
}
],
options: null,
chartTitle: '',
text1: null,
text2: null,
standSize: document.body.clientWidth,
offetY: 0
};
},
watch: {
standSize: {
handler(newVal, oldVal) {
if (newVal == 4000) {
this.offetY = this.torem(-70);
} else {
this.offetY = this.torem(-60);
}
},
deep: true,
immediate: true
}
},
mounted() {
var that = this;
that.$el.style.height = that.$refs.chart_gauge.offsetHeight - that.torem(100) + 'px';
console.log(this.$refs.chart_gauge.offsetHeight, 'qq');
switch (that.title) {
case 'cpu':
that.text1 = 'AP平均cpu利用率';
that.text2 = 'AC平均cpu利用率';
break;
case '内存':
that.text1 = 'AP平均内存利用率';
that.text2 = 'AC平均内存利用率';
break;
}
this.options = {
chart: {
type: 'gauge',
backgroundColor: 'transparent'
// height: that.torem(500)
},
title: {
text: null
},
labels: {
items: [
{
style: { left: that.torem(180), top: that.torem(280), fontSize: that.torem(42), fontWeight: 'bold', fontFamily: '微软雅黑' }
// html: '<span style="color:#C02316">{y}</span>'
}
]
},
pane: [
// 表盘1设置
{
startAngle: -100, // 表盘开始的角度
endAngle: 100, // 表盘结束的角度
background: null, // 表盘的背景颜色，为null的话就是不要背景颜色
center: ['25%', '65%'], // 表盘的位置
size: '80%' // 表盘的大小
},
// 表盘2设置
{
startAngle: -100,
endAngle: 100,
background: null,
center: ['75%', '65%'],
size: '80%'
}
],
yAxis: [
{
min: 0, // 最小刻度值
max: 100, // 最大刻度值
minorTickInterval: 'auto', // 表盘中比较短的刻度值
minorTickWidth: that.torem(2), // 表盘中比较短的刻度值的宽度
minorTickLength: that.torem(20),// 表盘中比较短的刻度值的长度
minorTickPosition: 'inside',// 表盘中比较短的刻度值在内部还是在外部显示
minorTickColor: '#00bfd3',// 表盘中比较短的刻度值的颜色
tickPixelInterval: 'auto', // 表盘中比较长的刻度值
tickWidth: that.torem(4),// 表盘中比较长的刻度值的宽度
tickPosition: 'inside',// 表盘中比较长的刻度值在内部还是在外部显示
tickLength: that.torem(26),// 表盘中比较长的刻度值的长度
tickColor: '#48c7ff',// 表盘中比较长的刻度值的颜色
tickInterval: 10, // 间隔
lineColor: 'transparent',// 表盘最外层的连接线
labels: {
style: {// 刻度值数字的颜色
color: '#48c7ff',
fontSize: that.torem(28)
// step: 20
},
distance: that.offetY
},
pane: 0, // 第一个面板，第二个面板是1
title: { // 描述文字
text: this.text1,
verticalAlign: 'bottom',
style: {
color: '#fff',
fontSize: that.torem(28)
},
y: that.torem(220) // 离y轴的距离
}
},
{
min: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: that.torem(2),
minorTickLength: that.torem(20),
minorTickPosition: 'inside',
minorTickColor: '#00bfd3',
tickPixelInterval: 30,
tickWidth: that.torem(4),
tickPosition: 'inside',
tickLength: that.torem(26),
tickColor: '#48c7ff',
tickInterval: 10, // 间隔
tickmarkPlacement: 'on',
lineColor: 'transparent',
labels: {
style: {
color: '#48c7ff',
fontSize: that.torem(28)
},
distance: that.offetY
},
pane: 1,
title: {
text: this.text2,
verticalAlign: 'bottom',
style: {
color: '#fff',
fontSize: that.torem(28)
},
y: that.torem(220)
}
}
],
plotOptions: {
gauge: {
dataLabels: {
borderWidth: 0,
enabled: true,
color: '#48c7ff',
fontSize: that.torem(80),
format: `<span>{y}%</span>`
},
dial: {
radius: '80%', // 半径：指针长度
backgroundColor: '#1b4b77', //指针背景色
borderColor: 'black',
borderWidth: that.torem(1),
baseWidth: that.torem(10),
topWidth: that.torem(1),
baseLength: '90%', // of radius
rearLength: '15%' //尾巴长度
},
borderWidth: 0
}
},
series: [
{
data: [80],
yAxis: 0
},
{
data: [70],
yAxis: 1
}
]
};
this.initChart();
},
methods: {
initChart(options) {
this.chart1 = new Highcharts.Chart(this.$refs.chart_gauge, this.options);
var title_AP_cpu = {
text: 'AP平均cpu利用率'
};
var title_AC_cpu = {
text: 'AC平均cpu利用率'
};
var title_AP_RAM = {
text: 'AP平均内存利用率'
};
var title_AC_RAM = {
text: 'AC平均内存利用率'
};
}
}
};
</script>
<style lang="scss">
// .highcharts-container {
// width: 100%;
// height: calc(100% - 30px);
// display: flex;
// & > div {
// flex: 1;
// }
.highcharts-credits {
display: none !important;
}
.highcharts-text-outline {
// 去掉dataLabels的outline
display: none;
}
.redColor {
color: #ff6748;
}
.blueColor {
color: #48c7ff;
}
.greenColor {
color: #13c792;
}
// }
</style>
