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
        } ]
    });
}
相关文章
|
6月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
225 0
|
6月前
|
JavaScript 应用服务中间件 nginx
【报错】nginx部署项目后Echarts折线图无法展示
在Vue3+TS+Arco项目中,打包后使用Nginx部署的Echarts折线图显示异常,报`Cannot read properties of undefined(reading &#39;setOption&#39;)`错误。问题源于在定义div时使用了Vue2的`$refs`语法,导致DOM元素无法正确初始化Echarts。解决方法有两种:1) 不推荐使用`document.getElementById`获取DOM并初始化Echarts;2) 推荐在Vue3中通过`ref`获取DOM,在`onMounted`中使用`echarts.init`并借助`nextTick`异步绘制数据。
153 3
|
1月前
|
算法 Java Linux
java制作海报五:java 后端整合 echarts 画出 折线图,项目放在linux上,echarts图上不显示中文,显示方框口口口
这篇文章介绍了如何在Java后端整合ECharts库来绘制折线图,并讨论了在Linux环境下ECharts图表中文显示问题。
39 1
|
3月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
134 0
|
5月前
|
搜索推荐 数据可视化 BI
ECharts 蓝色系-荧光图标折线图01案例
ECharts 案例展示了一周内各路线数据的蓝色荧光折线图,揭示流量趋势。预览包括静态图片和动态GIF。使用ECharts 5.2.0配置图表,包含背景、网格、图例及数据。代码示例初始化图表、定义X轴类别和Y轴值,以及系列颜色。完整案例可在链接中下载。案例结合动态效果与个性化设计,增强数据可视化的吸引力。
59 0
ECharts 蓝色系-荧光图标折线图01案例
|
4月前
echarts 提示框异步获取数据 —— formatter 异步回调函数的使用
echarts 提示框异步获取数据 —— formatter 异步回调函数的使用
137 0
|
4月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
390 0
|
6月前
【统计图】Echarts实现多条折线图渐变堆叠效果
【统计图】Echarts实现多条折线图渐变堆叠效果
|
JSON 数据格式
Echarts分段折线图图例样式visualMap颜色修改
Echarts分段折线图图例样式visualMap颜色修改
209 1
|
6月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色