Echarts堆叠折线图ajax获取数据展示
时间:2022-06-18
本文章向大家介绍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
} ]
});
}
原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq技术交流群聊:649040560。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP CURL中传递cookie的方法步骤
- PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
- Yii2处理密码加密及验证的方法
- PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
- python如何输出反斜杠
- 在Laravel5中正确设置文件权限的方法
- asp函数split()对应php函数explode()
- php获取目录下所有文件及目录(多种方法)(推荐)
- Python基于Twilio及腾讯云实现国际国内短信接口
- PHP __call()方法实现委托示例
- PHP中rename()函数的妙用讲解
- php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
- php实现小程序支付完整版
- Yii2框架视图(View)操作及Layout的使用方法分析
- php实现单笔转账到支付宝功能