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;
              }
            }
          },

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

目录
相关文章
|
30天前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
371 0
|
5月前
|
开发者 容器
Echarts饼图实现-今日进度-动态图
构建一个动态旋转的ECharts饼图,包括渐变色和动画效果。初始化ECharts实例,设置图表尺寸和背景,配置标题、颜色、系列数据及自定义渲染。利用`renderItem`绘制弧线和圆点,`getCirlPoint`计算坐标。通过`setInterval`和`draw`函数实现旋转动画。完整代码可在链接下载。
119 0
Echarts饼图实现-今日进度-动态图
|
5月前
|
JavaScript 容器
JS图表制作及点击按钮切换图表样式
JS图表制作及点击按钮切换图表样式
37 0
|
5月前
|
Serverless 开发者 容器
Echarts饼图-今日进度-动态图
构建一个动态饼图,采用ECharts,背景为蓝色科技风,有星球转动效果。通过`echarts.init`初始化,设置图表尺寸和背景色,配置`option`对象含标题、颜色等。利用`series`定义渐变色并自定义渲染,通过`renderItem`绘制弧线和圆点。`getCirlPoint`函数计算坐标,`draw`函数更新角度实现动画。代码包括图表初始化、系列配置、动画逻辑等关键部分。完整代码可在链接处下载。
67 0
|
6月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
133 0
echarts 图表解决X轴加滚动条之后文字过多不显示问题
echarts 图表解决X轴加滚动条之后文字过多不显示问题
156 0
|
6月前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
6月前
|
测试技术 定位技术
【sgDragMoveTile】自定义组件:拖拽瓦片图、地图、大图,滚动条对应同步滚动
【sgDragMoveTile】自定义组件:拖拽瓦片图、地图、大图,滚动条对应同步滚动
|
11月前
Echarts tooltip配置项的属性 图表悬浮框
Echarts tooltip配置项的属性 图表悬浮框
Echarts饼状图显示的颜色修改
Echarts饼状图显示的颜色修改
66 0