Vue使用highcharts

一：先安装依赖

npm install highcharts-vue

二：在min.js里全局导入配置

import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'

//接下来，您可以将其注册为 Vue 对象中的插件：

Vue.use(HighchartsVue)

三：在页面引入依赖

import Highcharts from "highcharts/highstock";
import loadExporting from "highcharts/modules/exporting";
import exportExcel from "highcharts/modules/export-data.src";
loadExporting(Highcharts);
exportExcel(Highcharts);

四：js片段

 data() {
    return {
      chart: null,
    };
  },

  mounted() {
    this.fangfa();
  },

    fangfa() {
      var n = 5000,
      data = this.getData(n);
      console.time("line");
      Highcharts.chart("container", {
        chart: {
          zoomType: "x",
        },
        boost: {
          useGPUTranslations: true,
        },
        title: {
          text: "Highcharts drawing " + n + " points",
        },
        subtitle: {
          text: "Using the Boost module",
        },
        tooltip: {
          valueDecimals: 2,
        },
         credits: {
          //去掉右下角网址链接
          enabled: false,
        },
        lang: {
          viewFullscreen: "全屏",
          contextButtonTitle: "图表导出菜单",
          downloadJPEG: "下载JPEG图片",
          downloadPDF: "下载PDF文件",
          downloadPNG: "下载PNG文件",
          downloadSVG: "下载SVG文件",
          printChart: "打印图表",
          resetZoom: "恢复缩放",
          resetZoomTitle: "恢复图表",
        },
        series: [
          {
            data: data,
            lineWidth: 0.5,
          },
        ],
      });
      console.timeEnd("line");
    },

五：HTML片段

 <div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>