请问Echarts能否实现交易的深度图？

[z-hao]

One-line summary [问题简述] 想写一个交易的深度图，看了很多例子和文档，始终想不出实现的办法，在网上也发帖问了，但没有满意的回复，因此想确认下echarts能否实现该图

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 3.7.1
• Browser version [浏览器类型和版本]: Chrome 60
• OS Version [操作系统类型和版本]: Mac OS

Expected behaviour [期望结果]

深度图的Y轴和K线图Y轴的刻度是一样的

ECharts option [ECharts配置项]

深度图需要的JSON数据，asks为卖方深度，bids为买方深度。

{"asks":[[23878.100000,0.333000],[23878.990000,1.550000],[23879.000000,0.260000],[23880.000000,0.184000],[23893.420000,0.300000],[23897.070000,1.300000],[23897.990000,0.720000],[23900.000000,1.026000],[23908.990000,0.598800],[23909.000000,10.000000],[23909.990000,0.800000],[23910.000000,1.567000],[23911.100000,0.095000],[23948.970000,0.600000],[23948.990000,0.900000],[23949.000000,8.081500],[23950.000000,2.707500],[23973.190000,0.300000],[23973.200000,5.000000],[23992.000000,0.159000],[23999.000000,0.971800],[24000.000000,3.968800],[24001.000000,1.249100],[24024.900000,1.290000],[24068.530000,0.500000],[24068.600000,1.528000],[24072.700000,1.290000],[24085.000000,4.489700],[24086.000000,5.047200],[24087.610000,0.001000],[24095.590000,0.150000],[24099.000000,0.002700],[24100.000000,5.048800],[24102.000000,1.112900],[24105.590000,0.300000],[24107.980000,0.001000],[24108.530000,0.750000],[24128.000000,0.998000],[24150.000000,0.060000],[24158.580000,0.001000],[24164.160000,0.722800],[24164.170000,0.726600],[24188.000000,0.020200],[24191.900000,0.010000],[24193.000000,0.020400],[24198.000000,1.107500],[24200.000000,8.125200],[24209.180000,0.001000],[24210.710000,0.003000],[24230.000000,0.029700],[24242.420000,0.010400],[24259.790000,0.001000],[24259.990000,0.400000],[24260.000000,1.000000],[24288.110000,1.180400],[24300.000000,13.729000],[24310.380000,0.001000],[24350.000000,0.280600],[24360.000000,2.000000],[24380.000000,0.200000],[24396.990000,0.250000],[24397.000000,0.100000],[24398.000000,0.200000],[24399.000000,0.400000],[24400.000000,0.622700],[24435.510000,0.227000],[24444.000000,0.232300],[24450.000000,2.073400],[24455.000000,0.115200],[24478.000000,0.199600],[24495.000000,0.609800],[24496.000000,1.307700],[24499.000000,2.464100],[24500.000000,84.157900],[24501.000000,0.500000],[24510.000000,0.100000],[24514.610000,0.003000],[24520.000000,0.400000],[24530.000000,0.100000],[24531.000000,0.803300],[24550.000000,1.571200],[24560.000000,28.593300],[24568.000000,0.200000],[24575.100000,0.398400],[24580.000000,0.300000],[24588.000000,0.400000],[24590.000000,0.038800],[24598.000000,0.233200],[24599.990000,0.120000],[24600.000000,2.387600],[24601.710000,0.001000],[24602.900000,0.700000],[24605.400000,0.004100],[24608.090000,0.001000],[24621.000000,0.210000],[24650.000000,1.150000],[24657.000000,0.500000],[24659.190000,0.001000],[24665.000000,0.015600],[24680.000000,0.846800],[24688.000000,0.520200],[24689.000000,0.829400],[24699.940000,0.149700],[24699.990000,0.025800],[24700.000000,3.469400],[24710.290000,0.001000],[24716.000000,1.000000],[24734.000000,2.000000],[24738.860000,0.142100],[24750.000000,8.154200],[24760.900000,0.110000],[24761.390000,0.001000],[24798.000000,0.200000],[24799.000000,0.010000],[24799.900000,0.525300],[24800.000000,10.407700],[24800.210000,0.379500],[24812.490000,0.001000],[24818.510000,0.003000],[24838.000000,0.004400],[24840.000000,0.746000],[24848.090000,0.016000],[24849.000000,0.287400],[24850.000000,1.715300],[24856.110000,0.075300],[24859.000000,0.100000],[24860.000000,0.390000],[24863.590000,0.001000],[24880.000000,0.688600],[24888.000000,1.146600],[24890.000000,3.141600],[24896.250000,4.061400],[24898.020000,0.500400],[24899.000000,0.010000],[24899.990000,0.068800],[24900.000000,12.840300],[24908.400000,0.040000],[24914.690000,0.001000],[24933.900000,0.086000],[24949.990000,0.400000],[24950.000000,2.957500],[24956.000000,0.599400],[24959.990000,0.431800],[24960.000000,0.153100],[24965.790000,0.001000],[24970.000000,0.010600],[24980.000000,4.793400],[24988.000000,3.326900],[24988.880000,0.106300],[24990.000000,9.022300]],
"bids":[[23850.000000,8.386100],[23831.000000,1.954700],[23830.000000,5.906000],[23802.000000,0.849900],[23801.000000,24.716200],[23800.000000,12.705000],[23786.730000,0.023000],[23780.000000,0.390000],[23779.990000,0.180000],[23779.090000,0.400000],[23778.180000,0.280000],[23777.280000,0.600000],[23773.640000,0.270000],[23772.740000,0.600000],[23772.120000,0.001000],[23770.900000,0.330000],[23770.000000,54.000000],[23747.330000,0.800000],[23735.160000,0.150000],[23725.160000,0.300000],[23722.120000,0.001000],[23701.000000,0.103000],[23700.100000,0.200000],[23700.000000,0.411000],[23692.170000,0.790000],[23692.160000,0.500000],[23678.010000,0.700000],[23678.000000,0.072600],[23672.120000,0.001000],[23666.000000,4.900000],[23661.390000,0.300000],[23652.160000,0.750000],[23651.000000,1.116300],[23650.000000,0.955600],[23630.000000,0.288900],[23622.120000,0.001000],[23612.990000,0.001000],[23608.000000,0.036800],[23602.470000,0.590000],[23602.460000,3.000000],[23602.000000,1.694800],[23600.600000,0.019000],[23600.010000,0.302000],[23600.000000,3.269700],[23580.010000,0.350000],[23580.000000,2.000000],[23551.000000,0.130000],[23550.120000,0.100000],[23550.000000,2.595900],[23533.010000,0.590000],[23533.000000,1.000000],[23530.000000,3.633200],[23518.180000,0.300000],[23518.000000,1.713900],[23515.000000,10.530300],[23510.100000,1.250000],[23509.000000,0.093700],[23508.000000,0.200000],[23506.000000,13.465400],[23505.000000,0.100000],[23502.000000,0.130000],[23501.010000,0.100000],[23501.000000,2.600000],[23500.020000,10.200000],[23500.010000,14.180400],[23500.000000,52.328300],[23499.470000,0.032400],[23499.000000,1.076400],[23480.000000,3.000000],[23456.000000,1.185800],[23450.000000,0.586800],[23448.000000,0.102300],[23444.440000,0.200000],[23444.000000,0.235500],[23420.900000,0.001000],[23409.500000,0.020000],[23408.000000,0.200000],[23401.950000,0.540000],[23401.940000,0.917300],[23400.990000,0.050000],[23400.010000,0.400000],[23400.000000,6.882100],[23399.000000,0.005000],[23393.000000,0.001000],[23390.000000,1.000000],[23381.540000,0.001000],[23380.000000,1.360500],[23373.000000,0.042800],[23360.000000,1.000000],[23358.280000,1.000000],[23350.670000,0.600000],[23350.660000,2.000000],[23340.000000,0.005500],[23334.000000,0.178100],[23333.330000,0.133800],[23333.000000,3.481300],[23330.000000,3.000000],[23323.660000,1.600000],[23308.000000,0.200000],[23301.000000,0.260000],[23300.500000,5.257200],[23300.000000,31.860200],[23299.000000,1.005000],[23298.000000,0.110000],[23296.370000,0.360000],[23288.000000,0.337100],[23287.100000,0.699500],[23280.000000,2.058500],[23275.000000,0.171900],[23269.000000,0.007200],[23260.000000,0.430000],[23258.000000,0.623300],[23250.010000,0.002000],[23250.000000,6.899500],[23237.050000,0.210000],[23234.000000,0.004700],[23232.000000,0.100000],[23225.000000,1.281000],[23222.330000,4.306200],[23220.000000,0.058800],[23213.000000,0.004300],[23211.000000,0.412000],[23210.200000,0.046900],[23210.000000,0.400000],[23208.000000,0.200000],[23200.000000,18.541100],[23199.000000,0.005000],[23188.000000,0.808700],[23177.000000,0.681100],[23168.000000,1.500000],[23164.560000,0.086300],[23160.600000,0.069300],[23152.360000,0.001000],[23150.000000,0.397900],[23142.960000,0.129700],[23139.480000,0.003000],[23133.330000,2.143400],[23132.280000,0.570000],[23130.900000,1.000000],[23125.000000,0.500000],[23123.000000,0.001000],[23120.010000,0.029600],[23120.000000,1.050000],[23115.000000,0.007900],[23113.000000,0.939900],[23112.000000,0.100000],[23111.000000,0.559400],[23110.000000,50.201200],[23109.000000,6.497300],[23108.000000,2.280000]]};

Other comments [其他信息]

[Ovilia]

右边用一个新的 xAxis，参考这个 http://gallery.echartsjs.com/editor.html?c=xByOFPcjBe 这个例子是用了新的 yAxis。

[z-hao]

我也是这么做的，但是可能是我理解不够，没能实现。最主要的问题是深度图的Y轴和K线图Y轴的刻度是一样的，而且zoom的时候也是联动的。

var option = {
    xAxis: [{
      type: 'category',
      data: this.data.times,
      axisTick: false,
      axisLabel: false,
      zlevel: 1,
      axisPointer: {
        label: {
          show: false
        }
      }
    }, {
      type: 'category',
      gridIndex: 1,
      data: this.data.xAsk,
      min: 'dataMin',
      axisTick: false,
      axisLabel: false,
      zlevel: 0,
      axisLine: { show: false }
    }, {
      type: 'category',
      gridIndex: 2,
      data: this.data.xBid,
      min: 'dataMin',
      axisTick: false,
      axisLabel: false,
      zlevel: 0
    }],
    yAxis: [{
      position: 'right',
      scale: true,
      boundaryGap: ['20%', '20%'],
      splitLine: {
        lineStyle: {
          type: 'dotted',
          color: '#262626'
        }
      },
      axisLabel: {
        showMinLabel: false,
        showMaxLabel: false,
        color: '#bababa'
      },
      zlevel: 1
    }, {
      position: 'right',
      scale: true,
      step: true,
      gridIndex: 1,
      splitNumber: 3,
      boundaryGap: [0, '20%'],
      axisTick: { inside: true },
      axisLabel: false,
      splitLine: false,
      min: 'dataMin',
      zlevel: 0
    }, {
      position: 'right',
      scale: true,
      step: true,
      gridIndex: 2,
      splitNumber: 3,
      boundaryGap: ['20%', 0],
      axisTick: { inside: true },
      axisLabel: false,
      splitLine: false,
      max: 'dataMax',
      zlevel: 0
    }],
    grid: [{
      top: '-1',
      left: '1%',
      right: '10%',
      height: '100%'
    }, {
      top: '-1',
      left: '90%',
      width: '10%',
      height: '50%'
    }, {
      top: '50%',
      left: '90%',
      width: '10%',
      height: '50%'
    }],
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {

        if (params.length > 2) {

          var kline;
          var increase;
          var amplitude;
          var ma5;
          var ma10;
          var item;

          for (var i = 0; i < params.length; i++) {

            item = params[i];

            switch (item.seriesIndex) {

              case 0:

                kline = item.name + ' &nbsp; 开：' + item.value[1].toFixed(2) + ' &nbsp; 高：' + item.value[4].toFixed(2) + ' &nbsp; 低：' + item.value[3].toFixed(2) + ' &nbsp; 收：' + item.value[2].toFixed(2);

                increase = '涨幅：' + ((item.value[2] - item.value[1]) / item.value[1] * 100).toFixed(2) + '%';

                amplitude = '振幅：' + ((item.value[4] - item.value[3]) / item.value[1] * 100).toFixed(2) + '%';

                break;

              case 1:

                ma5 = 'MA5: ' + item.value.toFixed(2);

                break;

              case 2:

                ma10 = 'MA10: ' + item.value.toFixed(2);

                break;

            }

          }

          //return kline + ' &nbsp; ' + increase + ' &nbsp; ' + amplitude + ' &nbsp; <span style="color: #ffffff">' + ma5 + '</span> &nbsp; <span style="color: #ffff33">' + ma10 + '</span>';

          return kline + ' &nbsp; ' + increase + ' &nbsp; ' + amplitude;

        }

      },
      textStyle: {
        color: '#bababa',
        fontSize: 12
      },
      backgroundColor: 'transparent',
      padding: [0, 6],
      position: [3, 3],
      axisPointer: {
        type: 'cross',
        crossStyle: {
          type: 'solid'
        }
      }
    },
    axisPointer: {
      link: {
        xAxisIndex: [0]
      },
      label: {
        color: '#bababa',
        backgroundColor: '#000000',
        borderColor: '#bababa',
        borderWidth: 1,
        padding: [3, 6]
      },
      zlevel: 2
    },
    dataZoom: [{
      type: 'inside',
      start: _this.zoomStart,
      minSpan: 3,
      xAxisIndex: [0, 1, 2]
    }, {
      show: false
    }],
    series: [
      {
        name: 'K线',
        type: 'candlestick',
        dimensions: ['时间', '开', '收', '低', '高'],
        data: this.data.ohlcs,
        animation: false,
        markPoint: {
          symbolSize: [1, 1],
          itemStyle: {
            normal: {
              color: 'transparent'
            }
          },
          data: [{
            type: 'max',
            name: '最大值',
            valueDim: '高',
            symbolOffset: [0, -9],
            label: {
              normal: {
                color: '#bababa'
              }
            }
          }, {
            type: 'min',
            name: '最小值',
            valueDim: '低',
            symbolOffset: [0, 9],
            label: {
              normal: {
                color: '#bababa'
              }
            }
          }]
        },
        itemStyle: {
          normal: {
            color: 'transparent',
            color0: '#75d75c',
            borderColor: '#dd5d36',
            borderColor0: '#75d75c'
          }
        },
        zlevel: 1
      }, {
        name: 'MA5',
        type: 'line',
        data: this.data.ma5,
        smooth: true,
        showSymbol: false,
        animation: false,
        zlevel: 1,
        lineStyle: {
          normal: {
            width: 1,
            color: '#ffffff'
          }
        }
      }, {
        name: 'MA10',
        type: 'line',
        data: this.data.ma10,
        smooth: true,
        showSymbol: false,
        animation: false,
        zlevel: 2,
        lineStyle: {
          normal: {
            width: 1,
            color: '#ffff33'
          }
        }
      }, {
        name: 'Asks',
        type: 'line',
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: this.data.yAsk,
        showSymbol: false,
        animation: false,
        lineStyle: {
          normal: {
            width: 1,
            color: '#dd5d36'
          }
        },
        areaStyle:{
          normal:{
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 0, color: '#dd5d36' // 0% 处的颜色
              }, {
                offset: 1, color: '#000000' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        }
      }, {
        name: 'Bids',
        type: 'line',
        xAxisIndex: 2,
        yAxisIndex: 2,
        data: this.data.yBid,
        showSymbol: false,
        animation: false,
        lineStyle: {
          normal: {
            width: 1,
            color: '#75d75c'
          }
        },
        areaStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 0, color: '#75d75c' // 0% 处的颜色
              }, {
                offset: 1, color: '#000000' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        }
      }
    ]
  };

这是一个最终希望实现效果的例子https://www.huobi.com/market/cny_btc

@Ovilia

[Ovilia]

你把现在实现的部分在 http://gallery.echartsjs.com/editor.html 上复现一下吧

[z-hao]

我把需要到的部分复现了，也把我目前解决不了的几个问题列了出来。http://gallery.echartsjs.com/editor.html?c=xSk4Nlx4sZ
@Ovilia

[vincent1988]

同求，深度图，不知道有没有同学解决了

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jessemoe]

你把现在实现的部分在 http://gallery.echartsjs.com/editor.html 上复现一下吧

链接点不开