安裝 npm install echarts --save
在main.js中，如果報錯建議重裝或者回退版本

import echarts from 'echarts' // 引入echarts Vue.prototype.$echarts = echarts

再你想用的頁面中

<div ref="chart" style="width:100%;height:376px"></div>

在方法中

mounted(){this.getEchartData() },methods: {getEchartData() {const chart = this.$refs.chartif (chart) {const myChart = this.$echarts.init(chart)const option = { tooltip: {},xAxis: {data: ["111111", "222222", "333333", "444444", "555555", "666666", "777777", "888888", "999999", "000000"],axisLabel: {interval: 0,rotate: 40},},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20, 20, 20, 20, 20],type: 'line'}]}myChart.setOption(option)window.addEventListener("resize", function() {myChart.resize()})}this.$on('hook:destroyed',()=>{window.removeEventListener("resize", function() {myChart.resize();});})}}

總結(jié)

以上是生活随笔為你收集整理的vue中安装使用echarts的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。