如何使用Vue.js和FusionCharts製作2D和3D的柱狀圖

1、 問題背景

       在使用vue.js框架時，可以跟其他的圖形插件結合起來，創建不同類型的圖形。如果在vue.js項目中安裝fusioncharts，然後製作2D和3D的柱狀圖

 

2、圖形組件

Column2D3D.vue

<template>
	<div>
		<el-tabs type="border-card">
			<el-tab-pane label="2D柱狀圖">
				<fusioncharts :type="type2d"
				              :width="width"
							  :height="height"
							  :dataFormat="dataFormat"
							  :dataSource="dataSource">
				</fusioncharts>
			</el-tab-pane>
			<el-tab-pane label="3D柱狀圖">
				<fusioncharts :type="type3d"
				              :width="width"
							  :height="height"
							  :dataFormat="dataFormat"
							  :dataSource="dataSource">
				</fusioncharts>
			</el-tab-pane>
			<el-tab-pane label="計算屬性">
				<div id="datas">
					<p>{{message}}</p>
					<p>{{reverseMsg}}</p>
				</div>
				<div id="names">{{fullname}}</div>
			</el-tab-pane>
			<el-tab-pane label="子組件修改prop">
				<Person></Person>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import Person from './user/Person'
	const dataSource = {
		chart: {
			caption: "字母分類顯示次數",
			xaxisname: "字母",
			yaxisname: "次數",
			theme: "fusion"
		},
		data: [
			{
			  label: "A",
			  value: "59"
			},
			{
			  label: "B",
			  value: "96"
			},
			{
			  label: "C",
			  value: "32"
			},
			{
			  label: "D",
			  value: "14"
			}
		]
	}
	
	export default {
		name: "Column2D3D",
		components:{
			Person
		},
		data() {
			return {
				type2d: "column2d",
				type3d: "column3d",
				width: "1200",
				height: "500",
				dataFormat: "json",
				dataSource,
				message: "歡迎您光臨!",
				firstname: "遊",
				lastname: "海東",
				fullname: "遊海東"
			}
		},
		computed: {
			reverseMsg() {
				return this.message.split('').reverse().join('')
			},
			firstname: function(val){
				this.fullname = val + ' ' + this.lastname
			},
			lastname: function(val){
				this.fullname = this.firstname + ' ' + val
			},
			fullname: function(){
				return this.firstname + ' ' + this.lastname
			}
		},
	}
</script>

<style>
</style>

3、主框架配置

App.vue

<template>
  <div id="app">
	   <Column2D3D></Column2D3D>
	</div>
</template>

<script>
import ColumnChart from './components/Column.vue'
import LineChart from './components/Line.vue'
import PieChart from './components/Pie2D.vue'
import Column2D3D from './components/Column2D3D.vue'
import Tables from './components/user/tables.vue'
import Chart from './components/user/Chart.vue'
import Parent from './components/Parent.vue'
import Date from './components/DateCookie.vue'
import InputVal from './components/InputVal.vue'

export default {
  name: 'app',
  components: {
	ColumnChart,
	LineChart,
	PieChart,
	Column2D3D,
	Tables,
	Chart,
	Parent,
	Date,
	InputVal
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
  height: 100px;
}
</style>

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')

 

查看專欄詳情 立即解鎖全部專欄