eacharts图动态生成

txt.json

[{"id": 30},{"id": 20},{"id": 50},{"id": 40},{"id": 80}]

如果是异步请求

async:true,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ECharts</title>

    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <!-- 引入jquery.js -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js "></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="bar1" style="width:800px;height:600px">


</div>

<div class="box">

</div>

<script type="text/javascript">


    var companyName = ['湖南','湖北','安徽','河南','河北'];
    var companyRate = [];

    var _this=this;
    $.ajax({
        type:'get',
        url:'txt.json',
        dataType:'json',
        async:false,
        success:function(e){
            for(i in e){
                var arr = [];
                arr = e;
                _this.companyRate.push(arr[i].id)
            }

        },
        error:function(){
            console.log('请求不正确')
        }
    });

    console.log(companyRate);

    function drawMyBar1() {

        var myBar1 = echarts.init(document.getElementById('bar1'));
        var option = {
            grid : {
                y : '12%', //图形上方偏移
                y2 : '10%' //图形下方偏移
            },
            tooltip : {
                trigger : 'axis',
                axisPointer : { // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis : [ {
                type : 'category',
                data : companyName,
                axisPointer : {
                    type : 'shadow'
                }
            } ],
            yAxis : [ {
                type : 'value',
                name : '达成率',
                min : 0,
                max : 100,
                axisLabel : {
                    formatter : '{value}'
                },
            } ],
            series : [ {
                name : '达成率',
                type : 'bar',
                data : companyRate,
                barWidth : '50%', //柱图宽度
                yAxisIndex : 0,
                label : {
                    normal : {
                        show : true,
                        position : 'top', //label显示在柱状图上方,'insideTop'显示在柱状图内部上方
                        fontSize : 12,


                    }
                },
            },
            ]
        };
        myBar1.setOption(option);

    }
    drawMyBar1();



</script>


</body>

</html>

eacharts图动态生成

猜你喜欢