在Vue工程中使用Echarts可視化數據往往需要引入Echarts的cdn資源，這是一種很便捷的方式。下面我們來看一下如何在Vue工程中使用Echarts的cdn資源。

首先，在Vue組件中引入Echarts的cdn資源：

<template></template>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<script>
export default {
name: 'EchartsDemo',
props: {
data: {
type: Array,
default: function() {
return []
}
}
},
mounted() {
// 繪制圖表
let chart = echarts.init(document.getElementById('echarts'))
chart.setOption({
title: {
text: 'Echarts Demo'
},
tooltip: {},
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: this.data
}]
})
}
}
</script>

其次，在Vue組件template中引入占位符div，用于顯示Echarts圖標：

<template>
<div id="echarts" :style="{height: '400px'}"></div>
</template>

然后，在Vue組件中給定Echarts的option配置，這里僅展示如何使用Echarts Demo數據，實際情況中需根據具體業(yè)務場景制定配置：

mounted() {
// 繪制圖表
let chart = echarts.init(document.getElementById('echarts'))
chart.setOption({
title: {
text: 'Echarts Demo'
},
tooltip: {},
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: this.data
}]
})
}

最后，在父組件中使用組件，并傳入Demo數據：

<template>
<echarts-demo :data="[5, 20, 36, 10, 10, 20, 5]" />
</template>
<script>
import EchartsDemo from './EchartsDemo.vue'
export default {
name: 'App',
components: {
EchartsDemo
}
}
</script>

這樣，我們就完成了在Vue工程中使用Echarts的cdn資源的配置，從而可以實現對數據的可視化展示。