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

淩亂°似流年 2023-06-26 03:22 10阅读 0赞

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