前端开发whqet,csdn,王海庆,whqet,前端开发专家
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
== 带时间轴折线图==全屏预览==在线编辑==下载收藏==
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//from echarts example
<body>
<div id="main" style="height:400px;"></div>
...
<script src="example/www2/js/dist/echarts-all.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
</script>
</body>
| 分组 | 参数 | 类型 | 默许值 | 含义 |
| 参数设置 | data | Array | [] | 时间轴列表，同时也是轴label内容 |
| show | boolean | true | 显示策略，可选为：true（显示） | false（隐藏） |
| type | string | 'time' | 模式是时间类型，时间轴间隔根据时间跨度计算，可选为：'number' |
| notMerge | boolean | false | 时间轴上多个option切换时是不是进行merge操作，同setOption第2个参数（详见实例方法） |
| realtime | boolean | true | 拖拽或点击改变时间轴是不是实时显示，在不支持Canvas的阅读器中该值自动强迫置为false |
| 播放控制 | autoPlay | boolean | false | 是不是自动播放 |
| loop | boolean | true | 是不是循环播放 |
| playInterval | number | 2000 | 播放时间间隔 |
| currentIndex | number | 0 | 当前索引位置，对应options数组，用于指定显示特定系列 |
| 样式设置 | width | number|string | 自适应 | 时间轴宽度，默许为总宽度 - x - x2，指定width后将疏忽x2。 |
| height | number|string | 50 | 时间轴高度 |
| x | number|string | 80 | 时间轴左上角横坐标 |
| y | number|string | null | 时间轴左上角纵坐标，默许无，随y2定位， |
| x2 | number|string | 80 | 时间轴右下角横坐标 |
| y2 | number|string | 0 | 时间轴右下角纵坐标 |
| padding | number|Array | 5 | 内边距，单位px,接受数组分别设定上右下左侧距，同css。 |
| backgroundColor | color | 'rgba(0,0)' | 背景色彩，默许透明。 |
| borderWidth | number | 0 | 边框线宽 |
| borderColor | color | '#ccc' | 边框色彩 |
| controlPosition | string | 'left' | 播放控制器位置，可选为：'left' | 'right' | 'none' |
| lineStyle | Object | 参见代码 | 时间轴轴线样式，lineStyle控制线条样式，（详见lineStyle） |
| label | Object | 参见代码 | 时间轴标签文本 |
| checkpointStyle | Object | 参见代码 | 时间轴当前点 |
| controlStyle | Object | 参见代码 | 时间轴控制器样式，可指定正常和高亮色彩 |
| symbol | string | 'emptyDiamond' | 轴点symbol，同serie.symbol |
| symbolSize | number | 4 | 轴点symbol，同serie.symbolSize |
{
show: true,interval: 'auto',rotate: 0,formatter: null,textStyle: {
color: '#333'
}
}
{
symbol : 'auto',symbolSize : 'auto',color : 'auto',borderColor : 'auto',borderWidth : 'auto',label: {
show: false,textStyle: {
color: 'auto'
}
}
}
{
normal : { color : '#333'},emphasis : { color : '#1e90ff'}
}
var option = {
//时间轴设置
timeline : {},//时间点设置
options : [
//第1个时间点
{},//第2个时间点
{},//...
]
}
var option = {
//时间轴设置
timeline : {
//时间轴时间列表
data:[
'2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01'
],//自定义处理，只显示年份
label:{
formatter : function(s) {
return s.slice(0,4);
}
},//时间轴的位置设定
height:80,x:50,padding:[40,10,10],//时间轴播放控制
autoPlay : true,playInterval : 2000
},//...
]
}
var option = {
//时间轴设置
timeline : {
//时间轴时间列表
data:[
'2002-01-01',//时间点设置
options : [
//第1个时间点
//2002年数据表,新增内容
{
title:{
text:'2002年货物销量图',subtext:'纯属捏造，如有雷同，人品爆发。'
},//设置提示
tooltip: {
show: true
},//设置图例
legend: {
data:['销量']
},//设置坐标轴
xAxis : [
{
type : 'category',data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"],axisLabel:{
margin:⑵0,textStyle:{
color:'#999',fontWeight:'bold'
}
}
}
],yAxis : [
{
type : 'value'
}
],series : [
{
type:'line',data:[5,20,38,24,32],//绘制平均线
markLine : {
data : [
{type : 'average',name: '平均值'}
]
},//绘制最高最低点
markPoint : {
data : [
{type : 'max',name: '最大值'},{type : 'min',name: '最小值'}
]
}
}
]
},//...
]
}
var option = {
//时间轴设置
timeline : {
//时间轴时间列表
data:[
'2002-01-01',//时间点设置
options : [
//第1个时间点
//2002年数据表
{
title:{
text:'2002年货物销量图',//第2个时间点
//2003年数据表，新增内容
{
title:{
text:'2003年货物销量图',data:[10,36,18,26,16,34],//第3个时间点
{},//...
]
}
服务热线 19970861797
