如何使用Vue.js和FusionCharts制作2D和3D的柱状图

1、 问题背景

       在使用vue.js框架时,可以跟其他的图形插件结合起来,创建不同类型的图形。如果在vue.js项目中安装fusioncharts,然后制作2D和3D的柱状图

 

2、图形组件

Column2D3D.vue






3、主框架配置

App.vue






4、对应JavaScript配置

main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import VueFusionCharts from 'vue-fusioncharts'
import FusionCharts from 'fusioncharts/core'
import Line2D from 'fusioncharts/viz/line'
import Column2D from 'fusioncharts/viz/column2d'
import Column3D from 'fusioncharts/viz/column3d'
import Pie2D from 'fusioncharts/viz/pie2d'
import Theme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'
import Cookies from 'js-cookie'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(VueFusionCharts,FusionCharts,Line2D,Column2D,Column3D,Pie2D,Theme)

new Vue({
  render: h => h(App),
}).$mount('#app')

 

你可能感兴趣的:(Vue知识大全)