vue echarts k线图添加交易量副图

1. echarts图 区域分隔

 // 图像位置配置
            grid: [
              {
                left: "10%",
                right: "10%",
                height: "50%"
              },
              {
                left: "10%",
                right: "10%",
                top: "65%",
                height: "18%"
              }
            ],

2. 设置x轴 y轴参数  xAxis:[{第一个图x},{第二个图x}]

xAxis: [{
              type: "category",
              data: this.dateTime,
              // scale: true, // 只在数值轴中（type: 'value'）有效。
              axisTick: { interval: 'auto' }, // 0 所有刻度都显示
              boundaryGap: true,
              axisLine: { onZero: false }, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
              splitLine: { show: true }, // 垂直线// 是否显示分隔线。默认数值轴显示，类目轴不显示。
              splitNumber: 20, // 坐标轴的分割段数
              // min: this.dateTime[0], // 不设置时会自动计算最大值保证坐标轴刻度的均匀分布 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用
              // max: this.dateTime[-1],
            },
            {
              type: "category",
              gridIndex: 1,
              data: this.dateTime,
            }

            ],

            /**
             * 两个Y轴 是[{},{}]
             */
            yAxis: [

              {
                scale: true, 

                splitArea: {
                  show: true  // y轴 区域渐变色
                }

              },
              {
                gridIndex: 1,
              }


            ],

3. 设置 series数据

series: [ 

{
                // name: "APY年化收益率:" + this.APY[this.APY.length - 1].toFixed(2) + "%",
                data: dataAll,

                type: "candlestick",
},


{
                name: "Volume",
                type: "bar",
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: this.functionMa(dataAll, 300)
              }


]

4. 完整代码

option = {

        grid:
  
        xAxis:

        yAxis:

        series:    
}

5.注意 第二步第三步 同时设置完再运行 不然报错