创建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 相关文章推荐
js constructor的实际作用分析
Nov 15 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 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实现json_decode不转义中文的方法
2017/05/20 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
javascript常用函数(2)
2015/11/05 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
js实现随机点名
2021/01/19 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
python self,cls,decorator的理解
2009/07/13 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
优秀交警事迹材料
2014/01/26 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
校园安全教育广播稿
2014/02/17 职场文书
涨价通知
2015/04/23 职场文书
在校学生证明格式
2015/06/24 职场文书
干部考核工作总结
2015/08/12 职场文书
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS