【前端统计图】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折线图 所以不需要把 ...
随机推荐
- 18/9/9牛客网提高组Day1
牛客网提高组Day1 T1 中位数 这好像是主席树??听说过,不会啊... 最后只打了个暴力,可能是n2logn? 只过了前30% qwq #include<algorithm> #in ...
- Dao层封装泛型实现(spring mvc，springjdbctemplate)
代码片段(6) [全屏查看所有代码] 1. [代码]BaseDao 跳至 [1] [2] [3] [4] [全屏预览] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 ...
- “ping”命令的原理就是向对方主机发送UDP数据包，HTTP在每次请求结束后都会主动释放连接，因此HTTP连接是一种“短连接”
Socket 是一套建立在TCP/IP协议上的接口不是一个协议 应用层: HTTP FTP SMTP Web 传输层: 在两个应用程序之间提供了逻辑而不是物理的通信(TCP UDP) T ...
- svd 奇异值分解
参考:http://www.cnblogs.com/pinard/p/6251584.html 酉矩阵,关于矩阵的问题,还是很复杂的. 只有方阵才可以进行特征值分解, 但是如果行不等于列,即不是方阵, ...
- Java Web学习总结（3）——Servlet详解
一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...
- [D3] Animate Chart Axis Transitions in D3 v4
When the data being rendered by a chart changes, sometimes it necessitates a change to the scales an ...
- c编程：僵尸吃大脑
第一行输入一个正整数n 以下每一行输入僵尸已经吃了的大脑数量a,和需要生存必需要吃的大脑数量b.总共n行. 例子输入 3 4 5 3 3 4 3 例子输出 NO BRAINS MMM BRAINS M ...
- Windows 7 Ultimate with SP1(x64) MSDN 官方简体中文旗舰版原版
Windows 7 Ultimate(旗舰版)64位功能齐全,所有其他版本所具有的高级功能它都有!它是最好的Windows 7操作系统.旗舰版很受网友欢迎,下载速度飞快. MSDN 我告诉你下载官网: ...
- jni和C++通信中文乱码的问题
转自 http://www.cnblogs.com/bluesky4485/archive/2011/12/13/2285802.html 首先,需要明确几个关于编码的基本概念: java内部是使用的 ...
- 短网址ShortUrl的算法
场景: 我们在新浪微博上公布网址的时候.微博会自己主动判别网址.并将其转换.比如:http://t.cn/hrYnr0. 为什么要这样做的,原因我想有这样几点: 1.微博限制字数为140字一条,那么假 ...