echart多表联动

最新推荐文章于 2024-05-22 10:05:28 发布
最新推荐文章于 2024-05-22 10:05:28 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 图表 文章标签： 备忘
<! 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 : [
                         {
                             type : 'category', //x轴为类目类型
                             axisLabel:{
                                 show:true,
                                 interval:0,
                                 rotate:45
                             },
                             data : ['00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00']
 
                     }],
                     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 : [
                         {
                             type : 'category', //x轴为类目类型
                             axisLabel:{
                                 show:true,
                                 interval:0,
                                 rotate:45
                             },
                             data : ['00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00']
 
                     }],
                     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 : [
                         {
                             type : 'category', //x轴为类目类型
                             axisLabel:{
                                 show:true,
                                 interval:0,
                                 rotate:45
                             },
                             data : ['00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00']
 
                     }],
                     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}
                         }
                     },
                     xAxis : [
                         {
                             type : 'category', //x轴为类目类型
                             axisLabel:{
                                 show:true,
                                 interval:0,
                                 rotate:45
                             },
                             data : ['00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00']
 
                     }],
                     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 >
oiqio
关注
专栏目录
echarts 多图联动
日常学习集锦
03-10 1986
echarts 多表联动
echarts多图表级联之一，图表之间联动
热门推荐
yaomengzhi的博客
07-31 1万+
1、示例 2、初始化图表，每个图表对应一个实例对象并加载初始化数据 // 基于准备好的dom，初始化echarts实例 var myChart1 = echarts.init(document.getElementById('main')); var myChart2 = echarts.init(document.getElementById('main2')); // 为e...
Echart3多图联动，一个时间轴控制多个图
04-11
Echart3多图联动，一个时间轴控制多个图，希望能够帮到大家!
echarts多图表联动
Heby的博客
10-09 3438
echarts的多图表联动有两个方法 方法一:官网实例在配置项内关联Examples - Apache EChartshttps://echarts.apache.org/examples/zh/editor.html?c=dataset-link 方法二:使用connect进行联动 (1条消息) ECharts 联动效果_出埃及记-CSDN博客https://blog.csdn.net/u014452812/article/details/78202789第二种联动方法在性能还是代码的可维护性都不是
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表)
最新发布
wqqstudy的博客
05-22 2514
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表) 利用某学院2019年和2020年的专业招生情况绘制柱状图联动图表； 利用某大学各专业2016-2020年的招生情况绘制饼图与柱状图的联动图表；
ECharts多图表联动功能
weixin_45653441的博客
01-10 5508
ECharts多图表联动功能的实现过程
ECharts的多表联动
2301_81685623的博客
04-15 877
当需要展示的数据比较多时，放在一个图表进行展示的效果不佳，此时，可以考虑使用两个图表进行联动展示。ECharts提供了多图表联动的功能(connect)，联动的多个图表可以共享组件事件并实现保存图片时的自动拼接。(1)分别设置每个ECharts对象为相同的group值,并通过在调用ECharts对象的connect方法时，传入group值，从而使用多个ECharts对象建立联动关系。(2)直接调用ECharts 的connect方法,参数为一个由多个需要联动的ECharts 对象组成的数组。
创建echart多个联动的示例代码
10-17
在本文中，我们将深入探讨如何创建ECharts多个联动的示例代码，这将帮助你实现交互式的图表展示，使得用户可以动态地查看不同维度的数据。ECharts是一个基于JavaScript的开源可视化库，它提供了丰富的图表类型和强大...
python echarts 多图联动,创建echart多个联动的示例代码
weixin_32208021的博客
03-25 1466
鼠标悬浮同时触发多个echart效果如下html代码选择时间间隔one secondone secondone minuteone hourone dayone weekone monthone year选择数据个数55101520253035确定css代码body {margin: 0;padding: 0;background-color: #eee;}.contain {padding: 1...
react hook 使用echarts折线图实现多表联动
wangxu000000的博客
09-22 621
注：这里只是为了记录自己开发过程中遇到的问题 为了熟悉react各类技术栈，这里使用的ref来实现的折线图加载 下面是代码概要： // 引入相关依赖 import React, { useEffect, useState, useRef } from 'react'； import echarts from 'echarts/lib/echarts' import'echarts/lib/component/title'; import'echarts/lib/chart/line';...
Echarts地图与图表联动
10-20
使用Echarts实现地图与图表的联动。这里的效果为点击美国的某个州，下面就会对应的刷新该州与其他州人口的对比饼图。全网首发，独此一家。
Echarts的多表联动
2301_81170993的博客
04-15 586
在这个例子中，我们有两个 ECharts 实例chart1和 chart2。图表1是一个柱状图，图表2是一个线形图。我们监听图表1的点击事件，然后更新图表2中对应索引的数据点。这样，当用户点击图表1中的某个柱子时，图表2的相应数据点会随之变化，实现了两个图表的联动。ECharts 的多表联动是指多个图表实例能够共享同一套数据，并且在一个图表实例上的操作会影响其他图表实例。这通常通过监听 ECharts 提供的事件系统来实现。
echarts多表关联
樊小二的博客
04-24 563
查看文档发现给出的方法是group或者直接connect，但是这种方法似乎不能满足现实项目中不同情况的需求。 但是我发现可以用on绑定mouseover和mouseout事件，在事件里通过给关联的表设置dispatchAction -> type: 'highlight'和type: 'downplay',来实现多表关联。但是请注意要使关联表里特定的数据高亮，似乎只可以在dispatchA...
Echart多图联动
SC BK
05-21 2957
Echart多图联动 核心代码： myChart1.connect([myChart2, myChart3, myChart4]); &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;ECharts&lt;/title&gt; &lt;/head&gt; &amp
echarts多图联动
m0_59805184的博客
03-14 1116
1.确定知道需要几个 什么类型的图表的情况下 <template> <div class="home"> <div id="leftTj"></div> <div id="rightTj"></div> </div> </template> <script> import * as echarts from "echarts"; export default { dat...
echart多图联动
weixin_39808181的博客
05-28 274
Echarts实现图表联动（多图联动、图表间联动）
沧笙踏歌的博客
09-08 7307
效果如图 本实例代码 function loadBlock9() { var myChart1 = echarts.init(document.getElementById("block9")); var myChart2 = echarts.init(document.getElementById("block10")); //series中的每一个label设置 var labelOption = { normal: { s
Echarts联动示例：时间间隔与数据量动态选择
在本文中，我们将深入探讨如何在ECharts中实现多个图表的联动效果。ECharts是一款强大的JavaScript图表库，它提供了丰富的图表类型和交互功能。本篇示例代码展示了如何通过HTML和JavaScript将两个联动组件集成到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值