Vue FusionCharts轻量级组件 - vue-fusioncharts

Vue FusionCharts轻量级组件 - vue-fusioncharts
插件名称 vue-fusioncharts
发布时间 2021年5月3日
插件作者 fusioncharts

用于FusionCharts JavaScript图表库的简单轻巧的VueJS组件。Vue-FusionCharts包装器可让您轻松地将FusionCharts包含在VueJS项目中。

入门

要求

  • 在您的操作系统中全局安装了Node.jsNPM / Yarn
  • 在您的项目中安装了FusionChartsVue,如下所示:

安装

直接下载
所有二进制文件都位于我们的github存储库中

从NPM安装

npm install vue-fusioncharts --save

从yarn安装

yarn add vue-fusioncharts

包含在脚本中

下载vue-fusioncharts.js并将其包含在HTML<script>标记中。

<script src="vue-fusioncharts.js" type="text/javascript"></script>

用法

有两种vue-fusioncharts在项目中添加组件的方法

在全球范围注册为插件
导入vuevue-fusioncharts并在主要的应用程序文件FusionCharts的。

import Vue from `vue`;
import VueFusionCharts from 'vue-fusioncharts';

// import FusionCharts modules and resolve dependency
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

现在,将其注册为Vue对象中的插件

Vue.use(VueFusionCharts, FusionCharts, Charts);

如果您希望组件(vue-fusioncharts)在应用程序中的任何地方都可用,则建议使用这种方法。

在组件中本地注册
vue-fusioncharts/component包中的组件文件中导入图表组件,并用于Vue.component在本地注册。

import Vue from `vue`;
import VueFusionChartsComponent from 'vue-fusioncharts/component';

// import FusionCharts modules and resolve dependency
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

const vueFusionCharts = VueFusionChartsComponent(FusionCharts, Charts);

Vue.component('fusioncharts', vueFusionCharts);

如果vue-fusioncharts只希望在应用程序的特定组件中使用组件(),则建议使用这种方法。

单击此处查看实时示例。

哪里eventName可以有任何Fusioncharts事件。您可以在Fusioncharts devcenter中找到事件列表

使用API

要调用API,我们将需要图表对象。要从组件中获取图表对象,我们可以使用ref并从中检索它this.$refs[refname].chartObj

<fusioncharts
  :type="type"
  :width="width"
  :height="height"
  :dataFormat="dataFormat"
  :dataSource="dataSource"
  @dataPlotRollover="onDataPlotRollover"
  ref="fc"
>
</fusioncharts>

现在,我们可以从 this.$refs.fc.chartObj

var app = new Vue({
  el: '#chart',
  data: {
    type: 'Pie2D',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: myDataSource
  },
  methods: {
    onDataPlotRollover: function(e) {
      this.$refs.fc.chartObj.slicePlotItem(0);
    }
  }
});

当您将鼠标悬停在图表上时,此示例将对Pie2d部分进行切片。

处理事件

要将事件侦听器附加到FusionCharts,可以在vue-fusioncharts组件中使用v-on@运算符。

<fusioncharts
  :type="type"
  :width="width"
  :height="height"
  :dataFormat="dataFormat"
  :dataSource="dataSource"
  @eventName="eventHandler"
>
</fusioncharts>

快速开始

这是一个基本示例,显示了如何使用来创建图表vue-fusioncharts

import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts, Charts);

const myDataSource = {
  chart: {
    caption: 'Recommended Portfolio Split',
    subCaption: 'For a net-worth of $1M',
    showValues: '1',
    showPercentInTooltip: '0',
    numberPrefix: '$',
    enableMultiSlicing: '1',
    theme: 'fusion'
  },
  data: [
    {
      label: 'Equity',
      value: '300000'
    },
    {
      label: 'Debt',
      value: '230000'
    },
    {
      label: 'Bullion',
      value: '180000'
    },
    {
      label: 'Real-estate',
      value: '270000'
    },
    {
      label: 'Insurance',
      value: '20000'
    }
  ]
};

const chart = new Vue({
  el: '#app',
  data: {
    type: 'column2d',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: myDataSource
  }
});

这是上述示例的HTML模板:

<div id="app">
  <fusioncharts
    :type="type"
    :width="width"
    :height="height"
    :dataFormat="dataFormat"
    :dataSource="dataSource"
  >
  </fusioncharts>
</div>