Echarts的基本使用

Bunury

于 2024-05-25 18:02:57 发布

阅读量120

点赞数 3

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_49352307/article/details/139201120

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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为数组对象