Echarts 同一实例中在提示框中同时显示不同图表的数据

最新推荐文章于 2024-03-26 15:55:54 发布
最新推荐文章于 2024-03-26 15:55:54 发布
阅读量1k 收藏
点赞数 1
分类专栏： 前端 文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gabriel_wei/article/details/126445191
版权

效果

文字说不清楚，看图。就是同一个X坐标，在提示框同时显示上下两部分的数据
在这里插入图片描述

实例

百度官方实例

function splitData(rawData) {
  var categoryData = [];
  var values = [];
  var volumns = [];
  for (var i = 0; i < rawData.length; i++) {
    categoryData.push(rawData[i].splice(0, 1)[0]);
    values.push(rawData[i]);
    volumns.push(rawData[i][4]);
  }
  return {
    categoryData: categoryData,
    values: values,
    volumns: volumns
  };
}
function calculateMA(dayCount, data) {
  var result = [];
  for (var i = 0, len = data.values.length; i < len; i++) {
    if (i < dayCount) {
      result.push('-');
      continue;
    }
    var sum = 0;
    for (var j = 0; j < dayCount; j++) {
      sum += data.values[i - j][1];
    }
    result.push(+(sum / dayCount).toFixed(3));
  }
  return result;
}
$.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
  var data = splitData(rawData);
  myChart.setOption(
    (option = {
      animation: false,
      legend: {
        bottom: 10,
        left: 'center',
        data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        position: function (pos, params, el, elRect, size) {
          var obj = { top: 10 };
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
          return obj;
        },
        extraCssText: 'width: 170px'
      },
      axisPointer: {
        link: { xAxisIndex: 'all' },
        label: {
          backgroundColor: '#777'
        }
      },
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: false
          },
          brush: {
            type: ['lineX', 'clear']
          }
        }
      },
      brush: {
        xAxisIndex: 'all',
        brushLink: 'all',
        outOfBrush: {
          colorAlpha: 0.1
        }
      },
      grid: [
        {
          left: '10%',
          right: '8%',
          height: '50%'
        },
        {
          left: '10%',
          right: '8%',
          bottom: '20%',
          height: '15%'
        }
      ],
      xAxis: [
        {
          type: 'category',
          data: data.categoryData,
          scale: true,
          boundaryGap: false,
          axisLine: { onZero: false },
          splitLine: { show: false },
          splitNumber: 20,
          min: 'dataMin',
          max: 'dataMax',
          axisPointer: {
            z: 100
          }
        },
        {
          type: 'category',
          gridIndex: 1,
          data: data.categoryData,
          scale: true,
          boundaryGap: false,
          axisLine: { onZero: false },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          splitNumber: 20,
          min: 'dataMin',
          max: 'dataMax',
          axisPointer: {
            label: {
              formatter: function (params) {
                var seriesValue = (params.seriesData[0] || {}).value;
                return (
                  params.value +
                  (seriesValue != null
                    ? '\n' + echarts.format.addCommas(seriesValue)
                    : '')
                );
              }
            }
          }
        }
      ],
      yAxis: [
        {
          scale: true,
          splitArea: {
            show: true
          }
        },
        {
          scale: true,
          gridIndex: 1,
          splitNumber: 2,
          axisLabel: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false }
        }
      ],
      dataZoom: [
        {
          type: 'inside',
          xAxisIndex: [0, 1],
          start: 98,
          end: 100
        },
        {
          show: true,
          xAxisIndex: [0, 1],
          type: 'slider',
          top: '85%',
          start: 98,
          end: 100
        }
      ],
      series: [
        {
          name: 'Dow-Jones index',
          type: 'candlestick',
          data: data.values,
          itemStyle: {
            normal: {
              color: '#06B800',
              color0: '#FA0000',
              borderColor: null,
              borderColor0: null
            }
          },
          tooltip: {
            formatter: function (param) {
              param = param[0];
              return [
                'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
                'Open: ' + param.data[0] + '<br/>',
                'Close: ' + param.data[1] + '<br/>',
                'Lowest: ' + param.data[2] + '<br/>',
                'Highest: ' + param.data[3] + '<br/>'
              ].join('');
            }
          }
        },
        {
          name: 'MA5',
          type: 'line',
          data: calculateMA(5, data),
          smooth: true,
          lineStyle: {
            normal: { opacity: 0.5 }
          }
        },
        {
          name: 'MA10',
          type: 'line',
          data: calculateMA(10, data),
          smooth: true,
          lineStyle: {
            normal: { opacity: 0.5 }
          }
        },
        {
          name: 'MA20',
          type: 'line',
          data: calculateMA(20, data),
          smooth: true,
          lineStyle: {
            normal: { opacity: 0.5 }
          }
        },
        {
          name: 'MA30',
          type: 'line',
          data: calculateMA(30, data),
          smooth: true,
          lineStyle: {
            normal: { opacity: 0.5 }
          }
        },
        {
          name: 'Volumn',
          type: 'bar',
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: data.volumns
        }
      ]
    }),
    true
  );
});

