<!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之折线图介绍及使用的更多相关文章

  1. echarts版本折线图

    1.效果如下:         绘制折线图,应该算是说echarts中使用最简单也算使用频率最高的一种功能了吧.根据官网列子能找出规律,只是有些属性对于初接触者来说,会有点陌生,不过仔细阅读一下还是不 ...

  2. Echarts line折线图使用(vue)

    实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...

  3. ECharts使用—折线图动态加载

    最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...

  4. 移动端引用echarts的折线图

          移动端写一个图表引用echarts,highcharts插件,本次要找一个能够显示最新数据的折线图,最后只找到显示最大值: 找到echarts的实例:记一下个各功能.   <!DOC ...

  5. echarts实现折线图

    前端框架使用的angular,折线图使用echarts实现. 这里实现的折线图只是简单是折线图,折线图显示在table中,不需要xy轴的数据说明. 1. item.component.html < ...

  6. Echarts案例-折线图

    一:先在官网下载 https://www.echartsjs.com/zh/download.html 然后再建立工程,导入这两个包: 写代码: <!DOCTYPE html> <h ...

  7. echarts自定义折线图横坐标时间间隔踩坑总结

    折线图需求:横坐标为时间,要求按一定间隔展示,鼠标移至折线上间隔时间内的数据也可展示 其实很简单的一个配置就可搞定,但在不熟悉echarts配置的情况下,就很懵逼 xAxis: { boundaryG ...

  8. 使用Echarts实现折线图的一点总结

    使用Echarts的一点总结 1.安装,我使用得vue cnpm install echarts --save 2.在入口文件main.js中注册,并使用 // 引入折线图 echarts impor ...

  9. ECharts绘制折线图

    首先看实现好的页面 实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require ...

随机推荐

  1. Dubbo源码学习总结系列七---注册中心

    Dubbo注册中心是框架的核心模块,提供了服务注册发现(包括服务提供者.消费者.路由策略.覆盖规则)的功能,该功能集中体现了服务治理的特性.该模块结合Cluster模块实现了集群服务.Dubbo管理控 ...

  2. 【错误】Publishing to Tomcat'has encountered a problem

    tomcat 启动工程时候出现 Publishing to Tomcat'has encountered a problem错误 解决方案 之后重启tomcat 就可以正常启动了

  3. 7——C++类的使用

     定义了一个类之后,便可以如同用int.double等类型符声明简单变量一样,创建该类的对象,称为类的实例化.           类的定义实际上是定义了一种类型,类不接收或存储具体的值,只作为生成具 ...

  4. Redirecting to /bin/systemctl restart mysql. service Failed to restart mysql.service: Unit not found.

    使用如下命令操作mysql即可: systemctl restart mysqld.service systemctl start mysqld.service systemctl stop mysq ...

  5. [Ctsc2015]misc

    https://lydsy.com/JudgeOnline/problem.php?id=4055 题解 观察题目要我们求的东西: \[ ans[k]=\sum_{i}\sum_j \frac{a_i ...

  6. [CSP-S模拟测试]:赛（贪心+三分）

    题目描述 由于出题人思维枯竭所以想不出好玩的背景.有$n$个物品,第$i$个物品的价格是$v_i$,有两个人,每个人都喜欢$n$个物品中的一些物品.要求选出正好$m$个物品,满足选出的物品中至少有$k ...

  7. .Net服务组件（ServicedComponent）简介及其使用

    .NET Enterprise Services 为企业应用程序提供重要的基础结构.COM+ 为企业环境中部署的组件编程模型提供服务结构.System.EnterpriseServices命名空间向 ...

  8. 【面经分享】前端小白半年准备，成功进入bat

    先介绍下背景 非211,985本科毕业.一年半PHP经验,一年半前端经验,前端一直在做React开发. 半年之前,我是一个前端小小小白.多么小白呢? css调样式全靠试. 盒模型,好像知道是啥?好像又 ...

  9. edusoho迁移

    1.目录指向web,index文件设为app.php <VirtualHost *:8000> ServerAdmin abcd@mail.com DocumentRoot "E ...

  10. 跨域、this指向

    不要再问我跨域的问题了: https://segmentfault.com/a/1190000015597029?utm_source=tag-newest 不要再问我this的指向问题了: http ...