1、安裝

npm install highcharts --save

2、components目錄下新建一個HighchartsComponent.vue元件

<template>
  <div class="x-bar">
    <div :id="id"  :style="setStyle()" :option="option" style="width: 100%"></div>
  </div>
</template>
<
 
script>
  import HighCharts from 'highcharts'
  export default {
    // 驗證型別
    props: {
      height:{
        type:Number,
        default:310
      },
      id: {
        type: String
      },
      option: {
        type: Object
      }
    },
    watch: {
      option (val) {
        console.log
 
('option變化了')
        HighCharts.chart(this.id,this.option);
      },
    },
    mounted() {
      HighCharts.chart(this.id,this.option)
    },
    methods:{
      setStyle(){
        return {
          height: this.height+"px"
        }
      },
      refresh(){
        HighCharts.chart(this
 
.id,this.option)//重新整理圖表
      }
    }
  }
</script>

3、使用

！！注意：動態更新option之後，一定要主動呼叫重新整理圖表的方法

this.$refs[‘barChartx’].refresh()//重新整理統計圖

<x-chart style="padding-right: 60px" 
	v-loading="barLoading" 
	:element-loading-text="barLoadingTxt" 
	id="noise-highcharts-bar-x" 
	ref="barChartx"
	:option="barOption">
</x-chart>

import XChart from '@/components/HighchartsComponent'

components: {XChart}

option僅供參考，請根據專案需求自定義

barOption: {
          chart: {
            type: 'spline',
            marginRight:120
          },
          title: {
            text: ''
          },
          xAxis: {
            crosshair: true,
            title: {
              text: '頻率（Hz）'
            },
          },
          yAxis: {
            title: {
              text: '幅度'
            },
            lineWidth: 1,
            // plotLines: [{
            //   color: 'red',           //線的顏色，定義為紅色
            //   dashStyle: 'dashed',     //預設值，這裡定義為實線
            //   value: 0.9,               //定義在那個值上顯示標示線，這裡是在x軸上刻度為3的值處垂直化一條線
            //   width: 2                //標示線的寬度，2px
            // }]

            // min:0 ,//最小值
            // tickInterval:1, //間隔
            // max:4, //最大值
          },
          tooltip: {
            formatter: function () {
              var s = '<b>幅度：</b>';
              for (let i in this.points) {
                s += '<br/>' + this.points[i].series.name + ': ' +
                    this.points[i].y;
              }
              return s;
            },
            shared: true
          },
          credits: {
            enabled: false//隱藏右下角水印
          },
          legend: {
            enabled: true,
            align: 'right',
            layout: 'vertical',
            verticalAlign: 'top',
            symbolPadding: 10,//圖示和文字的距離
            symbolWidth: 30,//圖示的寬度
            itemMarginBottom: 20,
            padding: 0,
            rtl: true,//圖示文字左右交換
            itemStyle: {
              fontSize: '18px'
            }
          },
          plotOptions: {
            column: {
              pointPadding: 0.2,
              borderWidth: 0,
            },
            series: {
              animation: false,//去除渲染動畫
              turboThreshold: 0//不限制點數
            }
          },
          series: [
            {
              name: '切向',
              data: [],
              // data: [{x: 1, y: 0.9}, {x: 2, y: 2}, {x: 3, y: -1.5}, {x: 4, y: 1.7}, {x: 5, y: -2}],
              color:'#f7a35c',
              marker:{
                // symbol:'circle'
              },
              zones: [{
                // value: 0.9
                value: 50
              }, {
                color: 'red'
              },
              ]
            }, {
              name: '徑向',
              data: [],
              // data: [{x: 1, y: 0.2}, {x: 2, y: -1.7}, {x: 3, y: 2}, {x: 4, y: 0.5}, {x: 5, y: -0.6}],
              marker:{
                // symbol:'circle'
              },
              zones: [{
                // value: 0.9
                value: 50
              }, {
                color: 'red'
              },
              ]
            }, {
              name: '軸向',
              data: [],
              // data: [{x: 1, y: -0.5}, {x: 2, y: 4.8}, {x: 3, y: -3.2}, {x: 4, y: -0.7}, {x: 5, y: 1.3}],
              marker:{
                // symbol:'circle'
              },
              zones: [{
                // value: 0.9
                value: 50
              }, {
                color: 'red'
              },
              ]
            }
          ]
        }