Echarts基本使用

需要axios,echarts

<template>
<div class='home'>
<div id='myChart' :style="{width: '100%', height: '600px'}"></div>
</div>
</template>

<script>
export default {
name: 'Home',
components: {},
data () {
return {}
},
mounted () {
this.go()
},
methods: {
go () {
// 基于准备好的dom，初始化echarts实例
const myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {},
tooltip: {},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '数量',
type: 'bar',
data: []
}]
})
myChart.showLoading()
this.$axios({
method: 'get',
url: 'http://192.168.18.200:8080/data'
}).then(res => {
const { result } = res.data
const x = []
const y = []
delete result.all
for (const key in result) {
x.push(key)
y.push(result[key])
}
myChart.hideLoading()
myChart.setOption({
title: { text: '各大网站访问数量' },
tooltip: {},
xAxis: {
name: '网站',
data: [...x]
},
yAxis: {
name: '数量'
},
series: [{
type: 'bar',
data: [...y]
}]
})
})
}
}
}
</script>