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);
}
}
});
示例
作者
FusionCharts
@fusioncharts相关项目