# vue-highcharts **Repository Path**: over58/vue-highcharts ## Basic Information - **Project Name**: vue-highcharts - **Description**: No description available - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2020-03-20 - **Last Updated**: 2024-10-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # highcharts-vue-xyc 模仿官方 Highcharts wrapper for Vue framework ## Table of Contents - [highcharts-vue-xyc](#highcharts-vue-xyc) - [Table of Contents](#table-of-contents) - [Getting started](#getting-started) - [Requirements](#requirements) - [Installation](#installation) - [Using](#using) - [Registering globally as a plugin](#registering-globally-as-a-plugin) - [Registering locally in your component](#registering-locally-in-your-component) - [Configure](#configure) - [Options parameter](#options-parameter) - [Importing Highcharts modules](#importing-highcharts-modules) - [Implementing stockChart and mapChart](#implementing-stockchart-and-mapchart) - [Loading maps](#loading-maps) - [Changing global component tag name](#changing-global-component-tag-name) - [Chart callback parameter](#chart-callback-parameter) - [Chart object reference](#chart-object-reference) - [Using Highcharts `setOptions()` method](#using-highcharts-setoptions-method) - [Demo app](#demo-app) - [Component Properties](#component-properties) - [Useful links](#useful-links) ## Getting started ### Requirements - **Node.JS**, **NPM** installed globally in your OS - **Vue**, **Highcharts** libraries (updated) installed in your project ### Installation Install `highcharts-vue-xyc` package by: ```cli npm install highcharts-vue-xyc ``` ### Using There are two ways of adding highcharts-vue-xyc wrapper to your project: #### Registering globally as a plugin The way described below is recommended when wanted to make a wrapper component available from everywhere in your app. In your main app file should have Vue and highcharts-vue-xyc packages imported: ```js import Vue from 'vue' import HighchartsVue from 'highcharts-vue-xyc' ``` Next, you can register it as a plugin in your Vue object: ```js Vue.use(HighchartsVue) ``` #### Registering locally in your component This option is recommended for direct use in specific components of your app. First, you should import the Chart component object from highcharts-vue-xyc package in your component file: ```js import {Chart} from 'highcharts-vue-xyc' ``` Then, you've to register it in your Vue instance configuration, namely in `components` section: ```js { components: { highcharts: Chart } } ``` *NOTE:* *If you would like to use highcharts-vue-xyc wrapper by attaching it using `