【前端统计图】echarts实现单条折线图
五分钟上手：
<!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数据结合：
如图所示：
实现代码：
<!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
]
}
文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程。
【领取方法】
关注 【编程微刊】微信公众号：
回复【小程序demo】一键领取130个微信小程序源码demo资源。
回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
【前端统计图】echarts实现单条折线图的更多相关文章
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- echarts、higncharts折线图或柱状图显示数据为0的点
echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...
- 【前端统计图】echarts多条折线图和横柱状图实现
参考链接:echarts官网:http://echarts.baidu.com/ 原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...
- echarts多条折线图和柱状图实现
参考链接:echarts官网:http://echarts.baidu.com/原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...
- 百度推出的echarts，制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
- echarts简单的折线图
加jar包 <script src="<%=path %>/js/echarts.min.js"></script> 首先 在jsp页面中 选好 ...
- echarts 拼图和折线图的封装 及常规处理
1.html <div id="wrap"></div> 2.js ; (function ($) { $.fn.extend({ echartsPie: ...
- echarts多条折线图
折线图单只比较好配置,但是多只的话,楼主整整难了一下午才搞出来,下面分享下啦 var myChart = echarts.init(document.getElementById('series-ch ...
- 在微信小程序中使用 echarts 图片-例 折线图
首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...
随机推荐
- 《三》Java IO 字节输入输出流
那么这篇博客我们讲的是字节输入输出流:InputStream.OutputSteam(下图红色长方形框内),红色椭圆框内是其典型实现(FileInputSteam.FileOutStream) ...
- 随手记录---transform 属性
其实平时很少用到transform属性,一些放大缩小用width.height可以改变,一些位置变换,更是有margin,而一些旋转.2D.3D变换也不怎么能用得到.不过最近接触了一些图片的缩放,觉得 ...
- django遇到的那些古怪问题
AssertionError: .accepted_renderer not set on Response 出错原因,没有在合法的方法内使用 response 响应,之前在dispatch内直接re ...
- Docker+SVN
原文:Docker+SVN mkdir /cnex/svndocker pull garethflowers/svn-server docker run -d --name svn-server - ...
- Http协议的断点续传下载器，使用观察者模式监视下载进度，使用xml保存下载进度。
下载使用Http协议,为了做到断点续传,在点击暂停后,将已下载的大小等数据通过Json存入xml中,当继续传输的时候从xml文件中读取大小继续下载(好几个月前写的,真的想不起来了) bool CHtt ...
- COGS——C2274. [HEOI 2016] tree
http://www.cogs.pro/cogs/problem/problem.php?pid=2274 ★☆ 输入文件:heoi2016_tree.in 输出文件:heoi2016_tre ...
- 新版本的AutoCAD2018 怎样删除 A360 Drive盘符
通常的做法,如下: (1)点击开始菜单的“运行”(Win+R或者Win+X快捷选择运行),在弹出的对话框输入“regedit”,回车,进入注册表编辑器. (2)找到HKEY_LOCAL_MACHINE ...
- 微信支付v2开发(5) 订单查询
本文介绍微信支付中订单查询功能的实现. 作者:方倍工作室 地址:http://www.cnblogs.com/txw1958/p/wxpay-order-query.html 一.订单查询 因为某一方 ...
- 非常全的linux面试笔试题及参考答案
一．填空题: 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件/etc/fstab 中读取要加载的文件系统. 3. Linux文件系统中每个文件用 i节点来标识 ...
- less相关知识点
less是一门css预处理语言,文件后缀名为.less,能减少css文件编写的代码量 官网 http://lesscss.cn/#using-less 安装 使用npm install -g less ...