echerts 折线图双轴(不同时间点不同值)

最新推荐文章于 2024-05-22 09:23:54 发布
最新推荐文章于 2024-05-22 09:23:54 发布
阅读量1.2k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sumimg/article/details/117958736
版权

效果图
在这里插入图片描述

公司需求是一个折线图上生成两个设备，所以有两个x轴，y轴（xAxis，yAxis设置成对象，series也设置成对象）

var data = [["00:00:00",20],["00:30:00",300],["01:00:00",116],["01:30:00",200],["02:00:00",116],["02:30:00",129],["03:00:00",116],["03:30:00",129],["04:00:00",116],["04:30:00",129],["05:00:00",116],["05:30:00",129],["06:00:00",116],["06:30:00",129],["07:00:00",116],["07:30:00",129],["08:00:00",116],["08:30:00",129],["09:00:00",116],["09:30:00",129],["10:00:00",116],["10:30:00",129],["11:00:00",116],["11:30:00",129],["12:00:00",116],["12:30:00",129],["13:00:00",116],["13:30:00",129],["14:00:00",116],["14:30:00",129],["15:00:00",116],["15:30:00",129],["16:00:00",116],["16:30:00",129],["17:00:00",116],["17:30:00",129],["18:00:00",116],["18:30:00",129],["19:00:00",116],["19:30:00",129],["20:00:00",116],["20:30:00",129]];
var data2 = [["00:00:00",20],["00:20:00",100],["00:30:00",300],["01:00:00",116],["01:30:00",50],["02:00:00",116],["02:30:00",129],["03:00:00",116],["03:30:00",129],["04:00:00",116],["04:30:00",129],["05:00:00",116],["05:30:00",129],["06:00:00",116],["06:30:00",129],["07:00:00",116],["07:30:00",129],["08:00:00",116],["08:30:00",129],["09:00:00",116],["09:30:00",129],["10:00:00",116],["10:30:00",129],["11:00:00",116],["11:30:00",129],["12:00:00",116],["12:30:00",129],["13:00:00",116],["13:30:00",129],["14:00:00",116],["14:30:00",129],["15:00:00",116],["15:30:00",129],["16:00:00",116],["16:30:00",129],["17:00:00",116],["17:30:00",129],["18:00:00",116],["18:30:00",129],["19:00:00",116],["19:30:00",129],["20:00:00",116],["20:30:00",129],["21:00:00",116],["21:30:00",129],["22:00:00",116],["22:30:00",129],["23:00:00",116],["23:30:00",129],["24:00:00",129]];
var dateList = data.map(function (item) {
    return item[0];
});
var dateList2 = data2.map(function (item) {
    return item[0];
});
var valueList = data.map(function (item) {
    return item[1];
});
var valueList2 = data2.map(function (item) {
    return item[1];
});
this.echarts(dateList,valueList,dateList2,valueList2)

