Echarts进行异步调用数据。（柱状图和折线图，饼状图）以及查询十二月份复杂的数据显示。

最新推荐文章于 2023-06-06 23:28:26 发布
最新推荐文章于 2023-06-06 23:28:26 发布
阅读量1.9k 收藏 11
点赞数 4
分类专栏： 杂七杂八 文章标签： Echarts 饼状图 折线图 柱状图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32230309/article/details/88847886
版权

1 饼状图
示例图
在这里插入图片描述
前台代码html：

<div>
     <div id="yhzhfx"></div>
 </div>

前台代码js:

 var myChart = echarts.init(document.getElementById('yhzhfx'));
    option = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                myTool1: {
                    show: true,
                    title: '导出',
                    onclick: function (){
                        alert('1')
                    }
                },
                saveAsImage : {show: true}
            }
        },
        calculable : false,
        series : [
            {
                name:'',
                type:'pie',
                selectedMode: 'single',
                radius : [0, 30],
                x: '20%',
                width: '30%',
                funnelAlign: 'right',
                max: 1548,
                itemStyle : {
                    normal : {
                        label : {
                            position : 'inner'
                        },
                        labelLine : {
                            show : false
                        }
                    }
                },
                color:['#1FC2FF','#F7C754'],
                data:[]
            },
            {
                name:'',
                type:'pie',
                radius : [40, 55],
                x: '30%',
                width: '20%',
                funnelAlign: 'left',
                max: 1048,
                color:['#1FC2FF','#F7C754','#4D7FFF','#AA78FF','#05D9B3','#FF845E'],
                data:[]
            },
            {
                name:'',
                type:'pie',
                radius : [70, 85],
                x: '30%',
                width: '20%',
                funnelAlign: 'left',
                max: 1048,
                color:['#4D7FFF','#AA78FF','#FF845E','#05D9B3','#1FC2FF'],
                data:[
                ]
            }
        ]
    };
    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
    $.ajax({
   			 //这里需要三个res数组来装三个饼状环数据，在data使用function()进行遍历后台传来的值装入每个res数组中
        url: "xxx/yhpczlWtyhzhfx",
        success: function(data){
            var res=[];
            var item=data.list1;
            var res1=[];
            var item1=data.list2;
            var res2=[];
            var item2=data.list3;
            myChart.hideLoading();    //隐藏加载动画
            myChart.setOption({        //加载数据图表
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        myTool1: {
                            show: true,
                            title: '导出',
                            onclick: function (){
                                alert('1')
                            }
                        },
                        saveAsImage : {show: true}
                    }
                },
                calculable : false,
                series : [
                    {
                        name:'',
                        type:'pie',
                        selectedMode: 'single',
                        radius : [0, 30],
                        x: '20%',
                        width: '30%',
                        funnelAlign: 'right',
                        max: 1548,
                        itemStyle : {
                            normal : {
                                label : {
                                    position : 'inner'
                                },
                                labelLine : {
                                    show : false
                                }
                            }
                        },
                        color:['#1FC2FF','#F7C754'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                res.push({
                                    name:item[i].name,
                                    value:item[i].value
                                });
                            }
                            return res;
                        }()
                    },
                    {
                        name:'',
                        type:'pie',
                        radius : [40, 55],
                        x: '30%',
                        width: '20%',
                        funnelAlign: 'left',
                        max: 1048,
                        color:['#1FC2FF','#F7C754','#4D7FFF','#AA78FF','#05D9B3','#FF845E'],
                        data:function () {
                            for(var i=0;i<item1.length;i++){
                                res1.push({
                                    name:item1[i].name,
                                    value:item1[i].value
                                });
                            }
                            return res1;
                        }()
                    },
                    {
                        name:'',
                        type:'pie',
                        radius : [70, 85],
                        x: '30%',
                        width: '20%',
                        funnelAlign: 'left',
                        max: 1048,
                        color:['#4D7FFF','#AA78FF','#FF845E','#05D9B3','#1FC2FF'],
                        data:function () {
                            for(var i=0;i<item2.length;i++){
                                res2.push({
                                    name:item2[i].name,
                                    value:item2[i].value
                                });
                            }
                            return res2;
                        }()
                    }
                ]
            })
        }});

数据库部分：
1 环：
在这里插入图片描述
2 环：
在这里插入图片描述
3 环：
在这里插入图片描述
java后台Sql方法：

<select id="yhpczlWtyhzhfx_1List"  resultType="map">
        SELECT
        *
        FROM
        yhpczl_wtyhzhfx_1
    </select>
    <select id="yhpczlWtyhzhfx_2List"  resultType="map">
        SELECT
        *
        FROM
        yhpczl_wtyhzhfx_2
    </select>
    <select id="yhpczlWtyhzhfx_3List"  resultType="map">
        SELECT
        *
        FROM
        yhpczl_wtyhzhfx_3
    </select>

java后台Controller：

 public JSONObject yhpczlWtyhzhfx(){
        JSONObject jsonObject = new JSONObject();
        List<YhpczlWtyhzhfx_1>  list1 = iThreeInOneInfoService.yhpczlWtyhzhfx_1List();
        List<YhpczlWtyhzhfx_2>  list2 = iThreeInOneInfoService.yhpczlWtyhzhfx_2List();
        List<YhpczlWtyhzhfx_3>  list3 = iThreeInOneInfoService.yhpczlWtyhzhfx_3List();
        jsonObject.put("list1",list1);
        jsonObject.put("list2",list2);
        jsonObject.put("list3",list3);
        return jsonObject;
    }

2 柱状图
示例图：
在这里插入图片描述

前台html代码：

 <div>
    <div id="aqfxqdzhfx"></div>
 </div>

前台js代码：

var myChart2 = echarts.init(document.getElementById('aqfxqdzhfx'));
    option2 = {
        tooltip : {
            trigger: 'axis'
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
				/*restore : {show: true},*/
                myTool1: {
                    show: true,
                    title: '导出',
                   
                    onclick: function (){
                        alert('1')
                    }
                },
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        legend: {
			/*x: 'left',
			 left: 30,*/
            top:5,
            color:['#FF845E','#F7C754','#AA78FF','#1FC2FF','#1FC2FF'],
            data:['检查次数-计划','检查清单数-计划','检查次数-实际','排查清单数-实际','发现隐患数']
        },
        xAxis : [
            {
                type : 'category',
                data : ['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '排查次数',
                axisLabel : {
                    formatter: '{value} 次'
                }
            },
            {
                type : 'value',
                name : '排查清单数',
                axisLabel : {
                    formatter: '{value} 个'
                }
            }
        ],
        series : [

            {
                name:'检查次数-计划',
                type:'bar',
                color:['#FF845E'],
                data:[]
            },
            {
                name:'检查清单数-计划',
                type:'bar',
                color:['#F7C754'],
                data:[]
            },
            {
                name:'检查次数-实际',
                type:'bar',
                color:['#AA78FF'],
                data:[]
            },
            {
                name:'排查清单数-实际',
                type:'bar',
                yAxisIndex: 1,
                color:['#1FC2FF'],
                data:[]
            },
            {
                name:'发现隐患数',
                type:'line',
                color:['#05D9B3'],
                data:[]
            }
        ]
    };
    myChart2.showLoading();    //数据加载完之前先显示一段简单的loading动画
    $.ajax({
        url: "xxxx/yhpczlAqfxqdzhfx",
        success: function(data){
            var res1 = [];
            var res2 = [];
            var res3 = [];
            var res4 = [];
            var res5 = [];

            var item=data.list;
            myChart2.hideLoading();    //隐藏加载动画
            myChart2.setOption({        //加载数据图表
                tooltip : {
                    trigger: 'axis'
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
						/*restore : {show: true},*/
                        myTool1: {
                            show: true,
                            title: '导出',
                        
                            onclick: function (){
                                alert('1')
                            }
                        },
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                legend: {
					/*x: 'left',
					 left: 30,*/
                    top:5,
                    color:['#FF845E','#F7C754','#AA78FF','#1FC2FF','#1FC2FF'],
                    data:['检查次数-计划','检查清单数-计划','检查次数-实际','排查清单数-实际','发现隐患数']
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name : '排查次数',
                        axisLabel : {
                            formatter: '{value} 次'
                        }
                    },
                    {
                        type : 'value',
                        name : '排查清单数',
                        axisLabel : {
                            formatter: '{value} 个'
                        }
                    }
                ],
                series : [

                    {
                        name:'检查次数-计划',
                        type:'bar',
                        color:['#FF845E'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                res1.push(item[i].value1);
                            }
                            return res1;
                        }()
                    },
                    {
                        name:'检查清单数-计划',
                        type:'bar',
                        color:['#F7C754'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                res2.push(item[i].value2);
                            }
                            return res2;
                        }()
                    },
                    {
                        name:'检查次数-实际',
                        type:'bar',
                        color:['#AA78FF'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                res3.push(item[i].value3);
                            }
                            return res3;
                        }()
                    },
                    {
                        name:'排查清单数-实际',
                        type:'bar',
                        yAxisIndex: 1,
                        color:['#1FC2FF'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                res4.push(item[i].value4);
                            }
                            return res4;
                        }()
                    },
                    {
                        name:'发现隐患数',
                        type:'line',
                        color:['#05D9B3'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                res5.push(item[i].value5);
                            }
                            return res5;
                        }()
                    }
                ]
            })
        }});

数据库部分：
在这里插入图片描述

后台Sql代码：

<select id="yhpczlAqfxqdzhfxList"  resultType="map">
        SELECT
        *
        FROM
        yhpczl_aqfxqdzhfx
    </select>

后台Contorller代码:

  public JSONObject yhpczlAqfxqdzhfx(){
        JSONObject jsonObject = new JSONObject();

        List<YhpczlAqfxqdzhfx>  list = iThreeInOneInfoService.yhpczlAqfxqdzhfxList();
        jsonObject.put("list",list);
        return jsonObject;
    }

3 折线图：
示例图：
在这里插入图片描述
前台html代码：

    <div>
         <div id="wtyhqsfx"></div>
      </div>

前台js代码：

 var myChart3 = echarts.init(document.getElementById('wtyhqsfx'));
    option3 = {
        tooltip : {
            trigger: 'axis'
        },
        legend: {
			/*x: 'left',
			 left: 50,*/
            top:10,
            data:['2018','2019']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                myTool1: {
                    show: true,
                    title: '导出',
                 
                    onclick: function (){
                        alert('1')
                    }
                },
				/*restore : {show: true},*/
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'2018',
                type:'line',
                stack: '隐患个数',
                color:['#1FC2FF'],
                data:[]
            },
            {
                name:'2019',
                type:'line',
                stack: '隐患个数',
                color:['#F7C754'],
                data:[]
            }
        ]
    };
    myChart3.showLoading();    //数据加载完之前先显示一段简单的loading动画
    $.ajax({
        url: "xxx/yhpczlWtyhqsfx",
        success: function(data){
        	var res1 = [];
            var res = [];
            var item=data.list;
            myChart3.hideLoading();    //隐藏加载动画
            myChart3.setOption({        //加载数据图表
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
					/*x: 'left',
					 left: 50,*/
                    top:10,
                    data:['2018','2019']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        myTool1: {
                            show: true,
                            title: '导出',
                         
                            onclick: function (){
                                alert('1')
                            }
                        },
						/*restore : {show: true},*/
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : ['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'2018',
                        type:'line',
                        stack: '隐患个数',
                        color:['#1FC2FF'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                res.push(item[i].value1);
                            }
                            return res;
                        }()
                    },
                    {
                        name:'2019',
                        type:'line',
                        stack: '隐患个数',
                        color:['#F7C754'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                res1.push(item[i].value2);
                            }
                            return res1;
                        }()
                    }
                ]

            })
        }});

数据库部分：
在这里插入图片描述
后台Sql代码：

 <select id="yhpczlWtyhqsfxList"  resultType="map">
        SELECT
        *
        FROM
        yhpczl_wtyhqsfx
    </select>

后台Controller:

 public JSONObject yhpczlWtyhqsfx(){
        JSONObject jsonObject = new JSONObject();

        List<YhpczlWtyhqsfx>  list = iThreeInOneInfoService.yhpczlWtyhqsfxList();
        jsonObject.put("list",list);
        return jsonObject;
    }

复杂的十二月份的需求图：

在这里插入图片描述
复杂的十二月份的示例图：

在这里插入图片描述

因为查询的数据是一年的数据这一年的数据没有需求的数据多，所以有什么显示什么。

前台html：

				<div  class='navTtitle'>
                        <h4>安全生产标准化趋势分析</h4>
                    </div>
                    <div>
                        <div id="yhqsfx"></div>
                    </div>

前台js：

 var myChart2 = echarts.init(document.getElementById('yhqsfx'));
    myChart2.showLoading();    //数据加载完之前先显示一段简单的loading动画
    $.ajax({
        url: "/threeInOneInfoAqscbzhtjfx/aqscbzhtjfxQsfx?endTime="+endTime+"&coalMineCode="+coalMineCode+"&startTime="+startTime,
        success: function(data){
            var res1=[0,0,0,0,0,0,0,0,0,0,0,0];
            var res2=[0,0,0,0,0,0,0,0,0,0,0,0];
            var res3=[0,0,0,0,0,0,0,0,0,0,0,0];
            var res4=[0,0,0,0,0,0,0,0,0,0,0,0];
            var res5=[0,0,0,0,0,0,0,0,0,0,0,0];
            var res6=[0,0,0,0,0,0,0,0,0,0,0,0];
            var res7=[0,0,0,0,0,0,0,0,0,0,0,0];
            var res8=[0,0,0,0,0,0,0,0,0,0,0,0];
            var res9=[0,0,0,0,0,0,0,0,0,0,0,0];
            var res10=[0,0,0,0,0,0,0,0,0,0,0,0];
            var res11=[0,0,0,0,0,0,0,0,0,0,0,0];
            var res12=[0,0,0,0,0,0,0,0,0,0,0,0];
            var item=data.list;
            myChart2.hideLoading();    //隐藏加载动画
            myChart2.setOption({
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    top:10,
                    data:['调度和地面设施','安全培训和应急管理','职业卫生','运输','机电','掘进','采煤','地址灾害防治与测量','通风','事故隐患排查治理','安全风险分级管控']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
						/*restore : {show: true},*/
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : ['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月'],
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name:'得分'
                    }
                ],
                series : [
                    {
                        name:'调度和地面设施',
                        type:'line',
                        stack: '调度和地面设施',
                        color:['#1FC2FF'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                if(item[i].name=="调度和地面设施"){
                                    var mon =item[i].year;
                                    var month = mon.substr(mon.length-2)
                                    res2[month-1]=(item[i].value);
                                }
                            }
                            return res2;
                        }()
                    },
                    {
                        name:'安全培训和应急管理',
                        type:'line',
                        stack: '安全培训和应急管理',
                        color:['#F7C754'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                if(item[i].name=="安全培训和应急管理"){
                                    var mon =item[i].year;
                                    var month = mon.substr(mon.length-2)
                                    res3[month-1]=(item[i].value);
                                }
                            }
                            return res3;
                        }()
                    },
                    {
                        name:'职业卫生',
                        type:'line',
                        stack: '职业卫生',
                        color:['#FF845E'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                if(item[i].name=="职业卫生"){
                                    var mon =item[i].year;
                                    var month = mon.substr(mon.length-2)
                                    res4[month-1]=(item[i].value);
                                }
                            }
                            return res4;
                        }()
                    },
                    {
                        name:'运输',
                        type:'line',
                        stack: '运输',
                        color:['#F7C754'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                if(item[i].name=="运输"){
                                    var mon =item[i].year;
                                    var month = mon.substr(mon.length-2)
                                    res5[month-1]=(item[i].value);
                                }
                            }
                            return res5;
                        }()
                    },
                    {
                        name:'机电',
                        type:'line',
                        stack: '机电',
                        color:['#AA78FF'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                if(item[i].name=="机电"){
                                    var mon =item[i].year;
                                    var month = mon.substr(mon.length-2)
                                    res6[month-1]=(item[i].value);
                                }
                            }
                            return res6;
                        }()
                    },
                    {
                        name:'掘进',
                        type:'line',
                        stack: '掘进',
                        color:['#1FC2FF'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                if(item[i].name=="掘进"){
                                    var mon =item[i].year;
                                    var month = mon.substr(mon.length-2)
                                    res7[month-1]=(item[i].value);
                                }
                            }
                            return res7;
                        }()
                    },
                    {
                        name:'采煤',
                        type:'line',
                        stack: '采煤',
                        color:['#05D9B3'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                if(item[i].name=="采煤"){
                                    var mon =item[i].year;
                                    var month = mon.substr(mon.length-2)
                                    res8[month-1]=(item[i].value);
                                }
                            }
                            return res8;
                        }()
                    },
                    {
                        name:'地质灾害防治与测量',
                        type:'line',
                        stack: '地质灾害防治与测量',
                        color:['#4D7FFF'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                if(item[i].name=="地质灾害防治与测量"){
                                    var mon =item[i].year;
                                    var month = mon.substr(mon.length-2)
                                    res9[month-1]=(item[i].value);
                                }
                            }
                            return res9;
                        }()
                    },
                    {
                        name:'通风',
                        type:'line',
                        stack: '通风',
                        color:['#F03F3F'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                if(item[i].name=="通风"){
                                    var mon =item[i].year;
                                    var month = mon.substr(mon.length-2)
                                    res10[month-1]=(item[i].value);
                                }
                            }
                            return res10;
                        }()
                    },
                    {
                        name:'事故隐患排查治理',
                        type:'line',
                        stack: '事故隐患排查治理',
                        color:['#333333'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                if(item[i].name=="事故隐患排查治理"){
                                    var mon =item[i].year;
                                    var month = mon.substr(mon.length-2)
                                    res11[month-1]=(item[i].value);
                                }
                            }
                            return res11;
                        }()
                    },
                    {
                        name:'安全风险分级管控',
                        type:'line',
                        stack: '安全风险分级管控',
                        color:['#1FC2FF'],
                        data:function () {
                            for(var i=0;i<item.length;i++){
                                if(item[i].name=="安全风险分级管控"){
                                    var mon =item[i].year;
                                    var month = mon.substr(mon.length-2)
                                    res12[month-1]=(item[i].value);
                                }
                            }
                            return res12;
                        }()
                    }
                ]

			})
        }});

