<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div id="main" style="width: 600px;height:400px; border: 1px solid black;"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: []
},
created() {
this.redom()
},
methods: {
// 初始化
async redom() {
// 请求数据
const res = await axios({
url: 'https://applet-base-api-t.itheima.net/bill',
params: {
creator: '小明'
}
})
this.list = res.data.data
// 初始化饼图
this.mycharts = echarts.init(document.querySelector('#main'))
this.mycharts.setOption({
// 大标题
title: {
text: '消费账单列表',
left: 'center'
},
// 提示框
tooltip: {
trigger: 'item'
},
// 图例
legend: {
orient: 'vertical',
left: 'left'
},
// 数据项
series: [
{
name: '消费账单',
type: 'pie',
radius: '50%', // 半径
data: this.list.map(item => ({ value: item.price, name: item.name })),
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
}
},
})
</script>
</body>
</html>
data为数组对象