Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

Vue统计图表三维立体3D和旋转效果的优化

//1、安装脚手架
npm install echarts --save

//2、Vue组件代码
<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>
 
<script>
import echarts from 'echarts';
 
export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
	  const chartDom = this.$refs.chart;
	  const myChart = echarts.init(chartDom, null, {
		renderer: 'svg',
	  });
	 
	  const option = {
		tooltip: {
		  trigger: 'axis',
		  axisPointer: {
			type: 'shadow',
		  },
		},
		grid3D: {
		  boxWidth: 150,
		  boxDepth: 80,
		  viewControl: {
			// 3D旋转
			orbitRotation: 45,
		  },
		},
		xAxis3D: {
		  type: 'category',
		  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		  axisLine: {
			show: true,
		  },
		},
		yAxis3D: {
		  type: 'value',
		  axisLine: {
			show: true,
		  },
		},
		zAxis3D: {
		  type: 'value',
		  axisLine: {
			show: true,
		  },
		},
		series: [
		  {
			type: 'bar3D',
			data: [
			  ['Mon', 0, 120],
			  ['Tue', 1, 200],
			  ['Wed', 2, 150],
			  ['Thu', 3, 80],
			  ['Fri', 4, 70],
			  ['Sat', 5, 110],
			  ['Sun', 6, 130],
			],
			shading: 'color',
			label: {
			  show: true,
			  textStyle: {
				color: '#000',
				fontSize: 12,
			  },
			},
			emphasis: {},
		  },
		],
	  };
	 
	  myChart.setOption(option);
	  this.chart = myChart;
	}
  },
};
</script>
 
<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
}
 
.chart {
  width: 100%;
  height: 100%;
}
</style>
点击展开全文

相关文章

  1. PHP如何结合Vue处理大数据集的统计图表
  2. 如何在Vue的框架下快速搭建统计图表?
  3. 如何用Vue实现文本数据的统计图表
  4. 如何使用Vue实现统计图的实时更新
  5. Vue统计图表如何利用vue-browsersync插件实现跨浏览器兼容性