Echarts 简单报表系列二:折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="pic4" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
<script>
var myChart13 = echarts.init(document.getElementById('pic4'));
var data = [];
option15 = {
title: {
text: '曲线',
},
tooltip: {
trigger: 'axis', },
legend: {
data:['昨日(11月8日)','今日(11月9日)']
},
grid: {
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: false,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
color:["red","#CD3333"],
xAxis: {
type: 'category',
boundaryGap: false,
data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
},
yAxis: {
type: 'value',
name: '单位(kW)',
axisLabel: {
formatter: '{value}'
}
},
series: [
{
name:'昨日(11月8日)',
type:'line',
data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276],
itemStyle: {
normal: {
//color: function(params) {
// var colorList = ['#2eddc1','#FCCE10','#E87C25','#277bbb','#E87fff','#277aaa'];
// //若返回的list长度不足,不足部分自动显示为最后一个颜色
// return colorList[params.dataIndex]
// },
label: {
show: true,
position: 'top'
}
}
}
},
{
type:'line',
name : '今日(11月9日)',
data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156],
}
]
}; myChart13.setOption(option15);
</script>
</body>
</html>
效果如下:
Echarts 简单报表系列二:折线图的更多相关文章
- Echarts 简单报表系列四:雷达图
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Echarts 简单报表系列三:饼状图
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Echarts 简单报表系列一:柱状图
见代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 练习: bs4 简单爬取 + matplotlib 折线图显示 (关键词,职位数量、起薪)
要看一种技术在本地的流行程度,最简单的就是找招聘网站按关键词搜索. 比如今天查到的职位数量是vue 1296个,react 1204个,angular 721个.国际上比较流行的是react,本地市场 ...
- echarts爬坑 : 怎么Line折线图设置symbol:none后Label不见了?
用 echarts 时遇到了一个奇奇怪怪的问题. 这是一张折线图. 本来这个图是有数字显示的. series : [ { name:'搜索引擎', type:'line', stack: '总量', ...
- R in action读书笔记(15)第十一章 中级绘图 之二 折线图 相关图 马赛克图
第十一章 中级绘图 本节用到的函数有: plot legend corrgram mosaic 11.2折线图 如果将散点图上的点从左往右连接起来,那么就会得到一个折线图. 创建散点图和折线图: &g ...
- echarts入门基础,画折线图
注意:一定要自己引入echarts库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- RDLC报表系列(二) 行分组
接上一篇文章的内容,今天来说的是行分组.还是打开demo1.rdlc界面,拖入一个文本框和表 1.在表中随便选择一个字段,不然在添加行组的时候不会自动提示.我这里是选择的Dept 2.在下面的行组中右 ...
- arcgis api 3.x for js 入门开发系列二十二地图模态层(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
随机推荐
- 2、My Scripts
http://www.cnblogs.com/image-eye/archive/2011/10/26/2220405.html 注释详解 1.打印选择菜单,按照选择项一键安装不同的web服 ...
- 4、python内置类型(0529)
支持运算:索引,切片,min(), max(), len()等 支持操作:对象的自有的方法 对字符串操作的内置方法获取:str. //敲tab键补全 获取某个内建命令的属性和方法列表:dir( ...
- JaveWeb 公司项目(5)----- Java获取当前时间的年月日以及同Thrift格式的转化
随着项目进度的逐步完成,数据传输和界面基本上已经搭建完成,下面就是一些细节部分的修改 今天博文的主要内容说的是获取当前的时间和同Thrift类型的转化 和C#类似,java也有一个时间类Date,加载 ...
- Linux简单入门
1.目录切换命令 cd usr 切换到该目录下usr目录 cd ../ 切换到上一层目录 cd / 切换到系统根目录 cd ~ 切换到用户主目录 cd - 切换到上一个所在目录 2.目录的操作命令 1 ...
- 关于git提示“warning: LF will be replaced by CRLF”终极解答
一.发现问题 windows平台下使用git add,git deploy 文件时经常出现“warning: LF will be replaced by CRLF” 的提示. 网上很多解决办法提到: ...
- git批量删除文件和批量提交
1. 单个删除文件: ① 通常直接在文件管理器中把没用的文件删了,或者用rm命令删了:(可选操作,可直接执行②删除) $ rm test.txt ② 确实要从版本库中删除该文件,那就用命令git rm ...
- Node.js 常用命令
1. 查看node版本 node --version 2. 查看npm 版本,检查npm 是否正确安装. npm -v 3. 安装cnpm (国内淘宝镜像源),主要用于某些包或命令程序下载不下来的情况 ...
- Android application backup
警告 AndroidMenifest中application标签下android:allowBackup="true"时,会警告: Warning:On SDK version 2 ...
- discuz的学习和部署
1.http://jingyan.baidu.com/article/b87fe19eb57ff252183568d9.html 下载好后安装一个mysql, 2.
- MATLAB 矩阵处理基础