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月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
314 1
|
3月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
194 23
echarts地图数据信息流向图效果
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
48 3
|
2月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
255 2
|
2月前
|
算法 Java Linux
java制作海报五:java 后端整合 echarts 画出 折线图,项目放在linux上,echarts图上不显示中文,显示方框口口口
这篇文章介绍了如何在Java后端整合ECharts库来绘制折线图,并讨论了在Linux环境下ECharts图表中文显示问题。
52 1
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
686 0
|
2月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
67 0
|
2月前
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取(二)
Python编程—Ajax数据爬取(二)
111 0
|
4月前
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
|
3月前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
239 2