在Vue中添加圖表為常見的需求。Vue提供了多種方式來添加圖表，其中一種是使用第三方開源圖表庫。Vue與常用的圖表庫如ECharts、Highcharts等都有良好的兼容性。以下將具體介紹添加ECharts圖表的步驟。

首先，在Vue項目中安裝echarts依賴：打開命令行工具，進入項目目錄，運行以下命令：

npm install echarts --save

安裝成功后，我們可以創(chuàng)建一個ECharts組件，將圖表顯示在Vue頁面上。在項目的src目錄下創(chuàng)建一個名為ECharts.vue的文件，并編寫如下代碼：

<template>
<div class="echarts"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'ECharts',
data () {
return {
chart: null
}
},
mounted () { // 頁面渲染完成后，進行圖表初始化
this.initChart()
},
methods: {
initChart () {
let dom = this.$el.querySelector('.echarts')
this.chart = echarts.init(dom)
let option = { // 圖表的配置項
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 16]
}]
}
this.chart.setOption(option) // 將配置項傳入圖表對象
}
}
}
</script>
<style scoped>
.echarts {
width: 100%;
height: 400px;
}
</style>

以上代碼中，我們創(chuàng)建一個名為ECharts的組件，并引入echarts庫。在ECharts組件中，通過mounted鉤子函數(shù)在頁面渲染完成后進行初始化操作，將配置項傳入圖表對象并顯示在頁面上。

完成以上步驟后，我們可以在Vue頁面中引入ECharts組件，并進行使用。以App.vue為例：

<template>
<div id="app">
<ECharts />
</div>
</template>
<script>
import ECharts from './components/ECharts.vue' // 引入ECharts組件
export default {
name: 'App',
components: {
ECharts // 注冊組件
}
}
</script>

最后，運行Vue項目，就可以看到圖表已經(jīng)成功添加到頁面中。