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散点图鼠标划过散点显示信息
【前端图表】echarts散点图鼠标划过散点显示信息
146 0
|
8月前
Echart绘制好看的柱形图
Echart绘制好看的柱形图
108 0
echarts 图表解决X轴加滚动条之后文字过多不显示问题
echarts 图表解决X轴加滚动条之后文字过多不显示问题
229 0
|
8月前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
JSON 数据格式
Echarts统计图标题居中显示
Echarts统计图标题居中显示
105 0
Echarts饼状图显示的颜色修改
Echarts饼状图显示的颜色修改
79 0
|
JSON 数据格式
echarts叠堆折线图的标题的位置颜色
echarts叠堆折线图的标题的位置颜色
66 0
|
前端开发
css大屏滚动展示样式
css大屏滚动展示样式
68 0
Echarts饼状图标题位置的设置
Echarts饼状图标题位置的设置
261 0
|
前端开发
【前端统计图】echarts改变颜色属性的demo
【前端统计图】echarts改变颜色属性的demo
54 0