echarts之折线图介绍及使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>line</title>
<script src="../js/echarts.js"></script>
</head>
<body>
<!-- step 2:准备一个div的dom元素,用于渲染Echarts图表 -->
<div id="main" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
// 图表实例化
// step 3:初始化Echarts图表
var mychart = echarts.init(document.getElementById("main"));
// 图表使用
// step 4:指定图表的配置项和数据
var option = {
title : {
text: '未来一周气温变化',
subtext: '纯属虚构',
},
tooltip : {
show: true,
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量'],
left: "left"
},
toolbox: {
show : true,
orient: 'horizontal',
left: 'right',
top: 'top',
color: ['#1e90ff','#22bb22','#4b0082','#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
borderColor: '#ccc', // 工具箱边框颜色
borderWidth: 0, // 工具箱边框线宽
padding: 5, // 工具箱内边距
showTitle: true,
feature : {
mark: {show: true,title: {mark:'辅助线-开关',markUndo:'辅助线-删除',markClear:'辅助线-清空'},lineStyle:{width:1,color:'#1e90ff',type:'dashed'}},
dataZoom:{
show:true,title:'数据视图',readOnly:true,
lang:['数据视图','美团','刷新'],
optionToContent: function(opt){
console.log(opt);
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '<table style="width:100%;text-align:center"><tbody><tr>'+'<td>时间</td>'+'<td>'+series[0].name+'</td>'+'<td>'+series[1].name+'</td>'+'</tr>';
for(var i=0,l=axisData.length;i<l;i++){
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}
},
dataView : {show: true, readOnly: false},
magicType : {show: true, title:{line:'动态类型切换-折线图',bar:'动态类型切换-柱形图', stack:'动态类型切换-堆积',tiled:'动态类型切换-平铺'}, type: ['line', 'bar','stack','tiled']},
restore : {show: true,title:'还原',color:'black'},
saveAsImage : {show: true,title:'保存为图片',type:'jpeg',lang:['点击本地保存']}
}
},
calculable : true,
dataZoom:{
show: true,
realtime: true,
start: 20,
end: 80
},
xAxis : [
{
type : 'category',
boundaryGap: false, // 类目起始和结束两端空白策略,默认true留空,false则顶头
data : function(){
var list = [];
for(var i=1;i<=30;i++){
list.push('2013-03-'+i);
}
return list;
}()
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'最高',
type:'line',
data:function(){
var list = [];
for(var i=1;i<=30;i++){
list.push(Math.round(Math.random()*30));
}
return list;
}()
},
{
name:'最低',
type:'line',
data:function(){
var list = [];
for(var i=1;i<=30;i++){
list.push(Math.round(Math.random()*10));
}
return list;
}()
}
]
};
// step 5:设置图表配置项。使用刚指定的配置项和数据显示图表
mychart.setOption(option);
</script>
</body>
</html>
echarts之折线图介绍及使用的更多相关文章
- echarts版本折线图
1.效果如下: 绘制折线图,应该算是说echarts中使用最简单也算使用频率最高的一种功能了吧.根据官网列子能找出规律,只是有些属性对于初接触者来说,会有点陌生,不过仔细阅读一下还是不 ...
- Echarts line折线图使用(vue)
实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...
- ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
- 移动端引用echarts的折线图
移动端写一个图表引用echarts,highcharts插件,本次要找一个能够显示最新数据的折线图,最后只找到显示最大值: 找到echarts的实例:记一下个各功能. <!DOC ...
- echarts实现折线图
前端框架使用的angular,折线图使用echarts实现. 这里实现的折线图只是简单是折线图,折线图显示在table中,不需要xy轴的数据说明. 1. item.component.html < ...
- Echarts案例-折线图
一:先在官网下载 https://www.echartsjs.com/zh/download.html 然后再建立工程,导入这两个包: 写代码: <!DOCTYPE html> <h ...
- echarts自定义折线图横坐标时间间隔踩坑总结
折线图需求:横坐标为时间,要求按一定间隔展示,鼠标移至折线上间隔时间内的数据也可展示 其实很简单的一个配置就可搞定,但在不熟悉echarts配置的情况下,就很懵逼 xAxis: { boundaryG ...
- 使用Echarts实现折线图的一点总结
使用Echarts的一点总结 1.安装,我使用得vue cnpm install echarts --save 2.在入口文件main.js中注册,并使用 // 引入折线图 echarts impor ...
- ECharts绘制折线图
首先看实现好的页面 实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require ...
随机推荐
- 01. Linux-Kali系统网卡配置
配置网卡操作: vim /etc/network/interfaces auto eth0iface eth0 inet static 配置eth0使用默认的静态地址address 192.168.1 ...
- 记录cobbler报错
出现下面这个错误解决方法 httpd does not appear to be running and proxying cobbler, or SELinux is in the way. Ori ...
- git 日常 常用命令
初始化git git init 第一次拉代码: 方式1:git clone git clone https://git.oschina.net/*****.git (https远程仓库地址) 方式2: ...
- struts2+ajax 前后端传值
摘要: 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的数据,并转换为json类型模式数据 3.配置struts.xml文件 4.页面脚本接受并处理数 ...
- 将HTML转IMAGE
chrome --enable-logging --headless --disable-gpu --screenshot=d:\chrome.jpg --hide-scrollbars --wind ...
- spring boot和邮件服务
1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址
- 数据库的特性与隔离级别和spring事务的传播机制和隔离级别
首先数据库的特性就是 ACID: Atomicity 原子性:所有事务是一个整体,要么全部成功,要么失败 Consistency 一致性:在事务开始和结束前,要保持一致性状态 Isolation 隔离 ...
- [CSP-S模拟测试]:砖块（模拟）
题目描述 在一个二维网格平面上,一个网格的坐标由其左下角的点的坐标定义$(x,y)$.在一个二维网格平面上,一个网格的坐标由其左下角的个点的坐标定义$(0,0)$的区域中,此时存在高度为$k$的初始砖 ...
- BZOJ 5170: Fable
离散化+树状数组 求当前位之前是否有k位比它大 这样的话它就需要前移k位 剩下的按照原来的顺序依次填入 其实我觉得sort一下就可以做出来了 太久没写树状数组了 所以写了一下树状数组 #include ...
- day12—jQuery ui引入及初体验
转行学开发,代码100天——2018-03-28 按照所下载教学视频,今天已进行到jQuery UI的学习中.注:本人所用教学视频不是太完整,介绍的内容相对简单,有些只是带过.其他时间中,仍需继续针对 ...