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>