stock-DJI.json 部分数据

[
    [
        "2004-01-02",
        10452.74,
        10409.85,
        10367.41,
        10554.96,
        168890000
    ],
    [
        "2004-01-05",
        10411.85,
        10544.07,
        10411.85,
        10575.92,
        221290000
    ],
    [
        "2004-01-06",
        10543.85,
        10538.66,
        10454.37,
        10584.07,
        191460000
    ],
    [
        "2004-01-07",
        10535.46,
        10529.03,
        10432,
        10587.55,
        225490000
    ],
    [
        "2004-01-08",
        10530.07,
        10592.44,
        10480.59,
        10651.99,
        237770000
    ],
    [
        "2004-01-09",
        10589.25,
        10458.89,
        10420.52,
        10603.48,
        223250000
    ],
    [
        "2004-01-12",
        10461.55,
        10485.18,
        10389.85,
        10543.03,
        197960000
    ],
    [
        "2004-01-13",
        10485.18,
        10427.18,
        10341.19,
        10539.25,
        197310000
    ],
    [
        "2004-01-14",
        10428.67,
        10538.37,
        10426.89,
        10573.85,
        186280000
    ],
    [
        "2004-01-15",
        10534.52,
        10553.85,
        10454.52,
        10639.03,
        260090000
    ],
    [
        "2004-01-16",
        10556.37,
        10600.51,
        10503.7,
        10666.88,
        254170000
    ],
    [
        "2004-01-20",
        10601.4,
        10528.66,
        10447.92,
        10676.96,
        224300000
    ],
    [
        "2004-01-21",
        10522.77,
        10623.62,
        10453.11,
        10665.7,
        214920000
    ],
    [
        "2004-01-22",
        10624.22,
        10623.18,
        10545.03,
        10717.4,
        219720000
    ],
    [
        "2004-01-23",
        10625.25,
        10568.29,
        10490.14,
        10691.77,
        234260000
    ],
    [
        "2004-01-26",
        10568,
        10702.51,
        10510.44,
        10725.18,
        186170000
    ],
    [
        "2004-01-27",
        10701.1,
        10609.92,
        10579.33,
        10748.81,
        206560000
    ],
    [
        "2004-01-28",
        10610.07,
        10468.37,
        10412.44,
        10703.25,
        247660000
    ],
    [
        "2004-01-29",
        10467.41,
        10510.29,
        10369.92,
        10611.56,
        273970000
    ],
    [
        "2004-01-30",
        10510.22,
        10488.07,
        10385.56,
        10551.03,
        208990000
    ],
    [
        "2004-02-02",
        10487.78,
        10499.18,
        10395.55,
        10614.44,
        224800000
    ],
    [
        "2004-02-03",
        10499.48,
        10505.18,
        10414.15,
        10571.48,
        183810000
    ],
    [
        "2004-02-04",
        10503.11,
        10470.74,
        10394.81,
        10567.85,
        227760000
    ],
    [
        "2004-02-05",
        10469.33,
        10495.55,
        10399.92,
        10566.37,
        187810000
    ],
    [
        "2004-02-06",
        10494.89,
        10593.03,
        10433.7,
        10634.81,
        182880000
    ],
    [
        "2004-02-09",
        10592,
        10579.03,
        10433.7,
        10634.81,
        160720000
    ],
    [
        "2004-02-10",
        10578.74,
        10613.85,
        10511.18,
        10667.03,
        160590000
    ],
    [
        "2004-02-11",
        10605.48,
        10737.7,
        10561.55,
        10779.4,
        277850000
    ],
    [
        "2004-02-12",
        10735.18,
        10694.07,
        10636.44,
        10775.03,
        197560000
    ],
    [
        "2004-02-13",
        10696.22,
        10627.85,
        10578.66,
        10755.47,
        208340000
    ],
    [
        "2004-02-17",
        10628.88,
        10714.88,
        10628.88,
        10762.07,
        169730000
    ],
    [
        "2004-02-18",
        10706.68,
        10671.99,
        10623.62,
        10764.36,
        164370000
    ],
    [
        "2004-02-19",
        10674.59,
        10664.73,
        10626.44,
        10794.95,
        219890000
    ],
    [
        "2004-02-20",
        10666.29,
        10619.03,
        10559.11,
        10722.77,
        220560000
    ],
    [
        "2004-02-23",
        10619.55,
        10609.62,
        10508.89,
        10711.84,
        229950000
    ],
    [
        "2004-02-24",
        10609.55,
        10566.37,
        10479.33,
        10681.4,
        225670000
    ],
    [
        "2004-02-25",
        10566.59,
        10601.62,
        10509.4,
        10660.73,
        192420000
    ],
    [
        "2004-02-26",
        10598.14,
        10580.14,
        10493.7,
        10652.96,
        223230000
    ],
    [
        "2004-02-27",
        10581.55,
        10583.92,
        10519.03,
        10689.55,
        200050000
    ],
    [
        "2004-03-01",
        10582.25,
        10678.14,
        10568.74,
        10720.14,
        185030000
    ],
    [
        "2004-03-02",
        10678.36,
        10591.48,
        10539.4,
        10713.92,
        215580000
    ],
    [
        "2004-03-03",
        10588.59,
        10593.11,
        10506.66,
        10651.03,
        188800000
    ],
    [
        "2004-03-04",
        10593.48,
        10588,
        10522.59,
        10645.33,
        161050000
    ],
    [
        "2004-03-05",
        10582.59,
        10595.55,
        10497.11,
        10681.4,
        223550000
    ],
    [
        "2004-03-08",
        10595.37,
        10529.48,
        10505.85,
        10677.85,
        199300000
    ],
    [
        "2004-03-09",
        10529.52,
        10456.96,
        10391.48,
        10567.03,
        246270000
    ]
    ]

