axios+echarts

axios+echarts

1.axios+echarts案例1
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios+echarts 1</title>
    <script src="./js/vue.global.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/echarts.js"></script>
</head>

<body>

    <div id="app" style="width: 600px;height: 400px;"></div>

    <script>

        axios.get("./json/data1.json").then(x => {
            var goods = x.data.goods
            var sales_num = x.data.sales_num
            console.log(sales_num)

            //初始化echarts,指定图显示在哪个容器上
            var myChart = echarts.init(document.getElementById("app"))

            //图表配置
            var option = {
                title: {
                    text: "标题"
                }
                //提示信息配置
                , tooltip: {}
                //图例配置
                , legend: {}
                //x轴
                , xAxis: {
                    data: goods
                }
                //y轴,一般不指定y轴的数据,y轴会随着数据的改变而改变
                , yAxis: {}
                //具体数据
                , series: [
                    //第一组数据
                    {
                        name: '销量',  //系列名称
                        type: 'bar',  //系列图表类型,bar柱状图,line折线图,pie饼图,gauge仪表盘
                        data: sales_num //系列中的数据内容
                    }
                ]
            }
            //将图配置显示到容器中
            myChart.setOption(option)

        })
    </script>
</body>

</html>
2.axios+echarts案例2
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.global.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/echarts.js"></script>
</head>

<body>

    <div id="app" style="width: 600px;height: 400px;"></div>

    <script>

        axios.get("./json/data1.json").then(x => {
            //横轴数据,具体是否是goods需要看返回的数据
            var goods = x.data.goods
            //显示数据,具体是否是ales_num需要看返回的数据
            var sales_num = x.data.sales_num
            // console.log(sales_num)
            //调用自定义的方法
            draw(goods,sales_num)

        })
        //将图表显示写成方法,传入两个参数,x表示横轴显示内容,y表示数据内容
        function draw(x,y){
            //初始化echarts,指定图显示在哪个容器上
            var myChart = echarts.init(document.getElementById("app"))

            //图基本配置
            var option = {
                title: {
                    text: "标题"
                },
                tooltip: {}
                , legend: {}
                //x轴
                , xAxis: {
                    data: x
                }
                //y轴,一般不指定y轴的数据,y轴会随着数据的改变而改变
                , yAxis: {}
                //具体数据
                , series: [
                    //第一组数据
                    {
                        name: '销量',  //系列名称
                        type: 'bar',  //系列图表类型,bar柱状图,line折线图,pie饼图,gauge仪表盘
                        data: y //系列中的数据内容
                    }
                ]
            }
            //将图配置显示到容器中
            myChart.setOption(option)
        }
    </script>
</body>

</html>
相关推荐
~无忧花开~7 分钟前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
程序猿小D14 分钟前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
吴鹰飞侠22 分钟前
AJAX的学习
前端·学习·ajax
JNU freshman28 分钟前
vue 技巧与易错
前端·javascript·vue.js
落一落,掉一掉36 分钟前
第十二周 waf绕过和前端加密绕过
前端
Asort36 分钟前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
Coffeeee1 小时前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼1 小时前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript
LRH1 小时前
时间切片 + 双工作循环 + 优先级模型:React 的并发任务管理策略
前端·react.js