<template>
    <div>
        <div id="highCharts" style="width: 300px; height: 200px;"></div>
    </div>
</template>

<script>
    import Highcharts from 'highcharts'
    import SolidGauge from 'highcharts/modules/solid-gauge.js'
    SolidGauge(Highcharts)
    
    export default {
        mounted(){
           this.init();
        },
        data(){
            return {
            
            }    
        },
        methods:{
            init(){
                this.draw();
            },
            draw(){
                new Highcharts.chart('highCharts', {
                    chart: {
                        type: 'solidgauge'
                    },
                    title: null,
                    pane: {
                            center: ['50%', '85%'],
                            size: '140%',
                            startAngle: -90,
                            endAngle: 90,
                            background: {
                                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                                    innerRadius: '60%',
                                    outerRadius: '100%',
                                    shape: 'arc'
                            }
                    },
                    tooltip: {
                            enabled: false
                    },
                    yAxis: {
                            min: 0,
                            max: 200,
                            title: {
                                    text: '速度'
                            },
                            stops: [
                                    [0.1, '#55BF3B'], // green
                                    [0.5, '#DDDF0D'], // yellow
                                    [0.9, '#DF5353'] // red
                            ],
                            lineWidth: 0,
                            minorTickInterval: null,
                            tickPixelInterval: 400,
                            tickWidth: 0,
                            title: {
                                    y: -70
                            },
                            labels: {
                                    y: 16
                            }
                    },
                    plotOptions: {
                        solidgauge: {
                            dataLabels: {
                                y: 5,
                                borderWidth: 0,
                                useHTML: true
                            }
                        }
                    },
                    credits: {
                            enabled: false
                    },
                    series: [{
                        name: '速度',
                        data: [80],
                        dataLabels: {
                                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                                '<span style="font-size:12px;color:silver">km/h</span></div>'
                        },
                        tooltip: {
                                valueSuffix: ' km/h'
                        }
                    }]
                });
            }
        }
    }

</script>