重要部分

实现联动

    axisPointer: {
      link: { xAxisIndex: 'all'},
      label: {
        backgroundColor: '#777'
      }
    },

官网说明：https://echarts.apache.org/v4/zh/option.html#axisPointer.link

注意：这李的link部分

实现提示框原理鼠标

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      position: function (pos, params, el, elRect, size) {
        var obj = { top: 10 };
        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
        return obj;
      },
      extraCssText: 'width: 170px'
    },

可能存在的问题

如果上下两部分使用的是同一X轴数据，结果鼠标划上去以后，十字交叉线却显示在不同位置
在这里插入图片描述
由于X轴一样，上图中的1,2应该是一条线，如下所示：
在这里插入图片描述

  • 先检查X轴赋予的数据是否相同
  • 检查放缩块区间是否一致，如下代码是错误的，放缩区域不一样，那么肯定不在一条线！
[{
      // 用于区域缩放
      type: 'inside',
      start: 50,
      end: 70
    }, {
      show: true,
      type: 'slider',
      y: '90%',
      start: 50,
      end: 100
    }, {
      show: false,
      xAxisIndex: [0, 1],
      type: 'slider',
      start: 20,
      end: 100
    }]

改为正确的

    dataZoom: [{
      // 用于区域缩放
      type: 'inside',
      start: 50,
      end: 70
    }, {
      show: true,
      type: 'slider',
      y: '90%',
      start: 50,
      end: 70
    }, {
      show: false,
      xAxisIndex: [0, 1],
      type: 'slider',
      start: 50,
      end: 70
    }],
