echarts ——timeLine组件

最新推荐文章于 2024-05-31 18:04:07 发布
置顶 最新推荐文章于 2024-05-31 18:04:07 发布
阅读量6.4k 收藏 5
点赞数 1
分类专栏： echarts 文章标签： echarts  timeLine 柱状图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/balabala_1001/article/details/93879291
版权

echarts ——timeLine组件问题

带timeLine 组件的动态图例，从官网社区中的图例非常完美，拷贝到自己的项目中，下面的1月、2月…,只显示0,1,2,3…刚开始以为是获取数据的方法有误，项目空闲期再回看代码发现问题所在。
地址：https://gallery.echartsjs.com/editor.html?c=xRQpCsH8Ci
在这里插入图片描述

这行的代码注释掉 ！！

这就这行代码
在这儿加上你想要的单位

在这里插入图片描述
以下是全部代码

//图表标题
var chart_title='榆林市十二县农村饮水安全巩固提升情况测试';
//图表X轴数据
var Xdata = ["榆阳区","神木市","府谷县","靖边县","定边县","横山区","吴堡县","米脂县","佳县","子洲县","绥德县","清涧县"];

//图表项目
var fp_key = ['修建饮水工程（处）', '贫困户', '贫困人口','投资金额(万)'];
var fp_bar_postion = ["left","left","left","left","right","right","right","right"];
var fp_coler=['#258df6','#6fce7d','#fbc807','#f5814b'];
//图表项目数据
var fp_val = {
    1: [389, 259, 262, 324, 232, 176, 196, 214, 133, 370, 268, 360, 185, 392, 392, 153, 258, 385, 209, 209, 243, 204, 352, 163,],
    2: [111, 315, 139, 375, 204, 352, 163, 258, 385, 209, 209, 243, 204, 352, 163, 258, 258, 385, 209, 209, 243, 204, 352, 163,],
    3: [227, 210, 328, 292, 241, 110, 130, 185, 392, 392, 153, 187, 150, 200, 250, 300, 258, 385, 209, 209, 243, 204, 352, 163,],
    4: [100, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250, 258, 385, 209, 209, 243, 204, 352, 163,],
    5: [280, 128, 255, 254, 313, 143, 360, 343, 338, 163, 333, 317, 263, 302, 372, 163, 258, 385, 209, 209, 243, 204, 352, 163,],
    6: [121, 388, 233, 309, 133, 308, 297, 283, 349, 273, 229, 238, 224, 291, 185, 203, 258, 385, 209, 209, 243, 204, 352, 163,],
    7: [200, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250, 258, 385, 209, 209, 243, 204, 352, 163,],
    8: [380, 129, 173, 101, 310, 393, 386, 296, 366, 268, 208, 149, 356, 239, 208, 330, 258, 385, 209, 209, 243, 204, 352, 163,],
    9: [363, 396, 388, 108, 325, 120, 180, 292, 200, 309, 223, 236, 209, 271, 215, 216, 258, 385, 209, 209, 243, 204, 352, 163,],
    10: [300, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250, 258, 385, 209, 209, 243, 204, 352, 163,],
    11: [100, 350, 300, 250, 200, 150, 100, 150, 200, 250, 300, 350, 400, 350, 300, 250, 258, 385, 209, 209, 243, 204, 352, 163,],
    12: [280, 128, 255, 254, 313, 143, 360, 343, 338, 163, 333, 317, 263, 302, 372, 163, 258, 385, 209, 209, 243, 204, 352, 163,],

};
//图表月份
var timeLineData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,];

