vue uses highcharts

1. Install highcharts

npm install highcharts --save

2. In main.js

import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);

new View({
  el: '#app',
  router,
  axios,
  components: { App },
  template: '<App/>',
  methods:{
 
    moreChart ()
        var options = this.getMoreOptions(this.type);
 
        if (this.chart) {
            this.chart.destroy();
        };
    // Initialize Highcharts chart
    this.chart = new Highcharts.Chart('highcharts-more', options);
    }
  }
})

3. Create a chart component

<template>
    <div class="chart">
        <div :id="id" :option="option"></div>
    </div>
</template>

< script > 
import HighCharts from ' highcharts ' 
    export default {
         // Verify type 
        props: {
            id: {
                type: String
            },
            option: {
                type: Object
            }
        },
        mounted() {
            HighCharts.chart(this.id, this.option)
        }
    }
</script>

<style scoped>

</style>

4. Other components reference diagram

<Chart :id="id" :option="option"></Chart>
import Chart from "./Chart";
export default {
  name: "HelloWorld",
  components: {
    Chart
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      id: "test",
      option: {
        credits: {
          enabled: false
        },
        chart: {
          type: "line"
        },
        title: {
          text: "Monthly average temperature" //Header text
        },
        subtitle: {
          text: "Data source: WorldClimate.com" //Text under the header
        },
        xAxis: A
          //content displayed on the x-axis
          categories: [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
          ],
          plotbands: [
            {
              // A block can be displayed, and the opacity and color can be changed if needed
              from: 4.5,
              to: 6.5,
              color: "rgba(68,170,213,0)" //transparency and color
            }
          ]
        },

        yAxis: {
          //content displayed on the y-axis
          title: {
            text: "Temperature (°C)"
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              enabled: false // enable data tag
            },
            enableMouseTracking: false // Disable mouse tracking, the corresponding prompt box and click event will be invalid
          }
        },
        series: [
          {
            //two data
            name: "Tokyo",
            data: [
              7.0,
              6.9,
              9.5,
              14.5,
              18.4,
              21.5,
              25.2,
              26.5,
              23.3,
              18.3,
              13.9,
              9.6
            ]
          },
          {
            name: "London",
            data: [
              3.9,
              4.2,
              5.7,
              8.5,
              11.9,
              15.2,
              17.0,
              16.6,
              14.2,
              10.3,
              6.6,
              4.8
            ]
          }
        ]
      }
}
}