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 ...
随机推荐
- AOS and clustering
原文转载:http://sjakalax.blogspot.com/2010/10/aos-and-clustering.html AOS and clustering hi, There s ...
- 全局解释锁GIL
''' 定义: In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple native th ...
- FMC141-4路 250Msps/16bits ADC, FMC板卡
FMC141-4路 250Msps/16bits ADC, FMC板卡 一.产品概述: 本板卡基于 FMC 标准板卡,实现 4 路 16-bit/250Msps ADC 功能.遵循 VITA 57 标 ...
- Fiddler过滤css、js、图片等静态文件
REGEX:(?insx)/[^\?/]*\.(css|ico|jpg|png|gif|bmp|wav)(\?.*)?$ REGEX:(?insx)/[^\?/]*\.(action|do)(\?.* ...
- Sass:@error
@error 和 @warn.@debug 功能是如出一辙. @mixin error($x){ @if $x < 10 { width: $x * 10px; } @else if $x == ...
- Flutter-Boxdecoration邊框線, 圓角
decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), border: Border( top: BorderSide( ...
- C指针，&，*，指针的指针
C指针: 指向变量的地址,想象成房间号 &: 取地址符号 *:间接访问符号, 访问p所存地址的内容 #include <iostream> int main(int argc, c ...
- php array_search()函数 语法
php array_search()函数 语法 作用:在数组中搜索某个键值,并返回对应的键名.dd马达生产厂家 语法:array_search(value,array,strict) 参数: 参数 描 ...
- 基于mpvue搭建小程序项目框架
简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序 ...
- 解决Windows2003 Server终端服务120天限制
用过windows server 2003做服务器的人都知道,windows2003的性能安全性比以前的windows版本高出很多,但是也带来很多麻烦.其中服务器最重要的远程管理“终端服务”居然要求授 ...