echarts

最新推荐文章于 2023-05-10 11:30:21 发布

爱敲代码的斯蒂芬

最新推荐文章于 2023-05-10 11:30:21 发布

阅读量166

点赞数 1

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/weixin_71439967/article/details/126477172

版权

异步数据请求：

<!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="echarts/dist/echarts.js"></script>
    <script src="echarts/i18n/langZH.js"></script>
    <script src="js/jquery-3.6.0.js"></script>
</head>

<body>
    <div id="div">

    </div>
    <script>
        var main = document.getElementById("div")
        var myEcharts = echarts.init(main, "customed", {
            width: "auto",
            height: 600
        })
        $(function () {
           $.get("json/data.json",function(data){
            console.log(data.result);
            var arr=data.result;
            var x=[0,3,4,7];
            var xs=[];
            var er=[];
            var wo=[];
            var ba=[];
            var ss=[]
            for (let i = 0; i < x.length; i++) {
                xs.push(arr[x[i]].city)
                er.push(arr[i]["92h"]);
                wo.push(arr[i]["95h"]);
                ba.push(arr[i]["98h"]);
                ss.push(arr[i]["0h"]);
            }
            myEcharts.setOption({
                  title:{
                         text:"今日油价表",
                         left:"center"
                  },
                  xAxis:{
                    data:xs
                  },
                  yAxis:{},
                  series:[{
                     name:"销量",
                     type:"bar",
                     data:er
                  },{
                     type:"bar",
                     data:wo
                  },{
                     type:"bar",
                     data:ba
                  },{
                     type:"bar",
                     data:ss
                  }]
               })
           })
        })
        //第四步：
        //自适应宽度
        window.onresize = function () {
            myEcharts.resize();
        }
    </script>
</body>

</html>

效果图: