Echarts堆叠折线图ajax获取数据展示

简介: Echarts堆叠折线图ajax获取数据展示

先看效果图,效果图如下。

html

<div class="row" >
<div id="main"></div>
</div>

js

// ajax加载数据
$.ajax({
    url : ROOT + "/index/count",
    async : false,
    type : 'GET',
    dataType : 'json',
    success : function(obj) {
        zFun(obj.echatX, obj.echatY, obj.echatY2, obj.echatY3);
        // xFun(obj.echatX, obj.echatY4);
    },
});
function zFun(x, y, y2, y3) {
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    console.log(x);
    console.log(y);
    console.log(y2);
    console.log(y3);
    // 指定图表的配置项和数据
    myChart.setOption({
        title : {
            text : '统计'
        },
        tooltip : {
            trigger : 'axis',
            axisPointer : {
                type : 'cross',
                label : {
                    backgroundColor : '#6a7985'
                }
            }
        },
        legend : {
            data : [ '进厂', '服务', '离厂' ]
        },
        toolbox : {
        },
        grid : {
            left : '3%',
            right : '4%',
            bottom : '3%',
            containLabel : true
        },
        xAxis : [ {
            type : 'category',
            boundaryGap : false,
            data : x
        } ],
        yAxis : [ {
            type : 'value'
        } ],
        series : [ {
            name : '进厂',
            type : 'line',
            stack : '总量',
            itemStyle : {
                normal : {
                    color : '#a8bcd4'
                }
            },
            areaStyle : {
                normal : {}
            },
            data : y
        }, {
            name : '服务',
            type : 'line',
            stack : '总量',
            itemStyle : {
                normal : {
                    color : '#a8bcd4'
                }
            },
            areaStyle : {
                normal : {}
            },
            data : y3
        },
        {
            name : '离厂',
            type : 'line',
            stack : '总量',
            itemStyle : {
                normal : {
                    color : '#a8bcd4'
                }
            },
            label : {
                normal : {
                    show : true,
                    position : 'top'
                }
            },
            areaStyle : {
                normal : {}
            },
            data : y2
        } ]
    });
}
相关文章
|
2月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
3月前
|
JSON 数据格式
ECharts折线图渲染json格式数据(格式为对象)
ECharts折线图渲染json格式数据(格式为对象)
24 0
|
3月前
|
JSON 数据格式
ECharts折线图渲染json格式数据(格式为数组)
ECharts折线图渲染json格式数据(格式为数组)
28 0
|
3月前
|
JSON 数据格式
Echarts折线图的折线实线设置成虚线
Echarts折线图的折线实线设置成虚线
41 0
|
3月前
|
JSON 数据格式
Echarts+ajax实现一个简单折线图
Echarts+ajax实现一个简单折线图
27 0
|
3月前
|
JSON 数据格式
Echarts分段折线图图例样式visualMap颜色修改
Echarts分段折线图图例样式visualMap颜色修改
35 1
|
3月前
|
JSON 数据格式
Echarts折线图分段用不同颜色显示
Echarts折线图分段用不同颜色显示
29 0
|
3月前
|
JSON 前端开发 数据格式
Echarts+ajax实现多条折线图
Echarts+ajax实现多条折线图
26 0
|
3月前
|
JSON JavaScript 前端开发
vue+axios+echarts实现一个折线图
vue+axios+echarts实现一个折线图
36 0
|
3月前
|
JSON 数据格式
Echarts+ajax实现叠堆柱状图
Echarts+ajax实现叠堆柱状图
24 0