前端ajax引进echarts图标数据

第一步步骤：引入脚本引入echarts.js(到官网下载https://echarts.baidu.com/dist/echarts.min.js)

第二步骤ajax请求：请求代码如下：

var  weeks = [], money = [], nopay = [], off = []
  
myChart.showLoading(); //列表还没加载完成之前显示加载动画

$(function () {
        $.ajax({
            url:'../json/01.json', //这个是我自己写的一个模仿后台写的一个json数据，用本地引 
                                     入，还有就是要注意的就是x轴可以有除了numBer数字外还可以 
                                     有汉字，y轴就不可以，不然就会报错
            type: 'GET',
            dataType: 'json',
            success: function(data) {

                date = data.data   //请求成功后返回的数据
                console.log('date',date)  //可以打印看看生成的数据

                if(date) {
                    //数据遍历循环出来
                    for (let i = 0; i < date.length; i++) {
                        //要在全局设一个weeks空数组,然后就可以把获取到的数据添加进去
                        weeks.push(date[i].week)
                        lin.push(date[i].line)
                        money.push(date[i].Total)
                        nopay.push(date[i]. Unpaid)
                        off.push(date[i].off)
                    }
                    myChart.hideLoading()      //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: weeks
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '设备在线',
                            data: lin
                        }, {
                            name: '本周销售总金额/元',
                            data: money
                            },{
                                name: '未支付订单',
                                data: nopay
                            },{
                            name: '设备离线',
                            data: off
                        }],
                    });
                }
            },
            error: function (err) {
                console.log('请求失败')
            }
        });
    })

第二步骤：去官网把所要的实列option下载下来，然后引进页面，里面的data数据为空数组，最后用ajax的动态数据生成，如下：

var dom = document.getElementById('container') //这里要在body里面写一个div,id=container

    var myChart = echarts.init(dom)

    option = null;
    option = {
        title: {
            text: '无人售货机'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data:['设备在线','本周销售总金额/元','未支付订单','设备离线']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'设备在线',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[]
            },
            {
                name:'本周销售总金额/元',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[]
            },
            {
                name:'未支付订单',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[],
            },
            {
                name:'设备离线',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[],
             //label会把生成的数据显示出来
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                areaStyle: {normal: {}},
            }

        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

最后就可以加载出你想要的图标了，效果如图

 

//方法二：整体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="everyDayTotalEchars" style="width: 600px; height: 450px;"></div>
</body>
<script src="jquery.js"></script>
<script src="js/echarts.js"></script>
<script>
    var everyDayTotalEchars = echarts.init(document.getElementById('everyDayTotalEchars'), 'shine');
    // 初始化日销售报表
    initEveryDayTotalEchars();

    /**
     * 初始化每天销量总金额echars图形报表
     */
    function initEveryDayTotalEchars() {
        var x1 = [], y1 = [], y2 = [];
        var data = null;
        $.ajax({
            url: 'json/01.json',
            type: 'get',
            dataType: 'json',
            async: false,
            success: function (res) {
                data = res.data;
                for (let i = 0; i < data.length; i++) {
                    x1[i] = data[i].week;
                    y1[i] = data[i].line;
                    y2[i] = data[i].Total;
                }
            }
        })
        console.log(y2)
        option = {
            title: {
                text: '日销售统计',
                subtext: '单位/元(RMB)',
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['当日销量总金额/元', '当日订单总数/次']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '16%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                name: '日期',
                type: 'category',
                boundaryGap: false,
                data: x1
            },
            yAxis: {
                type: 'value'
            },
            dataZoom:[{
                type: 'slider',//图表下方的伸缩条
                show : true, //是否显示
                realtime : true, //拖动时，是否实时更新系列的视图
                start : 0, //伸缩条开始位置（1-100），可以随时更改
                end : 100, //伸缩条结束位置（1-100），可以随时更改
            }],
            series: [
                {
                    name:'当日销量总金额/元',
                    type:'line',
                    stack: '总量',
                    data:y1
                },
                {
                    name:'当日订单总数/次',
                    type:'line',
                    stack: '总量',
                    data:y2
                }
            ]
        };
        if (option && typeof option === "object") {
            everyDayTotalEchars.setOption(option, true);
        }
    }
</script>
</html>