=[0,0,0,0,0,0,0,0,0,0,0,0]初始化十二个月的值。
.substr(mon.length-2) 是因为后台传入的数据为201802,这样的数据，我们需要把这个最后的月份获取到，插入到对应的月份中的下标。
month-1是因为数组下标为0开头，后台获得的数据是1开头。

后台sql:

 select d.CHECK_YEAR as year, d.YIXUANZEPROJECTS_NAME as name, count(*) as value from f_swyt_view_bzh_plan d
        where d.COALMINE_CODE = #{coalMineCode}
        and CHECK_TYPE = #{checkType}
        and d.CHECK_YEAR <![CDATA[>]]>#{startTime}
        and d.CHECK_YEAR <![CDATA[<]]>#{endTime}
        group by  d.YIXUANZEPROJECTS_NAME;

数据库显示：
在这里插入图片描述
后台Controller:

 JSONObject jsonObject = new JSONObject();
        List<Map>  list = iThreeInOneInfoAqschbzfxService.aqscbzhtjfxQsfxList(startTime,endTime,coalMineCode,checkType);
        jsonObject.put("list",list);
        return jsonObject;

以上四种Echarts图都是在data部分进行将后台获取的数据添加进去。

Arog
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 应用示例 线图 柱状图饼图 地图 异步数据加载
12-09
echarts 应用示例 线图 柱状图饼图 地图 异步数据加载
echarts中饼图的异步数据加载绘制
流星
09-07 4060
ECharts 中异步获取数据并动态填充数据并绘制饼图
echarts柱状图-异步加载数据
壁花girl的博客
01-13 1650
echarts异步加载数据形成柱状图效果如下： 代码：先引入echarts.js文件 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。 然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。 var myChart = echarts.
ECharts异步数据获取
m0_43400750的博客
06-19 1322
控制类 @Resource private RegionService regionService; @GetMapping("/PieChart1") public String pieChart(){ return "echarts/echarts1"; } @GetMapping("/PieChart2") public String pieChart2(){ return "echarts/echarts2
ECharts异步获取数据
LuisChen的博客
06-02 3368
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Insert title here</title> <script type="text/javas
Echarts：基础折线图（含异步加载数据）
12-04
Echarts基础折线图源代码，对于数据源的读取有两种方式：直接定义数据源和异步加载数据，异步加载数据以读取json/js数据为主。
vue在使用ECharts时的异步更新和数据加载详解
08-28
主要给大家介绍了关于vue在使用ECharts时的异步更新和数据加载的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
Android异步加载数据和图片的保存思路详解
01-05
把从网络获取的图片数据保存在SD卡上， 先把权限都加上 网络权限 android.permission.INTERNET SD卡读写权限 android.permission.MOUNT_UNMOUNT_FILESYSTEMS android.permission.WRITE_EXTERNAL_STORAGE 总体...
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
LayUI 结合 Echarts 实现饼图异步数据加载绘制
kjrim的博客
04-30 848
官方示例： var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item',
ajax异步获取数据库数据绘制Echarts图表demo
08-07
ajax异步获取数据库数据绘制Echarts图表demo.rar
echarts柱形图异步加载(可直接执行).zip
06-03
echarts柱形图异步加载(可直接执行).zip
ECharts 异步加载数据
01-19
ECharts 异步加载数据 ECharts 通常数据设置在 setOption 中，如果我们需要异步加载数据，可以配合 jQuery等工具，在异步获取数据后通过 setOption 填入数据和配置项就行。 ECharts 通常数据设置在 setOption 中，如果我们需要异步加载数据，可以配合 jQuery等工具，在异步获取数据后通过 setOption 填入数据和配置项就行。 json 数据： echarts_test_data.json 数据： {     data_pie : [     {value:235, name:视频广告},     {value:27
63Echarts - 饼图（Referer of a website）
阿甘兄
04-30 701
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
echarts异步加载获取数据
weixin_30312557的博客
06-12 272
在做项目中遇到了一个echarts异步加载数据的填充，首先，查看官方文档示例，了解相关属性之后，再去了解异步请求的相关属性，之后在异步中进行定义横坐标和值数组定义，通过遍历获取result的值存放在定义的数组中，最后存放在data下便实现异步加载获取数据，以下是示例： function test(){ var myChart = echarts.init(doc...
web数据可视化(Echarts版)5-11异步加载绘制饼图数据(代码仅供参考)
m0_63471474的博客
06-06 483
【代码】web数据可视化(Echarts版)5-11异步加载绘制饼图数据(代码仅供参考)
echarts 异步数据获取、通过切换搜索条件后重复渲染问题、添加loading
qq_42103673的博客
04-22 539
1.同一坐标系渲染多条折线 问题：在数据请求回来之前已经开始画线，导致线条画不上的问题 解决： // 曲线图1 actulePriceList1(){ return new Promise((resolve, reject) => { priceClient.findActulePriceListByName(StringValue.of(this.condition.varietyNameCode)).then(res=>{
echarts异步请求后台数据(flask, express, beego版本)
andy dennis的博客
02-01 1164
前言 echart是一个挺好的JS库, 官网值得一看。 另外本文会用flask, express, beego三个版本搭建后台服务器。案例虽然简单，但仍然有一些值得学习的地方。 最终实现的效果图如下(成绩随机产生): 项目结构 前端部分 echarts.min.js 和 jquery 分别点击这两个链接下载，并把名字改为和上图一致的名字，当然您也可以修改前端页面的引入部分: <script src="js/echarts.min.js"></script> <scri
小程序 echarts 封装 异步请求数据 多调用
wlm_0214的博客
08-16 370
封装函数: function setOption(paramChart, title, chartType, xdata, ydata,yscale, dataFlag) { let intervalVal = 0 if (dataFlag == 'staffAct') { intervalVal = 'auto' } else { in...
echarts用异步绘制三条柱状图
最新发布
06-08
好的，以下是使用 echarts 异步绘制三条柱状图的示例代码： ```javascript // 定义三个数据请求地址 var url1 = 'http://example.com/data1'; var url2 = 'http://example.com/data2'; var url3 = 'http://example.com/data3'; // 使用 axios 发送异步请求 axios.all([ axios.get(url1), axios.get(url2), axios.get(url3) ]).then(axios.spread(function (data1, data2, data3) { // 将数据处理成 echarts 需要的格式 var series1 = { name: '柱状图1', type: 'bar', data: data1 }; var series2 = { name: '柱状图2', type: 'bar', data: data2 }; var series3 = { name: '柱状图3', type: 'bar', data: data3 }; // 绘制图表 var myChart = echarts.init(document.getElementById('chart')); myChart.setOption({ xAxis: { type: 'category', data: ['数据1', '数据2', '数据3'] }, yAxis: { type: 'value' }, series: [series1, series2, series3] }); })); ``` 以上代码中，我们使用 axios 库发送异步请求，然后在请求成功后将数据处理成 echarts 需要的格式，最后绘制图表。在绘制图表时，我们使用了 echarts 的 `setOption` 方法来设置图表的配置项。其中，`series` 属性是一个数组，每一个元素代表一条柱状图的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值