echart整理中..

最新推荐文章于 2025-03-13 14:44:22 发布

痴人说梦丶

最新推荐文章于 2025-03-13 14:44:22 发布

阅读量1.2k

点赞数

分类专栏：技术

本文链接：https://blog.youkuaiyun.com/qq_18783269/article/details/62883678

版权

技术专栏收录该内容

28 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>echarts</title>

<script src="echarts.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
//一.公共选项:
//1.全图背景颜色:"#00fa9a"|"rgba(255,0,100,1)".r:红色值,正整数|百分数 g:绿色值,正整数|百分数 b:蓝色值,正整数|百分数 a:透明度,0~1之间数字
//默认为:"rgba(0,0,0,0)"
"backgroundColor":"rgba(0,0,255,0.5)",
//2.数值系列颜色列表:["#00fa9a","rgba(255,0,100,1)",..].当系列数量个数比颜色列表长度大时将循环选取
//默认为:['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed','#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0','#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700','#6b8e23','#ff00ff','#3cb371','#b8860b','#30e0e0']
"color":["rgba(255,0,0,1)","rgba(0,255,0,1)","rgba(0,0,255,1)"],
//3.是否渲染为图片:true|false|"png"|"jpeg"(不懂..)
//默认为:false
"renderAsImage":false,
//4.是否启用拖拽重计算特性:true|false.相关的还有calculableColor,calculableHolderColor,nameConnector,valueConnector(不懂..)
//默认为:false
"calculable":false,
//5.是否启用图表初始化动画:true|false.相关的还有addDataAnimation,animationThreshold,animationDuration,animationDurationUpdate,animationEasing
//默认为:true
"animation":true,

