Echarts是一款開源的可視化圖表庫，而矩形圖則是其中一種常用的圖表類型。通過Echarts與Vue結合，可以實現矩形圖的開發與展示。在Vue中，我們可以使用Echarts提供的vue-echarts插件方便地進行矩形圖的開發。

首先，在Vue項目中安裝vue-echarts插件。

npm install vue-echarts echarts --save

在組件中引入v-chart標簽，然后在mounted生命周期內，定義圖表參數options，并通過props屬性將數據傳遞給圖表生成。

<template>
<div>
<v-chart :options="chartData" :autoresize="true"></v-chart>
</div>
</template>
<script>
import {Chart} from 'vue-echarts';
export default {
components: {vChart: Chart},
props: {
data: {
type: Array,
default: []
}
},
mounted() {
const {data} = this;
const chartData = this.getChartData(data);
this.chartData = chartData;
},
methods: {
getChartData(data) {
const xAxisData = [];
const seriesData1 = [];
const seriesData2 = [];
data.forEach(item =>{
xAxisData.push(item.name);
seriesData1.push(item.value1);
seriesData2.push(item.value2);
});
return {
title: {text: '矩形圖'},
tooltip: {},
legend: {data: ['數據1', '數據2']},
xAxis: {data: xAxisData},
yAxis: {},
series: [
{
name: '數據1',
type: 'bar',
stack: '總量',
data: seriesData1
},
{
name: '數據2',
type: 'bar',
stack: '總量',
data: seriesData2
}
]
};
}
}
};
</script>

在數據傳遞的過程中，我們可以通過props屬性傳遞組件內的data屬性，然后通過methods方法內的getChartData方法，處理數據并生成options圖表參數。在options參數中，我們定義了矩形圖的標題、提示框、圖例、橫軸和縱軸、以及數據系列。其中，數據系列部分定義了數據的標簽名、類型、堆疊方式和數據列表。

通過vue-echarts插件可以方便地生成矩形圖，并傳遞數據和樣式屬性實現不同的展示效果。