echarts-vue是為方便vue開發(fā)者將echarts圖表無縫集成到vue項目中的解決方案。如何優(yōu)雅地在vue項目中使用echarts-vue呢？本文將為你介紹。

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

npm install echarts-vue

安裝完成之后，將echarts-vue導入到你的vue頁面中。

import ECharts from 'echarts-vue';
...
<ECharts :options="options" :theme="theme"></ECharts>

其中，在data中存放你的echarts圖表數(shù)據(jù)，如options和theme。

data() {
return {
options: {
title: { text: 'Vue+Echarts' },
tooltip: {},
legend: { data: ['Line'] },
xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
yAxis: {},
series: [{
name: 'Line',
type: 'line',
data: [5, 20, 36, 10, 10, 20, 10],
itemStyle: { normal: { color: '#79ff82' } }
}]
},
theme: 'light'
}
}

最后，你需要在style中設(shè)置echarts-vue的寬高，以使圖表能夠正確渲染。

style {
.echarts-view {
width: 100%;
height: 300px;
}
}

完整代碼如下：

import ECharts from 'echarts-vue';
...
<template>
<div>
<ECharts :options="options" :theme="theme"></ECharts>
</div>
</template>
<script>
export default {
data() {
return {
options: {
title: { text: 'Vue+Echarts' },
tooltip: {},
legend: { data: ['Line'] },
xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
yAxis: {},
series: [{
name: 'Line',
type: 'line',
data: [5, 20, 36, 10, 10, 20, 10],
itemStyle: { normal: { color: '#79ff82' } }
}]
},
theme: 'light'
}
}
}
</script>
<style scoped>
.echarts-view {
width: 100%;
height: 300px;
}
</style>

通過以上步驟，你就可以在vue項目中使用echarts-vue，輕松構(gòu)建出優(yōu)雅的echarts圖表。