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

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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

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>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

报告相同问题？

关注问题

echarts的两个x轴怎使用datazomm同时控制两个x轴的变化 echarts vue.js 前端
2021-12-03 19:39

回答 1 已采纳用echarts connect <!DOCTYPE html> <html> <head> <meta charset="utf-8
echarts时间轴，定义X轴问题 echarts
2021-06-24 09:19

回答 3 已采纳 echarts 色湖之xAxis data就行了 https://echarts.apache.org/examples/zh/editor.html?c=line-simple
Echarts X轴数据量多,文字多重叠显示问题 echarts 有问必答
2022-12-30 10:27

回答 6 已采纳将字段以省略号展示或者添加滚动条 https://blog.csdn.n
解决echarts柱状图x轴数据隔一个显示
2019-05-31 13:49

qq_37138818的博客在做数据显示的时候，因为复制原来的模板就导致了上面的...那就只能说明这个轴的名称太长了，所以导致它默认就隔一个显示，找了半天才发现控制它的属性是axisLabel, xAxis : [ { type : 'category', data : ["...
echarts X轴刻度显示时间，第一个刻度为什么显示日期而不是时分 echarts javascript jquery
2022-07-21 17:53

回答 1 已采纳 X轴这么写 xAxis: { type: "time", min:'2022-07-21 00:00:00', max:'2022-07-21 23:
如何让echarts的x轴显示定义好的 echarts javascript 前端
2022-02-17 15:30

回答 2 已采纳 x轴应该可以自定义显示内容 axisLabel: { formatter: function (value) {
pyecharts两个散点图类型相同长度不同的x轴合并为一张散点图 python 有问必答
2021-05-21 22:43

回答 3 已采纳数据长度需要和x轴长度一致 from pyecharts import options as opts from pyecharts.charts import Scatter import nu
使用Echarts时，X轴文本太长的解决方案
2021-08-13 13:19

三个木马人的博客在使用 Echarts 展示各种可视化数据的时候，经常会遇到 X 轴数据过多或者每一个刻度名称太长而导致的 X 轴混乱的问题。其实 Echarts 默认的配置是 X 轴刻度太多时回默认隐藏一部分，其他的正常显示，如下图： xAxis...
vue中使用ECharts只有x,y轴，没有数据 echarts java vue.js
2023-03-24 16:31

回答 2 已采纳没看到你 tableData 赋值的操作，这不是个空的数组么，
echarts制作图表时怎么实现x轴为实线但平行x轴的其他线为虚线 echarts react.js
2021-07-23 11:43

回答 3 已采纳 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri',
#echarts# 请教下echarts竖形柱状图数据与 x轴对不齐 echarts java vue.js 有问必答
2021-07-15 11:56

回答 3 已采纳官方文档：https://echarts.apache.org/examples/zh/editor.html?c=bar-simple 根据你的数据渲染了一下，你渲染的是并列柱状图。 series:
ECharts设置双x轴
2022-04-06 18:05

前端吕小布的博客下面给大家分享一下ECharts的几种功能，循序渐进地实现一个复杂的曲线图。
怎么样让ECharts的y轴name根据按钮变化 echarts vue.js 前端
2022-03-14 09:45

回答 2 已采纳 this.boatpollTypeOption.yAxis.name = type?'单位：t':'单位：m³'type是点击类型
echarts x轴文字个数太多_echartsX轴文本数据太长溢出问题
2020-12-19 00:58

weixin_39577964的博客方法一在宽度有限，数据偏多的情况下，我们会遇到第一个和最后一个数据溢出问题，针对这个问题官方文档给出的解决方法是使X轴数据倾斜显示。axisLabel: { //坐标轴刻度标签的相关设置interval: 0,rotate:'70',//旋转...
echarts x轴文字个数太多_Echarts x轴文本内容太长的几种解决方案
2020-12-19 00:58

weixin_39876592的博客 1对文本进行倾斜在xAxis.axisLabe中修改rotate的值xAxis: {data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据name:"123",//坐标轴名称。nameLocation:'end',//坐标轴名称...
没有解决我的问题, 去提问