echarjs—阿里历年双十一销售数据统计及预测
阿里双十一数据统计
<!DOCTYPE html>
<html>
<head>
<title>阿里历年双十一销售数据统计及预测</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head> <body>
<section class="hj-second-page-section">
<div class="container-fluid">
<div class="rows">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="rows">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 hj-jumbotron-div">
<div class="panel panel-primary ng-scope">
<!-- pannel start -->
<div class="panel-body vc-pannel-body-toggle">
<div class="rows ng-scope">
<div class="panel-body vc-msg-panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div id="rt_chart1" style=""></div>
</div>
</div>
</div>
</div>
</div>
<!-- pannel end -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="js/echarts2.js"></script>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
/**
* @description 绘制折线图
* @date 2019-11-13
* @param
*/
function initChart1() {
$("#rt_chart1").height(460);
$("#rt_chart1").width(1005);
$("#rt_chart1").css("border","1px solid #ddd");
var myChart1 = echarts.init(document.getElementById("rt_chart1")); var option1 = {
title: {
text: '阿里历年双十一销售数据统计及预测',
//subtext: '数据来源于网络',
sublink: '',
left: 'center'
},
tooltip : {
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
legend: {
data:[2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020]
},
xAxis: {
type: 'category',
data: [2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020]
},
yAxis: {
type: 'value'
},
series: [{
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#0099ff'
}
}
}
},
data: [0.5,9.36,52.0,191.0,350.0,571.0,912.0,1207.0,1682.0,2135.0,2684.0,3036.0],
type: 'line'
}]
}; // 为echarts对象加载数据
myChart1.setOption(option1);
} initChart1();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>阿里历年双十一销售数据统计及预测</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head> <body>
<section class="hj-second-page-section">
<div class="container-fluid">
<div class="rows">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="rows">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 hj-jumbotron-div">
<div class="panel panel-primary ng-scope">
<!-- pannel start -->
<div class="panel-body vc-pannel-body-toggle">
<div class="rows ng-scope">
<div class="panel-body vc-msg-panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div id="rt_chart1" style=""></div>
</div>
</div>
</div>
</div>
</div>
<!-- pannel end -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="js/echarts2.js"></script>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
/**
* @description 绘制柱状图
* @date 2019-11-13
* @param
*/
function initChart1() {
$("#rt_chart1").height(460);
$("#rt_chart1").width(1205);
$("#rt_chart1").css("border","1px solid #ddd");
var myChart1 = echarts.init(document.getElementById("rt_chart1")); //var option1 = {
var option1 = {
title : {
text: '阿里历年双十一销售数据统计及预测',
//subtext: '数据来源于网络',
left: 'center'
},
color: ['#DB4B4B'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data:[2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020],
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval:0
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#0099ff'
}
}
}
},
name:'亿元',
type:'bar',
barWidth: '60%',
data:[0.5,9.36,52.0,191.0,350.0,571.0,912.0,1207.0,1682.0,2135.0,2684.0,3036.0]
}
]
}; // 为echarts对象加载数据
myChart1.setOption(option1);
} initChart1();
</script>
</body>
</html>
echarjs—阿里历年双十一销售数据统计及预测的更多相关文章
- 浅析 阿里 OceanBase 双十一 淘宝天猫 天量交易 承载能力 原理
我们先看看 这 2 篇文章: <秘诀!支付宝支撑双十一4200万次/秒的数据库请求峰值的技术实现> https://mp.weixin.qq.com/s?__biz=MzI3MzEzMD ...
- 阿里历年经典Java面试题汇总，想进BAT你还不快收藏！
转载:https://mp.weixin.qq.com/s/M8YyxloxZnMACH9QCQN7HA Volatile的特征: A.禁止指令重排(有例外) B.可见性 Volatile的内存语义: ...
- 阿里历年经典Java面试题汇总
Volatile的特征: A.禁止指令重排(有例外) B.可见性 Volatile的内存语义: 当写一个volatile变量时,JMM会把线程对应的本地内存中的共享变量值刷新到主内存. 当读一个vol ...
- iOS开发工具篇－AppStore统计工具 (转载)
随着iOS开发的流行,针对iOS开发涉及的方方面面,早有一些公司提供了专门的解决方案或工具.这些解决方案或工具包括:用户行为统计工具(友盟,Flurry,Google Analytics等), App ...
- 阿里云资深DBA专家罗龙九:云数据库十大经典案例分析【转载】
阿里云资深DBA专家罗龙九:云数据库十大经典案例分析 2016-07-21 06:33 本文已获阿里云授权发布,转载具体要求见文末 摘要:本文根据阿里云资深DBA专家罗龙九在首届阿里巴巴在线峰会的&l ...
- 2018年Android的保活方案效果统计
一.常见保活方案 1.监听广播:监听全局的静态广播,比如时间更新的广播.开机广播.解锁屏.网络状态.解锁加锁亮屏暗屏(3.1版本),高版本需要应用开机后运行一次才能监听这些系统广播,目前此方案失效.可 ...
- 教你用ActiveReports分析京东双十一数据的价值
随着双十一购物盛会落下帷幕,各大电商平台纷纷公布出自己今年的成绩.与其它同行不同的是,京东除了公布1598亿的线上下单金额,还公布了线上线下融合的战果. 面对京东线上.线下海量数据源,我们该如何进行整 ...
- iOS开发工具篇－AppStore统计工具
本文转载至 http://mobile.51cto.com/hot-418183.htm 随着iOS开发的流行,针对iOS开发涉及的方方面面,早有一些公司提供了专门的解决方案或工具.这些解决方案或工具 ...
- iOS开发工具篇-AppStore统计工具
苹果官方的iTunes Connect提供的销售数据统计功能比较弱,例如只能保存最近30天的详细销售数据,界面丑陋, 无法查看App的排名历史变化情况等. 早有一些公司提供了专门的解决方案或工具.这些 ...
随机推荐
- Linux实验：NTP网络时间服务器
[实验目的] 1)掌握时间服务器的搭建方法 2)掌握客户机与时间服务同步时间的方法[实验原理] NTP服务器[Network Time Protocol(NTP)]是用来使计算机时间 ...
- linux服务器管理常用命令
1.ps命令 (Processes Status) ps这个命令是查看系统进程,ps 是显示瞬间行程的状态,并不动态连续. ==============ps 的参数说明================ ...
- 算法- 求解最大平均值的子树-经典dfs题目
给一棵二叉树,找到有最大平均值的子树.返回子树的根结点. Example 样例1 输入: {1,-5,11,1,2,4,-2} 输出:11 说明: 这棵树如下所示: 1 / \ -5 11 / \ / ...
- numpy函数库中一些常用函数的记录
##numpy函数库中一些常用函数的记录 最近才开始接触Python,python中为我们提供了大量的库,不太熟悉,因此在<机器学习实战>的学习中,对遇到的一些函数的用法进行记录. (1) ...
- 合并K个有序链表
方法一:采用归并的思想将链表两两合并,再将两两合并后的链表做同样的操作直到合并为只有一个新的链表为止. 归类的时间复杂度是O(logn),合并两个链表的时间复杂度是O(n),则总的时间复杂度大概是O( ...
- async-validator：Element表单验证
转载文章:Element表单验证(2) Element表单验证(2) 上篇讲的是async-validator的基本要素,那么,如何使用到Element中以及怎样优雅地使用,就在本篇. 上篇讲到a ...
- 五大开源 Web 代理服务器横评：Squid、Privoxy、Varnish、Polipo、Tinyproxy
https://linux.cn/article-7119-1.html Web 代理软件转发 HTTP 请求时并不会改变数据流量.它们可以配置成透明代理,而无需客户端配置.它们还可以作为反向代理放在 ...
- .net 代码调用cmd执行.exe程序,获取控制台输出信息
使用.net core 对老项目升级, .net core 使用TripleDES.Create() 加密众iv字节限制 与 framework中的不同, 新项目还需要兼容老项目版本,还不想通过web ...
- MySQL 详细解读undo log ：insert undo,update undo
转自aobao.org/monthly/2015/04/01/ 本文是对整个Undo生命周期过程的阐述,代码分析基于当前最新的MySQL5.7版本.本文也可以作为了解整个Undo模块的代码导读.由于涉 ...
- H5如何实现关闭当前页面，跳转到新页面？
小程序有此功能的跳转方法. 那么H5如何实现该功能? 很简单. location.replace('new.html') 这个方法可以实现 关闭当前页面,跳转到新页面 的效果. 而 windo ...