·那场烟花雨淋湿了梦境· 2021-12-03 19:39 采纳率: 40%
浏览 304
已结题

echarts的两个x轴怎使用datazomm同时控制两个x轴的变化

数据很多设置 dataZoom 就会导致分组错乱 第一个x轴会随着变化,第二个X轴不会变化 ,想让第一个X轴和第二个X轴跟随鼠标滑轮一起变化。

img


img

  • 写回答

1条回答 默认 最新

  • ZionHH 2021-12-04 14:08
    关注

    用echarts connect

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <div id="chart1" style="width: 400px; height: 400px"></div>
            <div id="chart2" style="width: 400px; height: 400px"></div>
            
            <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
            
            <script type="text/javascript">
                var chart1 = echarts.init(document.getElementById('chart1'))
                var chart2 = echarts.init(document.getElementById('chart2'))
                chart1.setOption({
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    dataZoom: {
                        type: 'slider'
                    },
                    series: [
                        {
                            data: [150, 230, 224, 218, 135, 147, 260],
                            type: 'line'
                        }
                    ]
                })
                chart2.setOption({
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    dataZoom: {
                        type: 'slider'
                    },
                    series: [
                        {
                            data: [150, 230, 224, 218, 135, 147, 260],
                            type: 'line'
                        }
                    ]
                })
                echarts.connect([chart1, chart2])
            </script>
        </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 12月14日
  • 已采纳回答 12月6日
  • 修改了问题 12月3日
  • 创建了问题 12月3日

悬赏问题

  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型