echarts 多图联动

最新推荐文章于 2024-07-11 15:27:19 发布

怕是不尽芳华

最新推荐文章于 2024-07-11 15:27:19 发布

阅读量1.9k

点赞数

分类专栏：图表文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_41066340/article/details/123401103

版权

本文详细探讨了如何使用ECharts库在多个图表间实现数据联动，通过JavaScript和ECMAScript技术，读者将学习到如何设置联动选项，以及在点击一个图表时更新其他图表的数据和视觉效果，从而提升数据可视化交互体验。

摘要由CSDN通过智能技术生成

<script type="text/javascript">
  // 图表数据准备
  var yArr = [<?php foreach($yArr as $v){; ?>"<?php echo $v ?>",<?php }; ?>]
  // console.log(yArr)
  var xArr = [<?php foreach($xArr as $v){; ?>"<?php echo $v ?>",<?php }; ?>]
  // console.log(xArr)
  var yArrR1 = [<?php foreach($yArrR1 as $v){; ?>"<?php echo $v ?>",<?php }; ?>]
  // console.log(yArrR1)
  var yArrR2 = [<?php foreach($yArrR2 as $v){; ?>"<?php echo $v ?>",<?php }; ?>]
  // console.log(yArrR2)
  var yArrL2 = [<?php foreach($yArrL2 as $v){; ?>"<?php echo $v ?>",<?php }; ?>]
  // console.log(yArrL2)   

  // 基于准备好的dom，初始化echarts实例
  var myChart1 = echarts.init(document.getElementById('echarsZX1'));
  var myChart2 = echarts.init(document.getElementById('echarsZX2')); 
  var myChart3 = echarts.init(document.getElementById('echarsZX3')); 
  // 指定图表的配置项和数据
  var option1 = {
      title: {
          text: '曲线1',
          x:'center',
          y:'top',
          textAlign:'left',
          padding: [15, 0]
      },
      backgroundColor: 'white',
      tooltip: {
          show: true  ,  // 显示提示框 弹窗
          // alwaysShowContent: true, //不移除提示框
          trigger: 'axis',
      },
      // legend: {
      //     data:['向心性']
      // },
      grid: {  //折线图设置大小
          // top: "40%",
          left: "15%&#