highcharts在vue中的应用

1、安装命令

npm  install highcharts  --save

2、在页面中按需引入

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);

3、初始化图表

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: [{
            startAngle: -100,
            endAngle: 100,
            background: null,
            center: ['25%', '65%'],
            size: '80%'
        }, {
            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: 30,
            tickWidth: that.torem(4),
            tickPosition: 'inside',
            tickLength: that.torem(26),
            tickColor: '#48c7ff',
            tickInterval: 10,
            // 间隔
            // tickmarkPlacement: 'on',
            // labels: {
            //     // step: 20,
            //     rotation: 'auto',
            //     minRange: 10,
            //     padding: 200
            // },
            lineColor: 'transparent',
            labels: {
                style: {
                    color: '#48c7ff',
                    fontSize: that.torem(28),
                    html: ` < span > < /span>`
                            / / step: 20
                },
                distance: that.offetY
            },
            // plotBands: [
            //     {
            //         from: 0,
            //         to: 6,
            //         color: '#C02316',
            //         innerRadius: '100%',
            //         outerRadius: '105%'
            //     }
            // ],
            pane: 0,
            title: {
                text: this.text1,
                verticalAlign: 'bottom',
                style: {
                    color: '#fff',
                    fontSize: that.torem(28)
                },
                y: that.torem(220)
            }
        }, {
            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
            },
            // plotBands: [
            //     {
            //         from: 0,
            //         to: 6,
            //         color: '#C02316',
            //         innerRadius: '100%',
            //         outerRadius: '102%'
            //     }
            // ],
            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 style="color:({y} > 20 ? '#48c7ff' : {y} > 80 ? '#ff6748' : '#13c792');font-size:${that.torem(80)}px">{y}%</span>`,
                    format: ` < span > {
                        y
                    } % < /span>`
                        / / formatter() {
                        //     console.log('<span style="color:red">' + this.point.y + '%</span>')
                        //     // '<span style="color:'+(this.point.y > 20 ? '#48c7ff' : this.point.y > 80 ? '#ff6748' : '#13c792')+'">' + this.point.y + '%</span>'
                        //     '<span style="color:red">' + this.point.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平均内存利用率'
            };
        }
    }