创建echart多个联动的示例代码


Posted in Javascript onNovember 23, 2018
鼠标悬浮同时触发多个echart

效果如下

创建echart多个联动的示例代码

html代码

<div class="contain">
    <div class="sel">
      <div class="sel1">
        <div class="top">
          <span>选择时间间隔</span>
          <div class="show">
            <span>one second</span>
            <i class="glyphicon glyphicon-chevron-right"></i>
          </div>
        </div>
        <div class="block">
          <div leap="second">one second</div>
          <div leap="minute">one minute</div>
          <div leap="hour">one hour</div>
          <div leap="day">one day</div>
          <div leap="week">one week</div>
          <div leap="month">one month</div>
          <div class="active" leap="year">one year</div>
        </div>
      </div>
      <div class="sel2">
        <div class="top">
          <span>选择数据个数</span>
          <div class="show">
            <span>5</span>
            <i class="glyphicon glyphicon-chevron-right"></i>
          </div>
        </div>
        <div class="block">
          <div leap="5">5</div>
          <div leap="10">10</div>
          <div leap="15">15</div>
          <div leap="20">20</div>
          <div leap="25">25</div>
          <div leap="30">30</div>
          <div leap="35">35</div>
        </div>
      </div>
      <div class="zybtn">确定</div>
    </div>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 1000px;height:300px;margin-top:45px;"></div>
    <div id="main2" style="width: 1000px;height:300px;"></div>
  </div>

css代码

body {
  margin: 0;
  padding: 0;
  background-color: #eee;
}
.contain {
  padding: 10px;
}
.sel {
  position: absolute;
  height: 250px;
  z-index: 10;
}
.sel>div {
  float: left;
  margin-right: 10px;
}
.top span {
  display: inline-block;
  width: 100px;
  height: 30px;
}
.top .show {
  width: 125px;
  height: 25px;
  float: right;
  border: 1px solid #444;
  padding-left: 5px;
  position: relative;
}

