//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>