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 ...
随机推荐
- jsp页面随页面初始化加载js函数
1 <%@ page language="java" import="java.util.*" pageEncoding="gbk"% ...
- C# 模拟页面登录
using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...
- 十大热门AI芯片
资料来源:头条<人工智能影响力报告>中的人工智能十大热门芯片 iPhone X内部搭载了一颗全新定制的处理器——A11 Boinic,用来承担人脸识别和移动支付的工作负荷.双核心A11芯片 ...
- VPS Linux修改root密码
hosteons VPS 没有提供在网页控制面板里修改root密码的选项,但是可以通过Rescue模式吃查看root密码以及 有重置root密码为随机值的选项. 在重置root密码为随机值后,进入系统 ...
- 如何判断当前LINUX系统启用了ASLR
内核参数randomize_va_space用于控制系统级ASLR 0 关闭ASLR 1 mmap base.stack.vdso page将随机化.这意味着.so文件将被加载到随机地址.链接时指定了 ...
- Intellij IDEA 插件开发秘籍
来这里找志同道合的小伙伴! 这里总结一下 Intellij IDEA 插件开发的知识,供大家参考,本篇文章包含以下内容: 开发环境搭建 Component 介绍 Extension Point And ...
- flask之视图函数从前端接收数据的方法
一:从前端接收查询字符串 query-string 注意:get和post都可以在url后面添加查询字符串?a=1&b=2 测试工具:postman 1:get方式接收 视图函数 from ...
- LSTM 神经网络输入输出层
今天终于弄明白,TensorFlow和Keras中LSTM神经网络的输入输出层到底应该怎么设置和连接了.写个备忘. https://machinelearningmastery.com/how-to- ...
- 阿里HBase的数据管道设施实践与演进
摘要:第九届中国数据库技术大会,阿里巴巴技术专家孟庆义对阿里HBase的数据管道设施实践与演进进行了讲解.主要从数据导入场景. HBase Bulkload功能.HImporter系统.数据导出场景. ...
- jsp文件断点上传
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...