HighCharts使用——vue整合highcharts

引入组件

• 在main.js文件中，代码如下

/**
 * highcharts
 */
import Highchart from "highcharts/highcharts";//基础组件
import HighchartsVue from "highcharts-vue";//vue组件
import highchartsMore from 'highcharts/highcharts-more'//更多图表使用组件，如速度仪
import HCSoldGauge from 'highcharts/modules/solid-gauge';//更多图表使用组件，如仪表盘
import stockInit from "highcharts/modules/stock";//地图使用组件
stockInit(Highchart);
highchartsMore(Highchart);
HCSoldGauge(Highchart);
Highchart.setOptions({ global: { useUTC: false } });
//注册到全局vue
Vue.use(HighchartsVue, {
    highcharts: Highchart
});

 

使用

<template>
    <div>
        <highcharts class="chart_box" canvasId="elec_capacity" :options="options" :style="this.style"></highcharts>
    </div>
</template>