【组件分享】好用的 Vue Component for Highcharts

The component of Vue 2.0 for highcharts

Check the DEMO

Installation

Manual

Just Download dist/vue-highcharts.js and include in your HTML file

<script type="text/javascript" src="path/to/vue-highcharts/dist/vue-highcharts.js"></script>

npm

npm install vue2-highcharts --save

Usage

Using ES6 Module in the component with load async data

<template>
  <vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
  <button @click="load">load</button>
</template>
import VueHighcharts from 'vue-highcharts'
const asyncData = {
  name: 'Tokyo',
  marker: {
    symbol: 'square'
  },
  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
    y: 26.5,
    marker: {
      symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
    }
  }, 23.3, 18.3, 13.9, 9.6]
}
export default{
    components: {
        VueHighcharts
    },
    data(){
      return{
        options: {
          chart: {
            type: 'spline'
          },
          title: {
            text: 'Monthly Average Temperature'
          },
          subtitle: {
            text: 'Source: WorldClimate.com'
          },
          xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          },
          yAxis: {
            title: {
              text: 'Temperature'
            },
            labels: {
              formatter: function () {
                return this.value + '°';
              }
            }
          },
          tooltip: {
            crosshairs: true,
            shared: true
          },
          credits: {
            enabled: false
          },
          plotOptions: {
            spline: {
              marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
              }
            }
          },
          series: []
        };
      }
    },
    methods{
      load(){
          let lineCharts = this.$refs.lineCharts;
          lineCharts.delegateMethod('showLoading', 'Loading...');
          setTimeout(() => {
              lineCharts.addSeries(asyncData);
              lineCharts.hideLoading();
          }, 2000)
      }
    }
}

If you want to use Highstock, Highmaps or any other add-ons, you should pass in the Highcharts object which included the corresponding modules. And pass the Highcharts to the VueHighcharts instance.

// import add-ons and pass in the Highcharts
import Drilldown from '../node_modules/highcharts/modules/Drilldown.js'
import Highcharts from 'highcharts'
Drilldown(Highcharts);

// pass Highcharts to the VueHicharts instance(if you needn't to use other feature modules, you don't have to pass it.)
<vue-highcharts :Highcharts="Highcharts" :options="drilldownOptions" ref="drilldownChart"></vue-highcharts>

See the code for more details

Properties

options the data of Charts

you can get the chart instance by this.$refs.lineCharts. And using the methods of Highchart with delegateMethod()

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

本文对你有帮助？欢迎扫码加入前端学习小组微信群：