【前端统计图】echarts实现单条折线图
时间:2022-05-30
本文章向大家介绍【前端统计图】echarts实现单条折线图,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
五分钟上手:
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五分钟上手之折线图</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
title: {
text: '近七日收益'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['近七日收益']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ["1","2","3","4","5"]
},
yAxis: {
type: 'value'
},
series: [
{
name:'近七日收益',
type:'line',
stack: '总量',
data:["1","2","3","4","5"]
}
]
});
// 异步加载数据
/* $.get('data.json').done(function (data) {
// 填入数据
myChart.setOption({ xAxis: { data: data.categories }, series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});});*/
</script>
</body>
</html>
和json数据结合:
如图所示:
图片.png
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.3.js"></script>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 900px;height:400px;"></div>
</body>
<!--月收益-->
<script type="text/javascript">
function bb() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.get('data1.json').done(function(data) {
myChart.setOption({
title: {
text: '月收益'
},
tooltip: {},
// legend: {
// data:['收益']
// },
xAxis: {
data: data.categories
},
yAxis: {},
series: [{
name: '收益',
type: 'line',
data: data.data
}]
});
});
}
bb();
</script>
</html>
数据:data1.json文件
{
"categories": [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12"
],
"data": [
820,
932,
901,
9134,
1290,
330,
120
]
}
ajax数据交互:
// 折线图
var xChart = echarts.init(document.getElementById("main"));
function xFun(x_data, y_data) {
xChart.setOption({
color : [ '#3398DB' ],
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend : {
data : [ '心率值' ]
},
grid : {
left : '3%',
right : '20%',
bottom : '20%',
containLabel : true
},
xAxis : [ {
type : 'category',
data : x_data,
} ],
yAxis: [ { //纵轴标尺固定
type: 'value',
scale: true,
name: '心率值',
max: 140,
min: 0,
splitNumber:20,
boundaryGap: [0.2, 0.2]
} ],
series : [ {
name : '心率',
type : 'line',
data : y_data
} ]
}, true);
}
- 关于纠结的recycle pool的设置(r3笔记第5天)
- 融会贯通学习trigger(r2笔记第4天)
- 完整的R语言预测建模实例-从数据清理到建模预测
- 利用回归模型预测数值型数据(代码)
- 关于ORA-00020问题的反思(r2笔记第3天)
- 查看空间使用情况的脚本(r2笔记第2天)
- 使用dbms_parallel_execute来完成DML的并行(r3笔记第1天)
- 有趣的linux命令总结(78天)
- 生产环境sql语句调优实战第七篇(r2笔记99天)
- 一个普通数据库用户所能查到的"意料之外"的信息(r2笔记98天)
- 查看并行进程的一些简单信息(r3笔记第17天)
- 多行数据的批处理之bulk collect(r3笔记第16天)
- pl/sql中错误的异常处理 (r3笔记第15天)
- 关于session leak的问题分析(r3笔记第13天)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android控件Tween动画(补间动画)实现方法示例
- Android顶部(toolbar)搜索框实现的实例详解
- Linux下tcpdump命令解析及使用详解
- react native中的聊天气泡及timer封装成的发送验证码倒计时
- 如何卸载linux自带openjdk并安装sun jdk
- Android中实现密码的隐藏和显示的示例
- CentOS8出现-bash:乱码问题及解决方法
- Android编程实现摄像头临摹效果的方法
- Android实现九宫格解锁的实例代码
- 详解Linux系统中虚拟设备文件的各种实用用法
- 适配android7.0获取文件的Uri的方法
- Android RecyclerView使用方法详解
- 详解bash中的初始化机制
- Android音频系统AudioTrack使用方法详解
- 深入解析Android中的setContentView加载布局原理