Vue FusionCharts
made with Vuejs

Vue FusionCharts是一个交互式和响应式图表库，是FusionCharts JavaScript的官方Vue实现，简单轻巧。

无论您是构建具有简单还是复杂数据的PC或移动仪表板，都可以使用FusionCharts。Vue FusionCharts覆盖了100+交互式图表和2,000+数据驱动的地图。

通过vue-fusioncharts，用户可以轻松地在Vue应用程序或项目中添加JavaScript图表。

特点

• 使用一个组件添加图表。
• 修改数据源后自动更新图表对象。
• 从JSON URL、XML URL或使用Props Array Binding添加图表。
• 允许包括JavaScript图表之间的交互性。
• 通过允许您访问完整的FusionCharts对象（包含图表配置）来提供高级控制。

安装

Npm

npm i vue-fusioncharts

Yarn

yarn add vue-fusioncharts

浏览器

使用

引入 import Vue from vue; import VueFusionCharts from 'vue-fusioncharts';

// 引入FusionCharts 模块解决依赖
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

全局注册插件

Vue.use(VueFusionCharts, FusionCharts, Charts);

或者注册为组件

const vueFusionCharts = VueFusionChartsComponent(FusionCharts, Charts);

Vue.component('fusioncharts', vueFusionCharts);

使用

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

...

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);
    }
  }
});

示例