Echart多图联动

最新推荐文章于 2025-03-18 09:24:15 发布
最新推荐文章于 2025-03-18 09:24:15 发布
阅读量3k 收藏 5
点赞数 1
分类专栏： 前端学习

Echart多图联动
核心代码： myChart1.connect([myChart2, myChart3, myChart4]);

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main1" style="height:200px"></div>
    <div id="main2" style="height:200px"></div>
    <div id="main3" style="height:200px"></div>
    <div id="main4" style="height:200px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/line'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart1 = ec.init(document.getElementById('main1'));
                var myChart2 = ec.init(document.getElementById('main2'));
                var myChart3 = ec.init(document.getElementById('main3'));
                var myChart4 = ec.init(document.getElementById('main4'));

                //设置主题皮肤
                myChart1.setTheme("macarons");
                myChart2.setTheme("macarons");
                myChart3.setTheme("macarons");
                myChart4.setTheme("macarons");

                var option1 = {
                    title: {
                        text: '温度状况',
                        subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['设定温度', '进水温度', '出水温度', '环境温度']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: [
                        {
                            show: false,
                            type: 'category', //x轴为类目类型
                            axisLabel: {
                                show: true,
                                interval: 0,
                                rotate: 45
                            },
                            data: ['2', '05', '10', '15', '20', '25', '30', '35', '40', '45']

                        }],
                    yAxis: [
                        {
                            type: 'value'  //y轴为值类型
                        }
                    ],
                    series: [{
                        name: '设定温度',
                        type: 'line',
                        smooth: true,
                        data: [55, 55, 55, 55, 55, 55, 55, 55, 55, 55]
                    }]
                }

                var option2 = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        y: -30,
                        data: ['设定温度', '进水温度', '出水温度', '环境温度']
                    },
                    toolbox: {
                        y: -30,
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: [
                        {
                            show: false,
                            type: 'category', //x轴为类目类型
                            axisLabel: {
                                show: true,
                                interval: 0,
                                rotate: 45
                            },
                            data: ['2', '05', '10', '15', '20', '25', '30', '35', '40', '45']

                        }],
                    yAxis: [
                        {
                            type: 'value'  //y轴为值类型
                        }
                    ],
                    series: [{
                        name: '进水温度',
                        type: 'line',
                        smooth: true,
                        data: [15, 15, 16, 18, 18, 19, 19, 19, 19, 19]
                    }]
                }

                var option3 = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        y: -30,
                        data: ['设定温度', '进水温度', '出水温度', '环境温度']
                    },
                    toolbox: {
                        y: -30,
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: [
                        {
                            show: false,
                            type: 'category', //x轴为类目类型
                            axisLabel: {
                                show: true,
                                interval: 0,
                                rotate: 45
                            },
                            data: ['2', '05', '10', '15', '20', '25', '30', '35', '40', '45']

                        }],
                    yAxis: [
                        {
                            type: 'value'  //y轴为值类型
                        }
                    ],
                    series: [{
                        name: '出水温度',
                        type: 'line',
                        smooth: true,
                        data: [20, 25, 30, 35, 38, 44, 46, 48, 53, 56]
                    }]
                }

                var option4 = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        y: -30,
                        data: ['设定温度', '进水温度', '出水温度', '环境温度']
                    },
                    toolbox: {
                        y: -30,
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    //缩放控制器
                    dataZoom: {
                        show: true,//隐藏时间轴
                        realtime: true,
                        start: 0,
                        end: 100,
                        height: '30'
                    },
                    xAxis: [
                        {
                            type: 'category', //x轴为类目类型
                            axisLabel: {
                                show: true,
                                interval: 0,
                                rotate: 45
                            },
                            data: ['2', '05', '10', '15', '20', '25', '30', '35', '40', '45']

                        }],
                    yAxis: [
                        {
                            type: 'value'  //y轴为值类型
                        }
                    ],
                    series: [{
                        name: '环境温度',
                        type: 'line',
                        smooth: true,
                        data: [15, 15, 15, 15, 15, 15, 15, 15, 15, 15]
                    }]
                }

                // 为echarts对象加载数据
                myChart1.setOption(option1);
                myChart2.setOption(option2);
                myChart3.setOption(option3);
                myChart4.setOption(option4);
                //联动配置
                myChart1.connect([myChart2, myChart3, myChart4]);
                myChart2.connect([myChart1, myChart3, myChart4]);
                myChart3.connect([myChart2, myChart1, myChart4]);
                myChart4.connect([myChart2, myChart3, myChart1]);
            }
        );
    </script>
