type is gauge, which keeps reporting errors and works well in Highcharts dome.

dome:

var chart = Highcharts.chart("container",{

}, function (chart) {

});

Development Code:

< template >
< section style= "width: 100% Landscape: 100%;" >

<vue-highcharts :options="options" :highcharts="Highcharts" ref="lineCharts"></vue-highcharts>

< / section >
< / template >
< script >
import VueHighcharts from "vue2-highcharts";
import Highcharts from "highcharts";
import HighchartsNoData from "highcharts-no-data-to-display";

HighchartsNoData (Highcharts);
/ / this must be introduced or an error will be reported
/ * import HighchartsMore from "highcharts/highcharts-more";
import SolidGauge from "highcharts/modules/solid-gauge.js";
HighchartsMore (Highcharts);
SolidGauge (Highcharts); * /

export default {

name: "ChartsPlanTaskQuantity",
methods: {
  highChartsLoad() {

    /*setTimeout(() => {
      //lineCharts.addSeries(asyncData);
      lineCharts.hideLoading();
    }, 2000);*/
  },
  setType(type) {
    this.options.chart.type = type;
  }
},
created() {
  //
  //this.options.series =
},
mounted() {
  //
  this.highChartsLoad();
},
watch: {
  "seriesList": function (newVal, oldVal) {
    const lineCharts = this.$refs.lineCharts;
    lineCharts.getChart().update({series: this.seriesList});
  }
},
props: {
  seriesList: {
    type: Array,
    default: () => [0]
  },
  seriesName: {
    type: String,
    default: () => ""
  },
  chartType: {
    type: String,
    default: () => "gauge"
  },
  subtitle: {
    type: String,
    default: () => null
  },
  yTitle: {
    type: String,
    default: () => null
  },
  title: {
    type: String,
    default: () => null
  },
  titleSize: {
    type: String,
    default: () => "28px"
  },
  height: {
    type: String,
    default: () => "300px"
  },
  yTickInterval: {
    type: Number,
    default: () => 10000
  }
},
components: {VueHighcharts},
data() {
  return {
    Highcharts,
    options: {
      chart: {
        alignTicks: false,
        type: this.chartType,
        height: this.height,
        backgroundColor: "rgba(0, 0, 0, 0)",
        plotShadow: false
      },
      lang: {
        noData: "..." //
      },
      noData: {
        style: {
          color: "red",
          fontSize: "20px"
        }
      },
      title: {
        text: this.title,
        style: {
          textShadow: "1px 1px 10px rgba(0, 255, 255, 1)",
          color: "-sharpFFFFFF",
          fontWeight: 700,
          fontSize: this.titleSize
        }
      },
      subtitle: {
        text: this.subtitle
      },
      pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
          backgroundColor: {
            stops: [
              [0, "-sharpFFF"],
              [1, "-sharp333"]
            ]
          },
          borderWidth: 0,
          outerRadius: "112%"
        }, {
          backgroundColor: {
            stops: [
              [0, "-sharp333"],
              [1, "-sharpFFF"]
            ]
          },
          borderWidth: 1,
          outerRadius: "110%"
        }, {
          // default background
        }, {
          backgroundColor: "-sharpDDD",
          borderWidth: 0,
          outerRadius: "105%",
          innerRadius: "103%"
        }]
      },
      yAxis: {
        min: 0,
        max: 10000,
        minorTickInterval: "auto",
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: "inside",
        minorTickColor: "-sharp666",
        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: "inside",
        tickLength: 15,
        tickColor: "-sharp666",
        labels: {
          step: 2,
          rotation: "auto",
          formatter: function () {
            //console.log("y:",this);
            if (this.value > 999) {
              return (this.value / 1000) + "k";
            }
            return this.value;
          },
          style: {
            color: "red",
            fontSize: "10px",
            fontWeight: 700
          }
        },
        title: {
          text: this.yTitle,
          y: 100,
          style: {
            color: "red"
          }
        },
        plotBands: [{
          from: 0,
          to: 1000,
          color: "-sharp55BF3B" // green
        }, {
          from: 1000,
          to: 5000,
          color: "-sharpDDDF0D" // yellow
        }, {
          from: 5000,
          to: 10000,
          color: "-sharpDF5353" // red
        }]
      },
      credits: {
        enabled: false
      },

      plotOptions: {
        gauge: {
          dial: {
            backgroundColor: "red", //
            radius: "76%", // :
            rearLength: "20%", //
            baseWidth: 8
          }
        }
      },

      /**/
      tooltip: {
        backgroundColor: "-sharp0000009c",
        borderWidth: 0,
        shared: true,
        useHTML: true,
        pointFormatter: function () {
          //console.log("series:",this);
          let thisValue = this.y;
          if (thisValue > 999) {
            thisValue = ((thisValue / 1000).toFixed(2)) + "k";
          }
          return "<span><label style="color: -sharpFFFFFF">:</label><label style="color:" + this.color + "">" + thisValue + "</label></span>";
        }
      },
      series: [{
        name: this.seriesName,
        data: this.seriesList,
        dataLabels: {
          formatter: function () {
            let thisValue = this.y;
            if (thisValue > 999) {
              thisValue = ((thisValue / 1000).toFixed(2)) + "k";
            }
            return "<span style="font-size:10px;color: red">" + thisValue + "</span>";
          },
          useHTML: true,
          y: 65,
          style: {
            fontSize: "14px"
          }
        }
      }]
    }
  };
}

};

< / script >
< style scoped lang= "scss" >

< / style >