Gabriel_wei
关注
专栏目录
echarts实现一个页面同时显示多个图表
weixin_38981413的博客
12-27 10万+
一个JSON数据，通过echarts实现一个页面同时显示多个图表，我这是通过写一个option实现多个图表（折线图，饼图，关系图）展示，也就是说只要一个div（dom对象），实现多个不同形状的图表展示。总体采用了LayUI（表格）+eCharts技术，通过在html页面，引入自定义的js，实现预期页面效果。 自己在网上找了下，没有找到对应的文章，直接来说怎么实现，所以特意写了此文章，共同学习。总结技巧：1.先用最少的代码显示出图 2.【关键点】自己能控制每个图在指定的地方的显示 3.确定每个图位置，整体布
echarts拼接两个不同方向的图表（超详细）
wsimpossible的博客
10-21 4291
背景与需求： 在使用escharts实现前端显示的图表时想要实现如图所示的效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FHJFaiRM-1603267346044)(https://images.cnblogs.com/cnblogs_com/wshope/1867484/o_201021063330connect-two-charts.png)] 一个图表，上面是数量的柱形图，下面是与上一年数据的比值，在官网上找不到这种效果的实例，百度也都不是我想要的效果，可能是我
Echarts 实现在一个画布中画出多个上下排列柱状图
盖世小可爱的博客
04-29 1984
实现上下双柱图显示
根据需要的图表类型选择echarts对应的series类型
与望
01-09 1万+
折线型：line 条状型：bar 饼图：pie 散点图：scatter 涟漪特效散点图：effectScatter 雷达图：radar 树状图：tree treemap 旭日图sunburst 箱形图boxplot k线图 candlestick 热力图heatmap 地图map 平行坐标系parallel 线路图 lines 关系图graph 有向无环图 sank...
echarts使用数据集分别描绘两种类型图
hongsir的博客
10-13 1622
echarts使用数据集分别描绘两种类型图使用数据集初尝试option详细配置项和数据数据集dataset设置指定数据所要展示的图表类型完整js代码 使用数据集 根据echarts官网使用手册，数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持 数据集 开始，更推荐使用 数据集 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。 初尝试 要求在同一页面中摆放两种图表： opt
echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据
热门推荐
一只爱吃糖的小羊
04-11 4万+
最近做的一个项目的其中一个页面有图表展示数据的需求，有柱状图、折线图和饼图，于是引入了强大的echarts. echarts的强大之处和有点这里就不多说了，详细请参照echarts官网和echarts在线demo。 但是我们的页面要展示的数据比较多，同一个页面有数个折线图、柱状图和饼图。项目引入echarts的方法是模块化引入，于是就有了一个问题：怎么在同一个页面用echarts同时展示多个图...
echarts柱状图和折线图双图表配置项
专注
10-30 227
【代码】echarts柱状图和折线图双图表配置项。
echarts使用，在一个悬浮窗里显示两组不同的数据。
小天的专栏
08-25 1万+
     最近公司的一个项目需要使用地图来展现数据，而且在悬浮窗中展现一个省份的两组不同数据。如果不在 formatter里面写functions函数的话，那么展现的数据只是两者只和。      这只是个例子，代码结构很简单，如下：一个js，一个map.jsp页面                          代码如下：
基于echarts的数据分析实例
03-16
ECharts允许在同一图表上展示多种类型的图表，比如在同一画布上同时显示柱状图和折线图，方便对比不同数据系列。 8. **地图可视化**： ECharts内置了中国及世界主要国家的地图数据，可以方便地进行地理数据的可视...
1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
web17886480312的博客
02-24 2158
一、echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一，是用折线将各个数据点标志连接起来的图表，不仅可以表示数量的多少，而且可以反映同一事物在不同时间里的发展变化的情况以及变化趋势。 看着官网示例的这些花花绿绿的折线图，相信在日常的开发中，只要稍加配置调一下，已经可以满足9成的需求了。 二、echarts的下载、安装与使用 在上一篇的文章里，我们主要是学习如何快速上手Echarts的一些属性设置，我们演示的时候用的引入方式是一次性引入所有的资源。 如这样： i
echarts图表示例教程
02-11
1. 提示框：鼠标悬停在数据点上时，会显示详细的数值信息。 2. 图例：控制图表中系列的显示和隐藏。 3. 数据区域缩放：用户可以手动选择图表的显示范围。 4. 动态数据加载：ECharts支持流式加载数据，适用于大数据量...
echarts-图表上下方展示数据(表格视觉)
qq_40905132的博客
07-31 936
需求：在echarts图表上下方需要展示数据，如效果图。一开始打算拆分两个表格在echarts图表上下方展示，但是找到了一个更绝妙的办法，就是利用echarts图表的多Y轴和多X轴，再加个左侧表格列，形成表格的视觉呈现。要形成表格的效果，图表需要留有一定得距离。
Echarts柱状图的tooltip显示不同条数据
qitiandada的博客
04-20 2628
Echarts柱状图的tooltip显示不同条数据 因为需求需要hover每一个柱状图的时候显示不同条数据 第一个柱状图需要获取这些数据 而第二个就是这样 每一个数据都不相同 这样就比较难受，所以需要监听到每一次鼠标到达的柱状图，然后进行相应的操作。 监听这块在思否上找到一位大佬的方式 tooltip : { trigger: 'axis', axisPointer: { type: "cross", label: { format
echart柱状条根据不同数据显示不同颜色
yuyu_2019的博客
03-13 243
【代码】echart柱状条根据不同数据显示不同颜色。
Echarts 实现两个图表联动
leyu_miss的博客
06-19 708
【代码】Echarts 实现两个图表联动。
Echarts实现上下拼接两个折线图，每个折线图都是双y轴
最新发布
hunantai的博客
03-26 841
【代码】Echarts实现上下拼接两个折线图，每个折线图都是双y轴。
echarts柱图两组数据不同，处理数据
m0_47733490的博客
11-24 1442
根据需求，该柱状图为阶梯图需要两组data数据，一组为最高点的值，一组为最低点的值，但后端只返还给我一组数据，所以我要将这组数据深拷贝出来一份作为第二组data使用，但柱图x轴最后一项为总数，低点只能为0，所以要将复制出来的第二组data进行处理 首先调用接口，拿到接口数据，然后将数据循环拿到我想要的name字段作为x轴数据，count作为y轴数据，然后将y轴数据深拷贝一份，得到一个新的数组，然后利用splice方法，找到数组中的下标最后一个数据将他替换成0，就得到了最低点为0的总数效果，spl...
echarts柱状图，折线图融合在同一个容器里，双Y轴展示数据，数据配置以及遇到的问及
猫
04-17 1795
双Y轴展示数据，如下图， yAxis数组中需要配置2个元素，分别用来配置两个Y轴的信息 yAxis: [ { name: '调用次数/次', max: this.y1_max, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值