Vue FusionCharts
made with Vuejs

Vue FusionCharts

这是一个交互式和响应式图表库。

相关问答
暂无相关问题
查看全部
简介及使用教程

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

示例

image.png

作者

FusionCharts

@fusioncharts

相关项目

这是ApexCharts的Vue.js组件。
这是图标库Morris.js的Vue.js包装器。
这是一个基于Vue.js的简单趋势图。
这是一个Gantt图表组件。
这是一个Vue.js的官方Highcharts包装器。
这是一个SVG漏斗图库。
这是一个 Vue 对于 Chart.js 的封装。