echart时间轴设置详解

简介: 时间轴设置详解

c5d52ab18fb34f22ae17a6267b479e4c.gif

  timeline: {
   
   
            x: 'center',//时间轴X轴方向位置设置
            y: 'bottom',//时间轴Y轴方向位置设置
            width: '80%',//宽度
            height: 50,//高度
            lineStyle: {
   
   
              color: '#24bde0',//线颜色
              width: 2,//线宽
              type: 'solid',//线类型
            },
            checkpointStyle: {
   
      //轴线上点的样式
              color: '#e81515',//标记点的颜色
              borderColor: '#efb72c',//边框颜色
              symbolSize: 14,//大小
              borderWidth: 2,//标记点的边框宽度。
              shadowBlur: 5,//标记点的阴影模糊度。
              shadowColor: '#131313',//标记点的阴影颜色。
            },
            controlStyle: {
   
    //轴线上控制按钮的样式
            showPlayBtn: true,//是否显示播放按钮
            showPrevBtn: true,//是否显示向上翻页按钮
            showNextBtn: true,//是否显示向下翻页按钮
              color: '#2b1a84',//标记线的颜色
              borderColor: '#e51010',//边框线颜色
              borderWidth: 1,//边框宽度
              itemSize: 15//图例大小
              itemGap: 10,//图例间隔
            normal: {
   
     //普通状态显示
              color: '#ccc',
              borderColor: '#ccc'
            },
            emphasis: {
   
     //选中状态显示
              color: '#666',
              borderColor: '#666'
            }
            },
            axisType: 'category',//坐标轴类型://'value': 数值轴,适用于连续数据。2. 'category': 类目轴,适用于离散的类目数据。3. 'time': 时间轴,适用于时间数据。4. 'log': 对数轴,适用于数据呈现指数增长或指数衰减的情况。
             show:false,//是否隐藏时间轴
            autoPlay: true,//是否自动播放
            playInterval: 1000,//播放间隔时间
            data: [  //时间轴文字显示
              'a',  
              {
   
   //文字为b时设置该点的样式和鼠标放上去的显示框
                value: 'b', 
                tooltip: {
   
   
                  formatter: '{b} GDP达到一个高度'
                },
                symbol: 'diamond',//标记点的图形类型,默认为圆形,可选值包括:circle、rect、roundRect、triangle、diamond、pin、arrow、none等。
                symbolSize: 16,//标记点的大小
              },
              {
   
   
                value: 'c',
                tooltip: {
   
   
                  formatter: function (params) {
   
   
                    return params.name + 'GDP达到又一个高度';
                  }
                },
                symbol: 'diamond',
                symbolSize: 18
              }
            ],
            label: {
   
   
              formatter: function (s) {
   
   
                return s;
              }
            }
          },

具体的展示就如同开头图表中展示的那样,可以按照以上的设置方法再次进行自定义。

目录
相关文章
|
开发工具
echarts中如何使用timeline组件
1.吃碗面 这里关于echarts3 官网的示例我不得不吐槽一下,逼格真高!一小部分示例动不动数据就是国家统计局搞出来的,你脸真大。当然他们做的示例的确是很好,这一点毫无疑问。当我看了echarts3关于timeline的使用,我就觉得我有必要写一篇Echarts中timeline组件的使用。
3191 0
Echarts 热力图自定义开发
Echarts 热力图自定义开发
2202 0
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
2372 0
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
7774 0
|
API
Echarts实战案例代码(28):象形图与dataZoom组件实现大事记进度图
Echarts实战案例代码(28):象形图与dataZoom组件实现大事记进度图
623 0
|
前端开发 数据可视化 JavaScript
前端echarts加标记点及标记线和提示框
通过本文的介绍,希望您能够深入理解和掌握如何在ECharts中添加标记点、标记线和提示框,并在实际项目中灵活运用这些功能,提升数据可视化效果。
2457 4
Vue3时间轴(Timeline)
这是一个基于 Vue2 的时间轴(Timeline)组件,支持多种自定义属性,包括时间轴内容数组 `timelineData`、总宽度 `width`、线条样式 `lineStyle`、模式 `mode` 和位置 `position`。时间轴内容数组包含描述 `desc` 和圆圈颜色 `color`。组件提供了丰富的样式选项,如虚线、居中显示等,并支持内容交替展现。适用于多种场景下的时间轴展示需求。
2032 1
Vue3时间轴(Timeline)
|
前端开发
【前端图表】echarts实现散点图x轴时间轴
【前端图表】echarts实现散点图x轴时间轴
1006 0
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!