Vue highCharts gauge(仪表盘) 一直报类型不存在!

Question

类型为gauge一直报错,在Highcharts dome里面也能正常运行。

dome代码：

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

chart: {
    alignTicks: false,
    type: "gauge",
    height: "300px",
    backgroundColor: "rgba(0, 0, 0, 0)",
    plotShadow: false
},
title: {
    text: '实时生产'
},
pane: {
    startAngle: -150,
    endAngle: 150,
    background: [{
        backgroundColor: {
            stops: [
                [0, "#FFF"],
                [1, "#333"]
            ]
        },
        borderWidth: 0,
        outerRadius: "112%"
    }, {
        backgroundColor: {
            stops: [
                [0, "#333"],
                [1, "#FFF"]
            ]
        },
        borderWidth: 1,
        outerRadius: "110%"
    }, {
        // default background
    }, {
        backgroundColor: "#DDD",
        borderWidth: 0,
        outerRadius: "105%",
        innerRadius: "103%"
    }]
},
// the value axis
yAxis: {
    min: 0,
    max: 10000,
    minorTickInterval: "auto",
    minorTickWidth: 1,
    minorTickLength: 10,
    minorTickPosition: "inside",
    minorTickColor: "#666",
    tickPixelInterval: 30,
    tickWidth: 2,
    tickPosition: "inside",
    tickLength: 15,
    tickColor: "#666",
    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: "#55BF3B" // green
    }, {
        from: 1000,
        to: 5000,
        color: "#DDDF0D" // yellow
    }, {
        from: 5000,
        to: 10000,
        color: "#DF5353" // red
    }]
},
credits: {
    enabled: false
},
plotOptions:{
    gauge:{
        dial : {
            backgroundColor: 'red',//指针背景色
            radius : '76%',// 半径：指针长度
            rearLength:'20%',//尾巴长度
            baseWidth:8
        }
    }
},
tooltip: {
    backgroundColor: "#0000009c",
    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: #FFFFFF'>实时生产速度:</label><label style='color:" + this.color + "'>" + thisValue + "</label></span>";
    }
},
series: [{
    name: 'Speed',
    data: [800],
    dataLabels:{
        formatter:function(){
            var 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"
        }
    }
}]

}, function (chart) {

if (!chart.renderer.forExport) {
    setInterval(function () {
        var point = chart.series[0].points[0],
            newVal,
            inc = Math.round((Math.random() - 0.5) * 2000);
        newVal = point.y + inc;
        if (newVal < 0 || newVal > 100000) {
            newVal = point.y - inc;
        }
        point.update(newVal);
    }, 3000);
}

});

开发代码：

<template>
<section style="width: 100%;height: 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);
// 这个一定要引入 不然报错
/*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: "#FFFFFF",
          fontWeight: 700,
          fontSize: this.titleSize
        }
      },
      subtitle: {
        text: this.subtitle
      },
      pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
          backgroundColor: {
            stops: [
              [0, "#FFF"],
              [1, "#333"]
            ]
          },
          borderWidth: 0,
          outerRadius: "112%"
        }, {
          backgroundColor: {
            stops: [
              [0, "#333"],
              [1, "#FFF"]
            ]
          },
          borderWidth: 1,
          outerRadius: "110%"
        }, {
          // default background
        }, {
          backgroundColor: "#DDD",
          borderWidth: 0,
          outerRadius: "105%",
          innerRadius: "103%"
        }]
      },
      yAxis: {
        min: 0,
        max: 10000,
        minorTickInterval: "auto",
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: "inside",
        minorTickColor: "#666",
        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: "inside",
        tickLength: 15,
        tickColor: "#666",
        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: "#55BF3B" // green
        }, {
          from: 1000,
          to: 5000,
          color: "#DDDF0D" // yellow
        }, {
          from: 5000,
          to: 10000,
          color: "#DF5353" // red
        }]
      },
      credits: {
        enabled: false
      },

      plotOptions: {
        gauge: {
          dial: {
            backgroundColor: "red", //指针背景色
            radius: "76%", // 半径：指针长度
            rearLength: "20%", //尾巴长度
            baseWidth: 8
          }
        }
      },

      /*数据提示框*/
      tooltip: {
        backgroundColor: "#0000009c",
        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: #FFFFFF'>实时生产速度:</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>