1,安裝echarts
?

npm install echarts

2，具體頁面

<template><view class="container notice-list"><view><view class="aa" id="main" style="width: 500px; height: 400px;"></view></view></view>
</template><script>import * as echarts from 'echarts';export default {data() {return {myChart: null}},onShow() {},onLoad() {},onReady(){// 注意調用順序，先初始化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"></style>