echart 折线图 选中区域

在 ECharts 中，可以通过 `dataZoom` 组件实现选中区域的功能。

使用 `dataZoom` 组件，需要在 `option` 中先定义一个 `dataZoom` 属性，如下所示：

option = {
  // ... 其他配置项
  dataZoom: {
    type: 'inside', // 内置型数据区域缩放组件
    start: 0,
    end: 100
  },
  // ... 其他配置项
};

其中，`type` 属性指定了数据区域缩放组件的类型，这里使用了内置型的 `inside`；`start` 和 `end` 属性表示选中区域的起始和结束位置，范围为 0-100。

接下来，在需要显示折线图的元素上绑定 `echarts.init` 方法，创建一个 ECharts 实例：

var myChart = echarts.init(document.getElementById('main'));

然后，可以通过 `setOption` 方法设置图表的配置项和数据：

myChart.setOption(option);

最后，就可以在折线图上进行选中区域的操作了。选中区域的样式可以通过 `dataZoom` 组件的 `textStyle` 属性和 `handleStyle` 属性进行配置。

完整的代码示例：

var option = {
  title: {
    text: '折线图',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'line',
    data: [5, 20, 36, 10, 10, 20, 15]
  }],
  dataZoom: {
    type: 'inside',
    start: 0,
    end: 100,
    textStyle: {
      color: '#fff'
    },
    handleStyle: {
      color: '#ddd'
    }
  }
};

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption(option);

注意：在使用 `dataZoom` 组件时，需要保证数据的顺序是递增的，否则可能会出现异常的显示效果。