原生html引入axios及echarts

一支鱼茄

已于 2023-01-13 17:00:10 修改

阅读量2.2k

点赞数 2

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

于 2023-01-13 16:57:09 首次发布

本文链接：https://blog.csdn.net/qq_68575975/article/details/128676155

版权

前端同时被 2 个专栏收录

17 篇文章 5 订阅

订阅专栏

后端

3 篇文章 0 订阅

订阅专栏

突发奇想：你写个报表总不能直接建个vue项目去弄吧，直接一个html就搞定了

echarts官网： Examples - Apache ECharts

1.引入axios

CDN引入axios:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <script>
        window.onload=()=>{
            axios({
                method:'get',
                url:'http://localhost:9000/Os'
            }).then(res=>{
                console.log(res.data)
            })
        }
    </script>
</body>
</html>

2.引入echarts

    <script crossorigin="anonymous" integrity="sha512-RuUMLxuB8daxj+iqjuwA7u2lFFFQNlbnFnerb0FPhfZ761E0Wn6wD4f5vZskYgbxu+wSu36vfFHCUDaKaHHhUQ==" src="http://lib.baomitu.com/echarts/5.0.2/echarts.common.js"></script>

3.axios联合echarts使用

接口是自己写的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script crossorigin="anonymous" integrity="sha512-RuUMLxuB8daxj+iqjuwA7u2lFFFQNlbnFnerb0FPhfZ761E0Wn6wD4f5vZskYgbxu+wSu36vfFHCUDaKaHHhUQ==" src="http://lib.baomitu.com/echarts/5.0.2/echarts.common.js"></script>
</head>
<body>
    <script>
            let xdata = []
            let total=0
            axios
            ({
                method: 'get',
                url: 'http://localhost:9000/Pg'
            }).then(res => {
                res.data.forEach(item => {
                    xdata.push({name:item.year+'',value:item.count})
                    total+=item.count
                })
                xdata.forEach(item=>{
                    item.value = Math.round((item.value/total)*100*100)/100
                })
                const OsE1 = echarts.init(document.getElementById('Ppv'), 'dark', {renderer: "svg"});
                OsE1.setOption({
                    title: {
                        text: '人口增长占比表',
                        left: 'center',
                        top:'4',
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: '20',
                        top:'30'
                    },
                    series: [
                        {
                            name: '人口增长占比',
                            type: 'pie',
                            radius: '65%',
                            center:['65%','55%'],
                            data:xdata,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            })
    </script>
    <div id="Ppv">

    </div>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        #Ppv{
            width: 400px;
            height: 300px;
        }
    </style>
</body>
</html>