echarts tooltip 多series应用

最新推荐文章于 2024-05-19 20:00:44 发布

云中漫步87

最新推荐文章于 2024-05-19 20:00:44 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： echarts tooltip

本文链接：https://blog.csdn.net/wangyunzhong/article/details/119237418

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

整体需求

如下图：

热力图作为底，显示委托信息。
两种颜色的气泡图显示买卖信息。
成交曲线
横轴缩放
气泡图，折线图是否展示的开关

测试数据

x轴定义：marketData.xAxisData
y轴定义：marketData.yAxisData
热力图数据：marketData.quotData
卖气泡数据：marketData.matchSellData
买气泡数据：marketData.matchBuyData
成交曲线数据：marketData.matchData

      var marketData = {
        xAxisData: [],
        yAxisData: [],
        quotData: [],
        matchSellData: [],
        matchBuyData: [],
        matchData: []
      }
      marketData.xAxisData = ['09:00:00', '09:00:01', '09:00:02', '09:00:03', '09:00:04', '09:00:05', '09:00:06', '09:00:07', '09:00:08', '09:00:09', '09:00:10', '09:00:11']
      marketData.yAxisData = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
      marketData.quotData = [{ 'x': 0, 'y': 0, 'bsFalg': '1' },
        { 'x': 1, 'y': 0, 'bsFalg': '1' },
        { 'x': 1, 'y': 1, 'bsFalg': '1' },
        { 'x': 1, 'y': 2, 'bsFalg': '1' },
        { 'x': 2, 'y': 0, 'bsFalg': '1' },
        { 'x': 2, 'y': 1, 'bsFalg': '1' },
        { 'x': 2, 'y': 2, 'bsFalg': '3' },
        { 'x': 3, 'y': 1, 'bsFalg': '3' },
        { 'x': 3, 'y': 2, 'bsFalg': '3' },
        { 'x': 3, 'y': 3, 'bsFalg': '3' },
        { 'x': 4, 'y': 2, 'bsFalg': '3' },
        { 'x': 4, 'y': 3, 'bsFalg': '1' },
        { 'x': 4, 'y': 4, 'bsFalg': '1' },
        { 'x': 5, 'y': 2, 'bsFalg': '1' },
        { 'x': 5, 'y': 3, 'bsFalg': '1' },
        { 'x': 5, 'y': 4, 'bsFalg': '1' }]
      marketData.matchSellData = [{ 'x': 2, 'y': 0, 'alertTime': '09:00:01', 'matchQty': 100, 'scatterSize': 10 },
        { 'x': 3, 'y': 1, 'alertTime': '09:00:02', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 4, 'y': 2, 'alertTime': '09:00:03', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 1, 'y': 0, 'alertTime': '09:00:04', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 5, 'y': 2, 'alertTime': '09:00:05', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 6, 'y': 3, 'alertTime': '09:00:06', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 7, 'y': 4, 'alertTime': '09:00:07', 'matchQty': 100, 'scatterSize': 10 },
        { 'x': 8, 'y': 4, 'alertTime': '09:00:08', 'matchQty': 100, 'scatterSize': 10 },
        { 'x': 9, 'y': 4, 'alertTime': '09:00:09', 'matchQty': 100, 'scatterSize': 10 }]
      marketData.matchBuyData = [{ 'x': 2, 'y': 1, 'alertTime': '09:00:01', 'matchQty': 100, 'scatterSize': 10 },
        { 'x': 3, 'y': 2, 'alertTime': '09:00:02', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 4, 'y': 3, 'alertTime': '09:00:03', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 1, 'y': 1, 'alertTime': '09:00:04', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 5, 'y': 1, 'alertTime': '09:00:05', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 6, 'y': 2, 'alertTime': '09:00:06', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 7, 'y': 3, 'alertTime': '09:00:07', 'matchQty': 100, 'scatterSize': 10 },
        { 'x': 8, 'y': 3, 'alertTime': '09:00:08', 'matchQty': 100, 'scatterSize': 10 },
        { 'x': 9, 'y': 3, 'alertTime': '09:00:09', 'matchQty': 100, 'scatterSize': 10 }]
      marketData.matchData = [{ 'x': 1, 'y': 1, 'alertTime': '09:00:01', 'matchQty': 100, 'scatterSize': 10 },
        { 'x': 2, 'y': 2, 'alertTime': '09:00:02', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 3, 'y': 3, 'alertTime': '09:00:03', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 4, 'y': 1, 'alertTime': '09:00:04', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 5, 'y': 1, 'alertTime': '09:00:05', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 6, 'y': 2, 'alertTime': '09:00:06', 'matchQty': 110, 'scatterSize': 20 },
        { 'x': 7, 'y': 3, 'alertTime': '09:00:07', 'matchQty': 100, 'scatterSize': 10 },
        { 'x': 8, 'y': 3, 'alertTime': '09:00:08', 'matchQty': 100, 'scatterSize': 10 },
        { 'x': 9, 'y': 3, 'alertTime': '09:00:09', 'matchQty': 100, 'scatterSize': 10 }]
      var heatData = marketData.quotData.map(quot => [quot.x, quot.y, quot.bsFalg])

