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 ...
随机推荐
- js中基本数据类型与引用数据类型的本质区别
代码 /** * 基本数据类型:string, number, boolean, null, undefined. * * 说明: * 基本数据类型的变量是保存在栈内存中的,基本数据类型的值 * 直接 ...
- [转]使用flask实现mock server
什么是mock server: http://www.testclass.net/interface/mock_server 使用flask 实现 mock server : http://www. ...
- 基于cdn方式的vue+element-ui的单页面架构
一.下载vue2.x,下载element-ui.js以及css 二.html文件 <!DOCTYPE html> <html> <head> <meta ch ...
- SSM三大框架整合梳理
整合步骤 0.搭建动态web项目 1.需要的jar包 spring(包括springmvc) mybatis相关jar包 mybatis与spring的整合包(个人建议尽量使用高版本的,避免出现一些奇 ...
- Linux g++ 编译添加 pthread
If you are going to compile a C program with pthread.h in LINUX using GCC or G++ you will have to us ...
- [洛谷P2459] SDOI2011 消耗战
问题描述 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总部在编号为1的岛屿,而且他们已经没有足够多的能源维系战斗,我军胜利在望.已知 ...
- bio编程示例
直接干代码,用BIO写一个Server端,然后使用telnet模拟客户端发送数据 import java.io.IOException; import java.io.InputStream; imp ...
- Dubbo学习-4-dubbo简单案例-2-服务提供者和消费者配置
在上一篇帖子的基础上,开始使用dubbo来实现RPC调用: 根据dubbo的架构图可知,需要做以下几件事情: 1.将服务提供者注册到注册中心(暴露服务) (1)引入dubbo依赖, 这里依赖2.6.2 ...
- 学习日记13、ajax同时提交from表单和多个参数
if ($("form").valid()) { $.ajax({ url: "@Url.Action("EditCusAndCusCard")&qu ...
- macOS 10.15 Catalina Apache设置：多个PHP版本
第1部分:macOS 10.15 Catalina Web开发环境 在macOS上开发Web应用程序真是令人高兴.有许多设置开发环境的选项,包括广受欢迎的MAMP Pro,它在Apache,PHP和M ...