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 各个类 ...
随机推荐
- matplotlib python
#导入包 import matplotlib.pyplot as plt import numpy as np # 从[-1,1]中等距去50个数作为x的取值 x = np.linspace(-1, ...
- 2. mysql 语句
基础语句 创建表 DROP TABLE IF EXISTS student;CREATE TABLE student ( id ) NOT NULL AUTO_INCREMENT, sname ) N ...
- 【Python】【数据库】
#[[数据库]]'''MySQL是Web世界中使用最广泛的数据库服务器.SQLite的特点是轻量级.可嵌入,但不能承受高并发访问,适合桌面和移动应用.而MySQL是为服务器端设计的数据库,能承受高并发 ...
- 【Python】【电子邮箱】
#[[电子邮件]]'''Email的历史比Web还要久远,直到现在,Email也是互联网上应用非常广泛的服务. 几乎所有的编程语言都支持发送和接收电子邮件,但是,先等等,在我们开始编写代码之前,有必要 ...
- JaveWeb 公司项目（3）----- 通过Thrift端口获取数据库数据
前面两篇博客的内容主要是界面搭建的过程,随着界面搭建工作的完成,网页端需要加入数据,原先的B/S架构中C#通过Thrift接口获取数据,所以在网页端也沿用这个设计 首先,新建一个Maven下的Web项 ...
- java static方法不能被重写@Override
重写方法的目的是为了多态,或者说:重写是实现多态的前提,即重写是发生在继承中且是针对非static方法的. 语法上子类允许出现和父类只有方法体不一样其他都一模一样的static方法,但是在父类引用指向 ...
- Python day1_Base1笔记
1.helloworld print('helloword') 2.输入输出 a=input('Please input a value') print(a) 3.标识符 1.由字母数字下划线构成 2 ...
- leecode第二十一题（合并两个有序链表）
/** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...
- sql server auto increment - trace flag 272
从 sql 2012 开始, 微软为了让 insert 时 auto increment 快一些,做了一个 cache 的机制. 这个机制虽然好,但是也有麻烦的情况,如果你的 sql 突然 resta ...
- zabbix自定义监控方式