echarts(dateList,valueList,dateList2,valueList2) {
            let this_ = this;
            this_.myChart = echarts.init(document.getElementById('Echarts'));
            let resizeTimer = null;
            let option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        //自定义鼠标移上去显示的框
                        // console.log(params, '22222'); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
                        if (params[0] && params[1]) {
                            let firstParams = params[0];
                            let sndParams = params[1];
                            return (
                                firstParams.marker +
                                device_id0 +
                                '#' +
                                '&nbsp' +
                                firstParams.name +
                                '<br>' +
                                firstParams.data +
                                ' %' +
                                '<br>' +
                                sndParams.marker +
                                device_id1 +
                                '#' +
                                '&nbsp' +
                                sndParams.name +
                                '<br>' +
                                sndParams.data +
                                ' %'
                            );
                        } else {
                            let firstParams = params[0];
                            return firstParams.marker + device_id0 + '#' + '&nbsp' + firstParams.name + '<br>' + firstParams.data + ' %';
                        }
                    }
                },
                xAxis: [
                    {
                        data: dateList,
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: '#2D4063' //X轴的颜色
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#7785B9', //x轴文字颜色
                                fontSize: '10'
                            }
                        },
                        axisTick: {
                            //x轴刻度线
                            show: false
                        }
                    },
                    {
                        data: dateList2,
                        gridIndex: 0,
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: '#2D4063' //X轴的颜色
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#7785B9', //x轴文字颜色
                                fontSize: '10'
                            }
                        },
                        axisTick: {
                            //x轴刻度线
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        max: 300,
                        min:0,
                        axisLine: {
                            lineStyle: {
                                color: '#2D4063' //y轴的颜色
                            }
                        },
                        splitLine: {
                            show: true, //虽然是y轴  但是是横线
                            lineStyle: {
                                color: ['#272F52'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#7785B9',
                                fontSize: '10'
                            }
                        },
                        nameTextStyle: {
                            color: ['#7785B9']
                        },
                        axisTick: {
                            //y轴刻度线
                            show: false
                        }
                    },
                    {
                        gridIndex: 0,
                        type: 'value',
                        max: 300,
                        min:0,
                        axisLine: {
                            lineStyle: {
                                color: '#2D4063' //y轴的颜色
                            }
                        },
                        splitLine: {
                            show: true, //虽然是y轴  但是是横线
                            lineStyle: {
                                color: ['#272F52'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#7785B9',
                                fontSize: '10'
                            }
                        },
                        nameTextStyle: {
                            color: ['#7785B9']
                        },
                        axisTick: {
                            //y轴刻度线
                            show: false
                        }
                    }
                ],
                grid: {
                    left: '3%', //折线图距离边界的距离
                    right: '4%',
                    bottom: '3%',
                    top:'10%',
                    containLabel: true
                },
                visualMap: {
                    show: false,
                    type: 'piecewise',
                    pieces: [
                        { //多少范围内的折点颜色  （可以使用 lt（小于，less than），gt（大于，greater than），lte（小于等于 less than or equals），gte（大于等于，greater than or equals）来表达边界）
                            gt: 0,
                            lte:99,
                            color: '#FF9399' //红色 大于0小于等于99
                        },
                        {
                            gt: 99,
                            lte:100,
                            color: '#fff' //白色 大于99小于等于100
                        },
                        {
                            gt: 100,
                            color: '#E8B988' //橙色 大于100
                        }
                    ]
                },
                series: [
                    {
                        type: 'line',
                        showSymbol: true,
                        data: valueList,
                        smooth: true, //圆滑的曲线
						symbol: 'circle',     //设置折点的颜色必须要加这个属性 设定为实心点
                        symbolSize: 8,   //设定实心点的大小
                        itemStyle: {
                            normal: {
                                color: '#7cffb1',//折线的颜色
                                lineStyle: {
                                    color: '#7cffb1' //折点的颜色
                                }
                            }
                        },
                        // areaStyle: { //渐变色
                        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //         {
                        //             offset: 0,
                        //             color: 'rgba(85, 238, 255, 0.3)'
                        //         },
                        //         {
                        //             offset: 1,
                        //             color: 'rgba(85, 238, 255, 0.1)'
                        //         }
                        //     ])
                        // }
                    },
                    {
                        type: 'line',
                        showSymbol: true, //出现小圆点
                        data: valueList2,
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        smooth: true, //圆滑的曲线
                        symbol: 'circle',     //设置折点的颜色必须要加这个属性 设定为实心点
                        symbolSize: 8,   //设定实心点的大小
                        itemStyle: {
                            normal: {
                                color: '#6672fb',
                                lineStyle: {
                                    color: '#6672fb'
                                }
                            }
                        },
                        // areaStyle: { //渐变色
                        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //         {
                        //             offset: 0,
                        //             color: 'rgba(85, 238, 255, 0.3)'
                        //         },
                        //         {
                        //             offset: 1,
                        //             color: 'rgba(85, 238, 255, 0.1)'
                        //         }
                        //     ])
                        // }
                    }
                ]
                 
            };
            this_.myChart.setOption(option);

            window.addEventListener('resize', () => {
                if (resizeTimer) clearTimeout(resizeTimer);
                resizeTimer = setTimeout(() => {
                    this_.myChart.resize();
                }, 100);
            });
        }
    },