option = {
    baseOption: {
        backgroundColor: '#0e2147',
        timeline: {
            show: true,
            axisType: 'category',
            tooltip: {
                show: true,
                formatter: function(params) {
                    console.log(params);
                    return params.name + '月份数据统计';
                }
            },
            autoPlay: true,
            currentIndex: 6,
            playInterval: 1000,
            label: {
                normal: {
                    show: true,
                    interval: 'auto',
                    // formatter: '{value}月',
                },
            },
            data: [],
        },
        title: {
            //   text:'大北京景点帅哥美女统计',
            textStyle: {
                color: '#fff',
                fontSize: 16,
            },
            //subtext: '作者:',
        },
        legend: {
            data: fp_key,
            top: 8,
            right: '20%',
            textStyle: {
                color: '#fff',
            },
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            //formatter: '{b}<br/>{a}: {c}人',
            axisPointer: {
                type: 'shadow',
            }
        },

        toolbox:{
            right:20,
            feature:{
                saveAsImage: {},
                restore: {},
                dataView: {},
                dataZoom: {},
                magicType: {
                    type:['line','bar']
                },
                // brush: {},
            }
        },

        grid: [{
            show: false,
            left: "3%",
            top: 60,
            bottom: 60,
            containLabel: true,
            width:  '45%' ,
        }, {
            show: false,
            left: '50.5%',
            top: 80,
            bottom: 60,
            width:  '9%' ,
        }, {
            show: false,
            right: "3%",
            top: 60,
            bottom: 60,
            containLabel: true,
            width:  '45%' ,
        }, ],

        xAxis: [
            {
                max: function(value) {
                    return value.max*4- 20;
                },
                type: 'value',
                triggerEvent: true,
                inverse: true,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                position: 'top',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#B2B2B2',
                        fontSize: 12,
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1F2022',
                        width: 1,
                        type: 'solid',
                    },
                },
            },
            {
                gridIndex: 1,
                show: false,
            },
            {
                max: function(value) {
                    return value.max*4- 20;
                },
                gridIndex: 2,
                type: 'value',
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                position: 'top',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#B2B2B2',
                        fontSize: 12,
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1F2022',
                        width: 1,
                        type: 'solid',
                    },
                },
            }
        ],
        yAxis: [{
            type: 'category',
            inverse: true,
            position: 'right',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false,
                margin: 8,
                textStyle: {
                    color: '#fff',
                    fontSize: 12,
                },

            },
            data: Xdata,
        }, {
            gridIndex: 1,
            type: 'category',
            inverse: true,
            position: 'left',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#9D9EA0',
                    fontSize: 12,
                },

            },
            data: Xdata.map(function(value) {
                return {
                    value: value,
                    textStyle: {
                        align: 'center',
                    }
                }
            }),
        }, {
            gridIndex: 2,
            type: 'category',
            inverse: true,
            position: 'left',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false,
                textStyle: {
                    color: '#9D9EA0',
                    fontSize: 12,
                },

            },
            data: Xdata,
        }, ],
        series: [],

    },

    options: [],


};