//二.组件选项:
//1.时间轴,每个图表最多仅有一个时间轴
"timeline":{
//1.1是否显示:true|false
//默认为:true
"show":true,
//1.2一级层叠控制:整数.每一个不同的zlevel将产生一个独立的canvas,相同zlevel的组件或图标将在同一个canvas上渲染.zlevel越高越靠顶层,canvas对象增多会消耗更多的内存和性能,并不建议设置过多的zlevel,大部分情况可以通过二级层叠控制z实现层叠控制
//默认为:0
"zlevel":0,
//1.3二级层叠控制:整数.同一个canvas(相同zlevel)上z越高越靠顶层
//默认为:4
"z":4,
//1.4模式:"time"|"number".时间轴间隔根据时间跨度自动计算
//默认为:"time"
"type":"time",
//1.4时间轴上多个option切换时是否进行merge操作:true|false.同setOption第二个参数
//默认为:false
"notMerge":false,
//1.5拖拽或点击改变时间轴是否实时显示:true|false.在不支持Canvas的浏览器中该值自动强制置为false
//默认为:true
"realtime":true,
//1.6时间轴左上角横坐标:整数|百分比字符串.数值单位px,支持百分比(字符串),如"50%"(显示区域横向中心)
//默认为:80
"x":80,
//1.7时间轴左上角纵坐标:整数|百分比字符串.数值单位px,支持百分比(字符串),随y2定位,如"50%"(显示区域纵向中心)
//默认为:null
"y":0,
//1.8时间轴右下角横坐标:整数|百分比字符串.数值单位px,支持百分比(字符串),如"50%"(显示区域横向中心)
//默认为:80
"x2":80,
//1.9时间轴左上角纵坐标:整数|百分比字符串.数值单位px,支持百分比(字符串),如"50%"(显示区域纵向中心)
//默认为:0
"y2":0,
//1.10时间轴宽度:整数|百分比字符串.数值单位px,指定width后将忽略x2.支持百分比(字符串),如"50%"(显示区域一半的宽度)
//默认为:总宽度-x-x2
"width":50,
//1.11时间轴高度:整数|百分比字符串.数值单位px,支持百分比(字符串),如"50%"(显示区域一半的高度)
//默认为:50
"height":50,
//1.12背景颜色:"#00fa9a"|"rgba(255,0,100,1)"
//默认为:"rgba(0,0,0,0)"
"color":"rgba(0,0,0,0)",
//1.13边框线宽:整数
//默认为:0
"borderWidth":0,
//1.14边框颜色:"#00fa9a"|"rgba(255,0,100,1)"
//默认为:"#CCC"
"borderColor":"#CCC",
//1.15内边距:整数|[整数].单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css
//默认为:5
"padding":5,
//1.16播放控制器位置:"left"|"right"|"none"
//默认为:"left"
"controlPosition":"left",
//1.17是否自动播放:true|false
//默认为:false
"autoPlay":false,
//1.18是否循环播放:true|false
//默认为:true
"loop":true,
//1.19播放时间间隔:整数.单位ms
//默认为:2000
"playInterval":2000,
//1.20时间轴轴线样式
//默认属性如下,其他属性详见文档
"lineStyle":{
"color":'#666',
"width":1,
"type":'dashed'
},
//1.21时间轴标签文本
//默认属性如下
"label":{
//1.21.1是否显示
//默认为true
"show":true,
//1.21.2挑选间隔:"auto"(自动隐藏显示不下的)|0(全部显示)|[整数]
//默认为:"auto"
"interval":"auto",
//1.21.3旋转角度:-90~90.正值为逆时针,负值为顺时针
//默认为:0,不旋转
"rotate":0,
//1.21.4间隔名称格式器:{string}(Template)|{Function}
//默认为null
"formatter":null,
//1.21.5文字样式
//默认属性如下,其他属性详见文档
"textStyle":{
"color":"#333"
}
},
//1.22时间轴当前点
//默认属性如下,其他属性详见文档
"checkpointStyle":{
//1.22.1当前点symbol
//默认为"auto".随轴上的symbol
"symbol":"auto",
//1.22.2当前点symbol大小
//默认为"auto".随轴上symbol大小
"symbolSize":"auto",
//1.22.3当前点symbol颜色
//默认为"auto".随当前点颜色,可指定具体颜色,如无则为"#1e90ff"
"color":"auto",
//1.22.4当前点symbol边线颜色
//默认为"auto"
"borderColor":"auto",
//1.22.5当前点symbol边线宽度
//默认为"auto"
"borderWidth":"auto",
//1.22.6时间轴当前点标签文本
//默认属性如下,其他属性同上
"label":{
"show":false,
"textStyle":{
"color":"auto"
}
}
},
//1.23时间轴控制器样式
//默认属性如下
"controlStyle":{
//1.23.1按钮大小:数字
//默认为:15
"itemSize":15,
//1.23.2按钮间隔:数字
//默认为:5
"itemGap":5,
//1.23.3正常
//默认属性如下
"normal":{
"color":"#333"
},
//1.23.4高亮
//默认属性如下
"emphasis":{
"color":"#1e90ff"
}
},
//1.24轴点symbol:字符串.同serie.symbol
//默认为:"emptyDiamond"
"symbol":"emptyDiamond",
//1.25轴点symbol:整数同serie.symbolSize
//默认为:4
"symbolSize":4,
//1.26当前索引位置:数字.对应options数组,用于指定显示特定系列
//默认为:0
"currentIndex":0,
//1.27时间轴列表:[字符串]同时也是轴label内容
//默认为:[]
"data":['2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01',
{ name:'2013-06-01', symbol:'emptyStar6', symbolSize:8 },
'2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01',
{ name:'2013-12-01', symbol:'star6', symbolSize:8 }]
},
"toolbox":{
"show":true,
"feature":{
"mark":{
"show":true,
"title":{
"markUndo":"删除辅助线",
"markClear":"清空辅助线",
"mark":"辅助线开关"
},
"lineStyle":{
"color":"#1e90ff",
"type":"dashed",
"width":2
}
},
"dataView":{
"show":true,
"title":"数据视图",
"readOnly":false,
"lang":[
"数据视图",
"关闭",
"刷新"
]
},
"magicType":{
"show":true,
"title":{
"bar":"柱形图切换",
"stack":"堆积",
"tiled":"平铺",
"line":"折线图切换"
},
"type":[
"line",
"bar"
]
},
"restore":{
"show":true,
"title":"还原"
},
"saveAsImage":{
"show":true,
"title":"保存为图片",
"type":"png",
"lang":[
"点击保存"
]
}
}
},
"tooltip":{
"trigger":"axis",
"formatter":"Temperature : <br/>{b}km : {c}°C"
},
"legend":{
"data":[
"高度(km)与气温(°C)变化关系"
]
},
"xAxis":[
{
"type":"value",
"axisLabel":{
"formatter":"{value} °C"
}
}
],
"yAxis":[
{
"data":[
0,10,20,30,40,50,60,70,80
],
"type":"category",
"axisLine":{
"onZero":false
},
"axisLabel":{
"formatter":"{value} km"
},
"boundaryGap":false
}
],
"series":[
{
"data":[
15,-50,-56.5,-46.5,-22.1,-2.5,-27.7,-55.7,-76.5
],
"name":"高度(km)与气温(°C)变化关系",
"type":"line",
"itemStyle":{
"normal":{
"lineStyle":{
"shadowColor":"rgba(0,0,0,0.4)"
}
}
},
"smooth":true
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>