</body>
echarts 多图联动
日常学习集锦
03-10 2055
echarts 多表联动
python echarts 多图联动,创建echart多个联动的示例代码
weixin_32208021的博客
03-25 1559
鼠标悬浮同时触发多个echart效果如下html代码选择时间间隔one secondone secondone minuteone hourone dayone weekone monthone year选择数据个数55101520253035确定css代码body {margin: 0;padding: 0;background-color: #eee;}.contain {padding: 1...
Echart3多图联动，一个时间轴控制多个图
04-11
Echart3多图联动，一个时间轴控制多个图，希望能够帮到大家!
echart多图联动
weixin_39808181的博客
05-28 306
Echarts图表联动实战教程.zip
weixin_42181686的博客
03-18 807
在ECharts中，除了内置的事件类型，我们还可以创建自定义事件来实现特定的联动逻辑。以下是如何创建和使用自定义事件的步骤：创建自定义事件：在合适的时机使用方法来触发自定义事件。监听自定义事件：使用on方法监听这些事件，并在事件处理函数中实现联动逻辑。// 示例代码：创建并监听自定义事件// param包含了事件触发时的信息，例如：// param.batch: [事件触发时的图表实例]// 根据param里的信息编写联动逻辑...});// 触发自定义事件。
ECharts多表联动图
发财糕
04-10 1048
当需要展示的数据比较多时，放在一个图表进行展示的效果不佳，此时，可以考虑使用两个图表进行联动展示。ECharts 提供了多图表联动的功能(connect)，联动的多个图表可以共享组件事件并实现保存图片时的自动拼接。多图表联动支持直角坐标系下tooltip 的联动。
ECharts多图表联动功能
weixin_45653441的博客
01-10 6175
ECharts多图表联动功能的实现过程
Echart多图表联动之三，在同一个容器中显示多个图表
yaomengzhi的博客
03-30 2974
实现效果： option = { "tooltip": { "show": true, "trigger": "axis", "axisPointer": { "type": "cross", "axis": "x" } }, "color": ["#...
echarts实现多图表联动效果
红烧咸咸鱼
05-21 1048
echarts实现多图表联动效果
ECharts的多表联动
2301_81685623的博客
04-15 1681
当需要展示的数据比较多时，放在一个图表进行展示的效果不佳，此时，可以考虑使用两个图表进行联动展示。ECharts提供了多图表联动的功能(connect)，联动的多个图表可以共享组件事件并实现保存图片时的自动拼接。(1)分别设置每个ECharts对象为相同的group值,并通过在调用ECharts对象的connect方法时，传入group值，从而使用多个ECharts对象建立联动关系。(2)直接调用ECharts 的connect方法,参数为一个由多个需要联动的ECharts 对象组成的数组。
echarts多图联动
m0_59805184的博客
03-14 1152
1.确定知道需要几个 什么类型的图表的情况下 <template> <div class="home"> <div id="leftTj"></div> <div id="rightTj"></div> </div> </template> <script> import * as echarts from "echarts"; export default { dat...
Echarts地图与图表联动
10-20
使用Echarts实现地图与图表的联动。这里的效果为点击美国的某个州，下面就会对应的刷新该州与其他州人口的对比饼图。全网首发，独此一家。
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表)
wqqstudy的博客
05-22 3970
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表) 利用某学院2019年和2020年的专业招生情况绘制柱状图联动图表； 利用某大学各专业2016-2020年的招生情况绘制饼图与柱状图的联动图表；
Echarts实现图表联动（多图联动、图表间联动）
沧笙踏歌的博客
09-08 7524
效果如图 本实例代码 function loadBlock9() { var myChart1 = echarts.init(document.getElementById("block9")); var myChart2 = echarts.init(document.getElementById("block10")); //series中的每一个label设置 var labelOption = { normal: { s
echart3 多图联动获取点击的数据，并把每个图上的数据取出后放入各自的div中...
weixin_33713707的博客
03-09 468
2019独角兽企业重金招聘Python工程师标准>>> ...
实现echarts多图联动效果
weixin_43637720的博客
05-28 891
里面还有单个移除等功能，有需要可以研究下。
python echart 3D曲面 多图联动
最新发布
04-01
### Python ECharts 实现 3D 曲面图与多图联动 #### 背景介绍 `PyEcharts` 是一个用于在 Python 中生成交互式图表的库，它基于百度开源的 `ECharts` 库。尽管 PyEcharts 提供了许多功能来创建复杂的可视化效果，但在实现高级功能（如 3D 曲面图或多图联动）时仍需深入了解其 API 和配置选项。 以下是关于如何使用 PyEcharts 创建 3D 曲面图以及实现多图联动的具体方法： --- #### 1. 安装依赖项 为了运行以下代码示例，请先安装必要的库： ```bash pip install pyecharts==1.* ``` 如果需要支持 HTML 渲染，则还需要安装 Jupyter Notebook 或其他前端工具。 --- #### 2. 使用 PyEcharts 绘制 3D 曲面图 下面是一个简单的例子，展示如何绘制 3D 曲面图： ```python from pyecharts.charts import Surface3D import numpy as np def generate_3d_surface(): # 数据准备 data = [] for i in range(-90, 91): for j in range(-90, 91): x = float(i) / 180 * np.pi y = float(j) / 180 * np.pi z = (np.sin(x)**2 + np.cos(y)**2) * 100 data.append([i, j, round(z, 2)]) c_schema = [ {"name": "X轴", "type": "value"}, {"name": "Y轴", "type": "value"}, {"name": "Z轴", "type": "value"} ] surface3d = ( Surface3D(init_opts=None) .add( series_name="", shading="color", data=data, xaxis3d_opts={"type": "value"}, yaxis3d_opts={"type": "value"}, grid3d_opts={"width": "100%", "height": "100%"}, ) .set_global_opts(title_opts={"text": "3D 曲面图"}) ) return surface3d.render_embed() generate_3d_surface() ``` 上述代码通过计算正弦和余弦函数生成数据集，并将其渲染为 3D 表面[^1]。 --- #### 3. 多图联动实现方式 要实现多个图表之间的联动，可以利用 `Grid` 布局组件并设置共享的坐标系或事件监听器。例如，当鼠标悬停在一个图表上时，另一个图表会同步更新高亮区域。 ##### 示例代码：两幅折线图联动 ```python from pyecharts.charts import Line, Grid from pyecharts.options import * # 准备数据 x_data = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] y_data1 = [120, 200, 150, 80, 70, 110, 130] y_data2 = [60, 100, 70, 40, 30, 50, 60] line_chart1 = ( Line() .add_xaxis(xaxis_data=x_data) .add_yaxis(series_name="Series A", y_axis=y_data1) ) line_chart2 = ( Line() .add_xaxis(xaxis_data=x_data) .add_yaxis(series_name="Series B", y_axis=y_data2) ) grid = ( Grid() .add(chart=line_chart1, grid_opts=opts.GridOpts(pos_bottom="60%")) .add(chart=line_chart2, grid_opts=opts.GridOpts(pos_top="60%")) ) grid.render_notebook() # 如果是在 Jupyter Notebook 下运行 ``` 在这个例子中，两个折线图被放置在同一页面的不同位置，并且它们可以通过相同的 X 轴进行联动操作。 --- #### 4. 结合 3D 图表与多图联动 对于更复杂的需求——比如将 3D 曲面图与其他类型的二维图表组合在一起形成联动关系——则可能需要借助 JavaScript 自定义扩展或者手动编写回调逻辑。由于 PyEcharts 的封装特性限制了部分灵活性，因此建议在这种情况下直接切换到原生 ECharts 进行开发。 --- #### 总结 以上展示了如何分别构建独立的 3D 曲面图和简单形式下的多图联动机制。然而需要注意的是，目前版本中的 PyEcharts 对于高度定制化的场景支持力度有限；若追求极致体验的话，推荐深入学习官方文档并与实际项目需求相结合进一步探索解决方案。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值