for (var i = 0; i < timeLineData.length; i++) {
    option.baseOption.timeline.data.push(timeLineData[i]+"月");
    option.options.push({
        title: {
            text: chart_title + timeLineData[i] + '月份统计',
        },
        series: [{
            name: fp_key[0],
            type: 'bar',
            stack: 'one',
            barGap: 15,
            barWidth: 15,
            label: {
                normal: {
                    show: true,
                    position:'inside',
                    textStyle: {
                        color: '#fff',

                        fontSize: 12,
                    },
                },
                emphasis: {
                    show: true,
                    position: 'inside',
                    offset: [0, 0],
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                    },
                },
            },
            itemStyle: {
                normal: {
                    color: function(params) {
                        return fp_coler[0]
                    },
                    opacity: 1,

                },
                emphasis: {
                    opacity: 1,
                },
            },
            data: fp_val[timeLineData[i]],
        },

            {
                name: fp_key[1],
                type: 'bar',
                stack: 'one',
                barGap: 15,
                barWidth: 15,
                label: {
                    normal: {
                        show: true,
                        position:'inside',
                        textStyle: {
                            color: '#fff',

                            fontSize: 12,
                        },
                    },
                    emphasis: {
                        show: true,
                        position: 'inside',
                        offset: [0, 0],
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return fp_coler[1]
                        },
                        opacity: 1,

                    },
                    emphasis: {
                        opacity: 1,
                    },
                },
                data: fp_val[timeLineData[i]],
            },

            {
                name: fp_key[2],
                stack: 'one',
                type: 'bar',
                barGap: 15,
                barWidth: 15,
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                    },
                    emphasis: {
                        show: true,
                        position: 'inside',
                        offset: [0, 0],
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return fp_coler[2]
                        },
                        opacity: 1,

                    },
                    emphasis: {
                        opacity: 1,
                    },
                },
                data: fp_val[timeLineData[i]],
            },
            {
                name: fp_key[3],
                stack: 'one',
                type: 'bar',
                barGap: 15,
                barWidth: 15,
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                    },
                    emphasis: {
                        show: true,
                        position: 'inside',
                        offset: [0, 0],
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return fp_coler[3]
                        },
                        opacity: 1,

                    },
                    emphasis: {
                        opacity: 1,
                    },
                },
                data: fp_val[timeLineData[i]],
            },
            {
                name: fp_key[0],
                stack: 'right',
                type: 'bar',
                barGap: 15,
                barWidth: 15,
                xAxisIndex: 2,
                yAxisIndex: 2,
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                    },
                    emphasis: {
                        show: true,
                        position: 'inside',
                        offset: [0, 0],
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return fp_coler[0]
                        },
                        opacity: 1,

                    },
                    emphasis: {
                        opacity: 1,
                    },
                },

                data: fp_val[timeLineData[i]],
            },
            {
                name: fp_key[1],
                stack: 'right',
                type: 'bar',
                barGap: 15,
                barWidth: 15,
                xAxisIndex: 2,
                yAxisIndex: 2,
                label: {
                    normal: {
                        show: true,
                        position:'inside',
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        },
                    },
                    emphasis: {
                        show: true,
                        position: 'inside',
                        offset: [0, 0],
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return fp_coler[1]
                        },
                        opacity: 1,

                    },
                    emphasis: {
                        opacity: 1,
                    },
                },
                data: fp_val[timeLineData[i]],
            },
            {
                name: fp_key[2],
                stack: 'right',
                type: 'bar',
                barGap: 15,
                barWidth: 15,
                xAxisIndex: 2,
                yAxisIndex: 2,
                label: {
                    normal: {
                        show: true,
                        position:'inside',
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        },
                    },
                    emphasis: {
                        show: true,
                        position: 'inside',
                        offset: [0, 0],
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return fp_coler[2]
                        },
                        opacity: 1,

                    },
                    emphasis: {
                        opacity: 1,
                    },
                },
                data: fp_val[timeLineData[i]],
            },
            {
                name: fp_key[3],
                stack: 'right',
                type: 'bar',
                barGap: 15,
                barWidth: 15,
                xAxisIndex: 2,
                yAxisIndex: 2,
                label: {
                    normal: {
                        show: true,
                        position:'inside',
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        },
                    },
                    emphasis: {
                        show: true,
                        position: 'inside',
                        offset: [0, 0],
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return fp_coler[3]
                        },
                        opacity: 1,

                    },
                    emphasis: {
                        opacity: 1,
                    },
                },
                data: fp_val[timeLineData[i]],
            },
        ]
    });
}
balabala—慧
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts中如何使用timeline组件
weixin_33739646的博客
03-08 2314
1.吃碗面 这里关于echarts3 官网的示例我不得不吐槽一下，逼格真高!一小部分示例动不动数据就是国家统计局搞出来的，你脸真大。当然他们做的示例的确是很好，这一点毫无疑问。当我看了echarts3关于timeline的使用，我就觉得我有必要写一篇Echarts中timeline组件的使用。这玩意东西时间久了，真心容易忘，就当是做个备忘吧。 ...
Echarts 代码 timeline 实例
02-12
Echarts 代码 timeline 实例 Echarts 代码 timeline 实例
echarts使用timeline
03-08
echarts3中如何使用timeline，官方的事例代码不是很容易看懂，所以写示例希望也能帮助你搞定timeline，原文地址 http://blog.csdn.net/kebi007/article/details/60882367
echarts中的timeline
rraxx的博客
04-08 4845
echarts中timeline使用
echarts通过自定义系列和时间轴实现一段连续时间内，不同时间下的状态显示
最新发布
weixin_43527608的博客
05-31 446
体会就是写echarts真的很考验创新能力，因为需求千变万化。没想到最常用的居然是障眼法hhh等我有空，后续再更新完整的代码。
Python数据可视化-使用 Pyecharts 制作 Timeline（时间轴组件）详解
热门推荐
grfstc的博客
05-17 1万+
内容介绍 本文介绍基于 Python3 的 Pyecharts 制作 Timeline（时间轴组件） 时需要使用的设置参数和常用模板案例，可根据实际情况对案例中的内容进行调整即可。 使用 Pyecharts 进行数据可视化时可提供直观、交互丰富、可高度个性化定制的数据可视化图表。案例中的代码内容基于 Pyecharts 1.x 版本 。 Timeline：时间线轮播多图 1.基本设置 class Timeline( # 初始化配置项，参考 `global_options.InitOpts
【Python】pyecharts 模块 ⑦ ( 绘制时间线柱状图 | 时间线 Timeline 简介 | 时间线 Timeline 柱状图开发要点 | 播放设置 | 主题设置 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
07-24 7241
一、pyecharts 绘制时间线柱状图 1、时间线 Timeline 简介 2、时间线 Timeline 柱状图开发要点 3、代码示例 - 时间线 Timeline 柱状图 二、pyecharts 绘制时间线柱状图其它设置 1、时间线 Timeline 播放设置 2、时间线 Timeline 主题设置 3、代码示例 - 时间线特殊设置
react-timeline-gantt:具有虚拟渲染的React Timeline组件
05-08
React-timeline-gantt是一个用于显示和管理日历甘特图的组件。 它使用虚拟渲染来有效地做出React。 该组件具有以下功能： 可以处理十万条记录。 无限日历滚动 三种缩放级别：日，周，月 完全可定制。 支持所有...
微信小程序timeLine时间线代码片段示例
02-11
在微信小程序中，我们通常需要自定义组件来实现这样的功能，因为微信小程序的标准组件库中并未内置时间线组件。下面，我们将详细讨论创建时间线所需的步骤和关键知识点： 1. **结构设计**：首先，我们需要定义时间...
react-horizontal-timeline:[未维护]时间轴组件
05-02
React水平时间线 CodyHouse开发的水平时间线的React端口。 这是一个，希望您也喜欢上古卷轴。笔记此软件包不再由我维护。 如果您觉得它有用并希望成为此软件包的维护者，请与我联系水平时间线它将仅使用您提供的日期...
【数据可视化】用pyecharts中的时间轴组件（Timeline）和组合组件（Grid)画图
qq_65046523的博客
06-22 4456
使用 Pyecharts 进行数据可视化时可提供直观、交互丰富、可高度个性化定制的数据可视化图表，其中时间轴组件（Timeline）是常用的组件之一，可以用于展示一段时间内的数据变化情况。时间轴通常由时间坐标轴和数据图表组成，可以按照时间顺序展示数据的变化趋势，帮助用户更清晰地了解数据的演变过程和趋势，依据时间顺序，把一方面或多方面的事件串联起来，形成相对完整的记录体系，再运用图文的形式呈现给用户；：是一个数据处理库，提供了丰富的数据结构和函数，用于处理和分析结构化数据。***第二步：***绘制图形。
EChart中时间线控件实践
sunquan291的专栏
12-16 2205
EChart中时间线控件实践前言一、echarts的timeline二、使用 axisType: 'time',二、事件timelinechanged 前言 项目中前端(angular)开发中需要使用到基于时间线的UI控件，初步调研两种,可以参考下面链接 https://ng.ant.design/components/slider/zh https://echarts.apache.org/zh/cheat-sheet.html https://echarts.apache.org/zh/option.
19-Echarts 配置系列之： timeline 动态切换
youyudehan的博客
04-25 886
简单快速的了解 timeline 动态切换 的配置属性，让 Echarts 可视化图形动起来，文章中提供一目了然的配置代码，可直接复制使用。
Echarts：好玩的timeline
前端御书房
11-19 1998
在baseOption中我们可以看到timeline属性，我们在该属性中进行简单的配置，例如：自动播放（autoPlay），播放的速度（playInterval），以及时间轴上的数据（data）。接下来配置options，前文中提到timeline可以在多个option间切换，因此，需要配置多个option，根据echarts的规范，配置多个option，需要使用options和baseOption字段分别存储，baseOption作为公用的配置，options中存放的属于子配置。
Echart 之 timeline 时间组件 基本用法
前端看世界
07-22 3443
此处是基础版, 大神请绕路 官方给的timeline组件太过于复杂, 对于不熟悉的朋友, 只是看逻辑就浪费很多时间 以下是基础版的示例, <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="containe
echarts使用结合时间轴timeline动态刷新案例
大灰狼的小绵羊哥哥的博客
08-05 1530
echarts
Echarts图表和timeline时间轴的使用
Sophisticate11的博客
05-08 3903
option单独放在一个js文件中 export const barOptionMobiSub = { baseOption: { timeline: { axisType: 'category', realtime: true, autoPlay: false, symbolSize: 8, orient: 'vertica...
Echarts数据可视化 第3章 Echarts组件详解 3.5 时间轴
谢谢你们的关注
03-03 984
Echarts数据可视化 第3章 Echarts组件详解 3.5 时间轴
echarts获取timeline下标
09-20
要获取echarts的timeline下标，你可以使用echarts的事件监听器来实现。具体步骤如下： 1. 使用echarts的setOption方法配置timeline组件和options数组。 2. 添加timeline的事件监听器，监听timelinechanged事件。 3. 在事件监听器中获取timeline的currentIndex属性，即为当前选中的下标。 下面是一个示例代码，演示如何获取timeline下标： ```javascript myChart.setOption({ timeline: { ... }, options: [{ ... }, { ... }, { ... }] }); myChart.on('timelinechanged', function(params) { var currentIndex = params.currentIndex; console.log('当前选中的下标为：', currentIndex); }); ``` 请注意，上述代码中的myChart是echarts实例的变量名，请根据你的代码中的变量名进行相应修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值