Vue和echartsjs是目前非常流行的前端開發框架和數據可視化工具。它們的結合可以讓開發人員快速創建出漂亮且可交互的數據可視化圖表，而且還能通過Vue的雙向數據綁定特性，實現數據的實時更新和渲染。本文將會介紹如何使用Vue和echartsjs創建一個簡單的數據可視化圖表。

首先，我們需要安裝Vue和echartsjs的相關依賴包。可以使用NPM或者Yarn來安裝這些依賴，具體命令如下：

npm install vue --save
npm install echarts --save

然后開始使用Vue和echartsjs來創建圖表。首先，在Vue組件中引入echartsjs庫和初始化代碼，如下所示：

<template>
<div id="chart"></div>
</template>
<script>
import echarts from 'echarts';
export default {
data () {
return {
chart: ''
}
},
mounted () {
this.chart = echarts.init(document.getElementById('chart'));
this.chart.setOption({
// option 配置
});
}
}
</script>

上述代碼中，我們在Vue組件中通過import語句將echarts庫引入進來，并在mounted鉤子中初始化了一個echarts實例，并為該實例設置了一個配置項。接下來，我們需要通過echarts option來配置圖表的樣式和展示數據。

echarts提供了非常豐富的配置項和數據格式。這里我們假設需要創建一張折線圖，以月份和銷售額為橫縱坐標。那么我們需要準備一個類似下面格式的數據：

[{
name: '銷售額',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
}]

然后在option配置項中定義相關的參數，如下所示：

this.chart.setOption({
title: {
text: '月度銷售額統計圖',
subtext: '數據來源：公司銷售部'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['銷售額']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
},
yAxis: {
type: 'value'
},
series: [{
name: '銷售額',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
}]
});

上述代碼中，我們設置了折線圖的標題和數據源，定義了橫軸和縱軸的坐標系類型和顯示范圍，指定了折線的名稱、類型、以及展示的數據。最后，將這些option配置應用到echarts實例就可以完成一個基本的折線圖了。

總之，Vue和echartsjs是兩個非常強大的前端框架和數據可視化工具，它們的結合可以為我們的前端開發工作帶來非常大的便利和效率。我們可以根據實際需求和數據格式，使用更加豐富而靈活的option配置來創建各種數據可視化圖表。