1,安裝echarts
?

npm install --save echarts

2，具體頁面
?

<template><div class="app-container"><div class="aa" id="main" style="width: 500px; height: 400px;"></div></div>
</template>
<script>import * as echarts from 'echarts';export default {data() {return {myChart: null}},created() {},mounted() {// 注意調用順序，先初始化echarts才給echarts賦值this.initEcharts()this.setEchartsOption()},methods: {// 初始化echartsinitEcharts() {var chartDom = document.getElementById('main');// 將創建的echarts示例放到vue的data中，這樣在這個界面就想到于全局配置了this.myChart = echarts.init(chartDom);},// 配置echarts的option，展示數據圖表setEchartsOption() {// 這里可以發送axios請求，然后通過響應的數據賦值給對應的x軸和y軸即可，由于這里沒有于后端聯調，所以簡單請求判斷一下，// 請求后端大概也是這個過程var option;option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisTick: {alignWithLabel: true}}],yAxis: [{type: 'value'}],series: [{name: 'Direct',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220]}]};option && this.myChart.setOption(option);},}
};
</script>
<style lang="scss" scoped>
</style>