.block {
  float: right;
  position: relative;
  border-radius: 5px;
  padding: 5px;
  width: 120px;
  box-shadow: 1px 1px 5px #444;
  display: none;
  background-color: #fff;
}
.block>div {
  height: 25px;
  line-height: 25px;
  padding-left: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.block>div:hover {
  background-color: #D3E3E5;
}
.block>div.active {
  background-color: #087C90;
  color: #fff;
}
.zybtn {
  width: 80px;
  height: 30px;
  border-radius: 5px;
  background-color: #46AD08;
  line-height: 30px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
i.glyphicon {
  top: 3px;
  right: 5px
}

js代码

function drawchart(timearr, dataarr) {
  // 基于准备好的dom,初始化echarts实例
  var myChart1 = echarts.init(document.getElementById('main'));
  var myChart2 = echarts.init(document.getElementById('main2'));

  // 指定图表的配置项和数据
  var option1 = {
    title: {
      text: 'chart1'
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
      lineStyle: {
        color: '#000',
      }
    },
    legend: {
      data: ['销量1']
    },
    grid:{
      y2:140
    },
    xAxis: [{
      type: 'category',
      data: timearr,
      axisLabel: {
        interval: 0, //横轴信息全部显示
        rotate: -45, //-30度角倾斜显示
      }
    }],
    yAxis: [{
      type: 'value',

    }],
    series: [{
      name: '销量1',
      type: 'line',
      data: dataarr
    }]
  };
  var option2 = {
    title: {
      text: 'chart2'
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
      lineStyle: {
        color: '#000',
      }
    },
    legend: {
      data: ['销量2']
    },
    grid:{
      y2:140
    },
    xAxis: [{
      type: 'category',
      data: timearr,
      axisLabel: {
        interval: 0, //横轴信息全部显示
        rotate: -45, //-30度角倾斜显示
      }
    }],
    yAxis: [{
      type: 'value',

    }],
    series: [{
      name: '销量2',
      type: 'line',
      data: dataarr
    }]
  };

  // 为echarts对象加载数据
  myChart1.setOption(option1);
  myChart2.setOption(option2); //联动配置

  // 分别设置每个实例的 group id
  myChart1.group = 'group1';
  myChart2.group = 'group1';
  echarts.connect('group1');
  // 或者可以直接传入需要联动的实例数
  // echarts.connect([myChart1,myChart2]);
}
// 获取x轴时间字符串
function gettimestr(tseconds) {
  var str = '';
  var year = new Date(tseconds).getFullYear();
  var month = new Date(tseconds).getMonth() + 1;
  var date = new Date(tseconds).getDate();
  var hour = new Date(tseconds).getHours();
  var minute = new Date(tseconds).getMinutes();
  var second = new Date(tseconds).getSeconds();
  if (month < 10) {
    month = "0" + month
  }
  if (date < 10) {
    date = "0" + date
  }
  if (hour < 10) {
    hour = "0" + hour
  }
  if (minute < 10) {
    minute = "0" + minute
  }
  if (second < 10) {
    second = "0" + second
  }
  str += year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
  return str;
}
getsel()
// 获取两个数值
function getsel() {
  $("i").on("click", function () {
    var that = $(this);
    var block = that.parents(".top").next();
    // 点击i触发函数,判断类型
    if ($(this).hasClass("glyphicon-chevron-right")) {
      $(this).removeClass("glyphicon-chevron-right");
      $(this).addClass("glyphicon-chevron-down")
      block.children("div").each(function () {
        $(this).removeClass("active")
      });
      block.slideDown();

    } else if ($(this).hasClass("glyphicon-chevron-down")) {
      $(this).removeClass("glyphicon-chevron-down");
      $(this).addClass("glyphicon-chevron-right")
      block.slideUp()
    }
    block.children("div").on("click", function () {
      $(this).addClass("active");
      that.prev("span").html($(this).html())
      that.removeClass("glyphicon-chevron-down");
      that.addClass("glyphicon-chevron-right")
      block.slideUp()
    });
  });
  var val1 = 1000;
  var val2 = 5;
  $(".zybtn").on("click", function () {
    switch ($(".sel1 .show span").html()) {
      case 'one second':
        val1 = 1000;
        break;
      case 'one minute':
        val1 = 1000 * 60;
        break;
      case 'one hour':
        val1 = 1000 * 3600;
        break;
      case 'one day':
        val1 = 1000 * 3600 * 24;
        break;
      case 'one week':
        val1 = 1000 * 3600 * 24 * 7;
        break;
      case 'one month':
        val1 = 1000 * 3600 * 24 * 30;
        break;
      case 'one year':
        val1 = 1000 * 3600 * 24 * 365;
        break;
    }
    switch ($(".sel2 .show span").html()) {
      case '5':
        val2 = 5;
        break;
      case '10':
        val2 = 10;
        break;
      case '15':
        val2 = 15;
        break;
      case '20':
        val2 = 20;
        break;
      case '25':
        val2 = 25;
        break;
      case '30':
        val2 = 30;
        break;
      case '35':
        val2 = 35;
        break;
    }
    changedata(val1, val2)
  })
  changedata(val1, val2)
}

function changedata(sel1, sel2) {
  // 获取当前日期
  var getdate = new Date();
  var tseconds = getdate.getTime();

  var timearr = [];
  var dataarr = [];
  for (var i = 0; i < sel2; i++) {
    timearr.push(gettimestr(tseconds - sel1 * i))
    dataarr.push(Math.ceil(Math.random() * 10))
  }

  drawchart(timearr, dataarr)
}

PS:echart多表联动

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的一些注意事项 更新中
Dec 06 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
详解Angular模板引用变量及其作用域
Nov 23 #Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 #Javascript
详解Vue2.0组件的继承与扩展
Nov 23 #Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 #Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 #Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 #Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 #Javascript
You might like
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
python访问sqlserver示例
2014/02/10 Python
Python 文件读写操作实例详解
2014/03/12 Python
python执行外部程序的常用方法小结
2015/03/21 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
工程管理专业个人求职信范文
2013/12/07 职场文书
门面房租房协议书
2014/08/20 职场文书
小学安全工作总结2015
2015/05/18 职场文书
国富论读书笔记
2015/06/26 职场文书
《花钟》教学反思
2016/02/17 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL