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>

最后

以上就是自信豆芽为你收集整理的Vue使用highcharts的全部内容，希望文章能够帮你解决Vue使用highcharts所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。