vue echarts k线图 子功能设置

1 图中自定义选择区间, 手动鼠标拉取区间显示 -.>就是设置toolbox的第一个按钮 

toolbox: [
      { //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
        feature: {
          dataZoom: { // 数据区域缩放。
            yAxisIndex: false
          },
          brush: { // 选框组件的控制按钮。
            type: ['lineX', 'clear'] // 开启横向选择功能。'clear'：清空所有选框。
          },
        },
        right: 100,
      },
]

2 底部数据选择条 --> 设置高xAxisIndex: [0], // 表示在x轴上方向 缩放

dataZoom: [
        {
          type: 'inside',
          xAxisIndex: [0, 1],
          start: 98,
          end: 100
        },
        {
          show: true, // 这个是打开数据 选择条
          xAxisIndex: [0, 1],
          type: 'slider',
          top: '85%',
          start: 98,
          end: 100,
          height:10,
        }
      ],


多图的x轴上显示滑动条
只用设置一个 其他的设置位fasle
let dataZoom = [
        {
          show: true,
          type: 'slider',
          xAxisIndex: 0,
          start: 0,
          end: 100,
          bottom: '0%', // 设置dataZoom的位置
          height: '20px' // 设置dataZoom的高度
        },
        {
          show: false,
          type: 'slider',
          xAxisIndex: 0, 
          start: 0,
          end: 100,
          left: '0%', // 设置dataZoom的位置
          width: '30px' // 设置dataZoom的宽度
        },
        {
          show: false,
          type: 'slider',
          xAxisIndex: 0, 
          start: 0,
          end: 100,
          bottom: '0%', // 设置dataZoom的位置
          height: '30px' // 设置dataZoom的高度
        },
        {
          show: false,
          type: 'slider',
          xAxisIndex: 0,
          start: 0,
          end: 100,
          right: '0%', // 设置dataZoom的位置
          width: '30px' // 设置dataZoom的宽度
        }
      ]

如果在多个图表中共用一个dataZoom数组，那么show的设置将会对所有图表起作用。也就是说，如果多个图表都需要显示滑动条，那么它们共用的dataZoom数组中对应的show属性都需要设置为true。如果只需要一个图表显示滑动条，那么将共用的dataZoom数组中对应的show属性设置为true，其余的设置为false即可。这样做的好处是可以避免重复配置dataZoom。

另外，每个图表的滑动条的位置、尺寸等设置是相互独立的，不会相互影响。所以可以分别设置不同的位置、尺寸等属性

2.2 田字型 鼠标缩放

┌─────┬─────┐
│     │     │
│  1  │  2  │
│     │     │
├─────┼─────┤
│     │     │
│  3  │  4  │
│     │     │
└─────┴─────┘

dataZoom: [
    {
      type: 'slider',
      xAxisIndex: [1], // 绑定第二个x轴
      yAxisIndex: [0], // 绑定第一个y轴

      filterMode: 'none', // 在 x 轴方向缩放，y 轴不变
      ...
    },
{
      type: 'slider',
      xAxisIndex: [1], // 绑定第二个x轴
      yAxisIndex: [1], // 绑定第二个y轴
      ...
    }
  ],

如果设置了 yAxisIndex，并且 filterMode 已经设置为 'empty' 或者 'none'，但是 y 轴还是会跟着缩放，那么可能是因为你的数据中有空值或者 NaN。

默认情况下，echarts 在缩放时会自动忽略空值或者 NaN。这会导致缩放后 y 轴的范围不准确，看起来就像 y 轴也跟着缩放了。

如果确实存在空值或者 NaN，你可以在 yAxis 中添加 min 和 max 属性，用于手动设置 y 轴的范围。这样在缩放时，y 轴的范围不会随着数据的变化而变化。

3 鼠标在 k线图 选择区域 显示 的工具

toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: false
          },
          brush: {
            type: ['lineX', 'clear']
          }
        }
        left: 100
      },

4 图像上 选取框 常亮

// 1 在 option 中设置
brush: {
        xAxisIndex: 'all',
        brushLink: 'all',
        outOfBrush: {
          colorAlpha:0.5 // K线颜色
        }

// 2 在myChart.setOption(this.option, true) 之后
  myChart.dispatchAction({
    type: 'brush',
    areas: [
      {
        brushType: 'lineX',
        coordRange: ['2016-06-02', '2016-06-20'],
        xAxisIndex: 0
      }
    ]
  });

5 三个图片竖向排列 鼠标滚轮 同时控制缩放

dataZoom: [ // 缩放功能 一个时 光标鼠标滑块缩放 一个时 底部滑块 缩放
      {
        type: 'inside', // 鼠标滚轮缩放功能 
        xAxisIndex: [0, 1, 2], // 同时控制 多个x轴的 缩放功能 -->   同时控制 多个x轴的 缩放功能
        // yAxisIndex: [0, 1], // 加上这个 图像竖轴 不自动匹配页面
        start: 80, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
        end: 100,

      },
      {
        show: false, // 最下方的 数据选择条
        xAxisIndex: [0, 1],
        type: 'slider', // 缩放条有关
        // top: '74%', // 组件离容器上侧的距离。
        start: 80,
        end: 100,
        height: 20
      },
      {
        show: true, // 最下方的 数据选择条
        xAxisIndex: [0, 2],
        type: 'slider', // 缩放条有关
        // top: '96%', // 组件离容器上侧的距离。
        start: 80,
        end: 100,
        height: 20
      }
    ],