多DataSet

Apache ECharts 4 开始支持了 dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。
使用dataset的优势：

能够贴近这样的数据可视化常见思维方式：(I) 提供数据，(II) 指定数据到视觉的映射，从而形成图表。
数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。

简单使用：

dataset: [
          {
            source: marketData.matchBuyData
          },
          {
            source: marketData.matchSellData
          },
          {
            source: marketData.matchData
          }
        ]

多series

heatmap依旧使用data的方式直接引用数据。官方文档明确说明当前dataset的支持列表：

目前并非所有图表都支持 dataset。支持 dataset 的图表有： line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom。

scatter通过datasetIndex指定dataset的哪个数据集绑定。序号从0开始。通过symbolSize来设定气泡的大小。
折线图关联dataset的方式和scatter相同。

series: [
          {
            id: 0,
            name: 'Punch Card',
            type: 'heatmap',
            data: heatData,
            label: {
              show: false
            },
            tooltip: {
              show: false
            }
          },
          {
            id: 1,
            name: '买气泡',
            symbolSize: function(data) {
              return data.scatterSize
            },
            type: 'scatter',
            itemStyle: {
              color: 'yellow'
            },
            encode: {
              x: 'x',
              y: 'y'
            },
            datasetIndex: 0,
            tooltip: {
              trigger: 'item',
              formatter: function(params) {
                return '成交主力：买<br/>' + '成交量：' + params.data.matchQty + ' （手） <br/>' + '成交时间窗口：' + params.data.alertTime
              }
            }
          },
          {
            id: 2,
            name: '卖气泡',
            symbolSize: function(data) {
              return data.scatterSize
            },
            type: 'scatter',
            itemStyle: {
              color: 'blue'
            },
            encode: {
              x: 'x',
              y: 'y'
            },
            datasetIndex: 1,
            tooltip: {
              trigger: 'item',
              formatter: function(params) {
                return '成交主力：卖<br/>' + '成交量：' + params.data.matchQty + ' （手） <br/>' + '成交时间窗口：' + params.data.alertTime
              }
            }
          },
          {
            id: 3,
            name: '成交数据',
            type: 'line',
            smooth: true,
            encode: {
              x: 'x',
              y: 'y'
            },
            datasetIndex: 2,
            tooltip: {
              show: false
            }
          }]

tooltip声明

tooltip声明维度

提示框组件的通用介绍：

提示框组件可以设置在多种地方：

可以设置在全局，即 tooltip
可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以设置在系列中，即 series.tooltip
可以设置在系列的每个数据项中，即 series.data.tooltip

设置

在全局设置tooltip开启(不在全局设置，tooltip不显示)：

option = {
...
        tooltip: {
          trigger: 'item',
          show: true
        },
...
}

series分别设置tooltip展示：

option = {
...
        series: [
          {
          ...
            type: 'heatmap',
            data: heatData,
            tooltip: {
              show: false
            }
          },
          {
            id: 1,
            name: '买气泡',
            ...
            tooltip: {
              trigger: 'item',
              formatter: function(params) {
                return '成交主力：买<br/>' + '成交量：' + params.data.matchQty + ' （手） <br/>' + '成交时间窗口：' + params.data.alertTime
              }
            }
          },
          {
            id: 2,
            name: '卖气泡',
            ...
            tooltip: {
              trigger: 'item',
              formatter: function(params) {
                return '成交主力：卖<br/>' + '成交量：' + params.data.matchQty + ' （手） <br/>' + '成交时间窗口：' + params.data.alertTime
              }
            }
          },
          {
            id: 3,
            name: '成交数据',
            ...
            tooltip: {
              show: false
            }
          }]
...
}

云中漫步87

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
echarts tooltip 多series应用

整体需求如下图：热力图作为底，显示委托信息。两种颜色的气泡图显示买卖信息。成交曲线横轴缩放气泡图，折线图是否展示的开关测试数据x轴定义：marketData.xAxisDatay轴定义：marketData.yAxisData热力图数据：marketData.quotData卖气泡数据：marketData.matchSellData买气泡数据：marketData.matchBuyData成交曲线数据：marketData.matchData var mar
复制链接

扫一扫