春风姐姐
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echart折线图x轴时间数据不一致，如何一一对应展示
GJF_blog的博客
01-11 1347
1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解 群号: 856402057。对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上，共勉！而我现在需要的是将我的数据跟时间一一对应，那么这时候就要注意。2、公众号：公众号「进军全栈攻城狮」此时x轴的配置举例如下。
Echarts 多条折线图X轴数据不同数据错乱
qq_37301074的博客
09-24 4430
Echarts 多条折线图，X轴数据不同导致数据错乱的解决方法
ECharts的图表混搭之绘制双y轴的折线图与柱状图混搭图表
最新发布
wqqstudy的博客
05-22 718
ECharts的图表混搭之绘制双y轴的折线图与柱状图混搭图表 利用某地区一年的降水量和蒸发量数据绘制双y轴的折线图与柱状图混搭图表，
C#控件ZedGraph使用小结
muxi_huang的博客
03-24 4563
毕业设计需要设计可以实时显示数据曲线的上位机，于是学习了ZedGraph控件的使用，对用到的属性进行记录。 0、变量声明 ZedGraphControl zgc; GraphPane panel = zgc.GraphPane; PointPairList listAmp = new PointPairList(); LineItem cureAmp = panel.AddCurve("Ampli...
c#读取excel两列数据并绘制xy曲线_Excel---纵向折线图，「高阶图表」，你一定没用过...
weixin_39647773的博客
12-01 2579
Excel中的折线图通常是在水平方向上展示数据图线，如果希望在纵向上也能展现折线图，可以借助XY散点图来模拟实现。以两列数据绘制图表为例：步骤1：首先需要进行数据准备，在原有数据的基础上增加一列辅助数据。这列辅助数据将作为散点图中的Y轴坐标数据，因此是由一组1～12的数字序列所产生(12是数据的个数)。为了能把数据点绘制在两个相邻坐标轴线的中间位置，在这个数字序列的基础上需要再减去0.5来进行处理...
C#曲线图柱状图和折线图，用了2个chart控件实现
tangliuqing的专栏
12-06 1338
chart1.ChartAreas[0].AxisX.MajorGrid.LineWidth = 0; chart1.ChartAreas[0].AxisX.Interval = 1;?? //设置X轴坐标的间隔为1 chart1.ChartAreas[0].AxisX.IntervalOffset = 1;? //设置X轴坐标偏移...
按照年，月，日等不同时间范围选择，加载echarts图报表
qq_39656220的博客
12-27 6827
按照年，月，日等不同时间范围选择并限制范围，加载echarts图报表
当多条折线数据渲染在一个echarts里，这些折线的x轴数据是不统一的，处理方法
柑橘乌云_
10-13 1210
如果写成这样那么x轴会以series数组第一个子数组的x轴值的范围来定义，所以大家可以在给series赋值之前排个序，将子数组最多的放前面。文档中series可以写成[[x轴值，y轴值],[x轴值，y轴值],[x轴值，y轴值]] 这种形式，如果能拿到多条折线的x轴值的并集，也可以将其赋值给xAxis的data里。
vue实现折线图 可按时间查询
10-14
在本文中，我们将探讨如何使用Vue.js框架实现一个动态的、可以根据时间查询的折线图。这个功能对于数据分析和展示非常有用，特别是当需要展示随时间变化的趋势数据时。我们将从以下几个方面详细介绍实现过程： 1. *...
开源的HelloCharts源码修改实现动态画折线图
11-03
Android中对HelloChart的修改，实现动态绘制折线图
Android自定义折线图，可设置基准线，不同点颜色
08-16
Android自定义折线图，可设置基准线，不同点颜色，文章地址：http://blog.csdn.net/u013700040/article/details/77233590，如果有问题欢迎私信我
折线图_折线图_
10-01
R语言新手，小白绘制好看的折线图，希望有所帮助
柱状图+时间选择
qq_41035779的博客
08-27 2411
首先，效果图 页面代码，首先时间选择按钮 &amp;lt;table&amp;gt; &amp;lt;br&amp;gt; &amp;lt;tr&amp;gt; &amp;lt;td&amp;gt;日期： &amp;lt;button class=&quot;btn btn-sm btn-success&quot;
echart选择日期范围，将日期范围中的所有日期显示到x轴
weixin_44084713的博客
04-07 2753
参考链接https://segmentfault.com/q/1010000016734004?sort=created
echarts双折线图
王二的博客
12-06 4988
本页案例功能如下 1.如何修改折现的颜色 2.如何设置折现处折点的颜色，大小 3.修改折点处值的颜色，大小 4.如何隐藏x,y轴线 5.如何隐藏x,y轴的刻度线 6.如何修改x,y轴的颜色，宽度 7.修改线下的阴影颜色(渐变)
微信小程序单页面使用echarts组件实现两个折线图
nan961136007的博客
06-02 3119
今天呢，放一个很早以前做的一个echarts组件的引用和实现。话不多说，上图片之后在上代码。 这些代码都是我单独运行了才放上来得，应该可以直接用，有个问题是，X轴如果超过7个的话，会看不到后续的X轴，X轴的单位位置也只能在这条线上，比较无奈。 首先呢，要去下载echarts插件包放在你的小程序里面 接着就按照echarts的文档来查看属性，代码里放入你需要的属性就可以了。 wxml代码，这是两个折线图的数据渲染 <view class="container1"> <view clas
Echarts--------双折线图
Hermia_yuan的博客
05-25 1170
echarts 双折线图 设置smybol 拐点样式
echarts一条折线图展示多个数据
qq_45018844的博客
08-09 3094
第三个values是y轴的数据；还有一个sizes是我们说的第三个数据；sizes是一个数组，所以我们只要知道tooltip划到哪一个的索引就可以拿到数据；这里是正常的折线图的渲染；只是展示tooltip的时候 自己格式化了一下。这里就是上面3.2说的 知道数组的索引就可以拿到相应的值；这个params是我鼠标滑到哪里的整个对象；这个方法是将数据转化为G的单位的方法；根据时间展示某一数量的时候的数据大小。这里的size就是第三个数据。这个就是params。...
折线图和散点图的相同点与不同点
07-08
折线图和散点图都是常用的数据可视化工具，它们的相同点包括： 1. 数据表示：折线图和散点图都可以用来表示数据的分布、趋势或关系。 2. 坐标轴：它们都使用坐标轴来表示数据的数值。 3. 数据点：折线图和散点图都...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值