Echarts_BrushStuck

by tmtron

HTML

<script src="//cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
<div>
 <a href="https://github.com/apache/incubator-echarts/issues/10675">Echarts issue #10675</a>
 </div>
<div id="main" style="width: 300px;height:400px; border-width: 2px; border-color: red; border-style: solid; background-color: white" onmouseenter="mouseEnter()">
  <div id="chart" style="width: 100%;height:100%;" onmouseleave="mouseLeave()">
  </div>
</div>
<pre id="msgs"></pre>

CSS

body {
  background-color: #ccc;
}

JavaScript

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

function log(newText) {
  console.log(newText);
  msgs.innerHTML = msgs.innerHTML + newText + '<br />';
}

option = {
  brush: {
    xAxisIndex: 'all',
    brushLink: 'all',
    brushType: 'lineX',
    brushMode: 'single',
    removeOnClick: true,
    outOfBrush: {
      colorAlpha: 0.4
    }
  },
  legend: {
    data: ['issue']
  },
  grid: {
    top: 30,
    right: 0,
    bottom: 30
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      snap: false
    },
  },
  xAxis: {
    type: 'time',
  },
  yAxis: {
    type: 'value',
  },
  series: [{
    name: 'issue',
    connectNulls: false,
    type: 'line',
    symbolSize: 10,
    symbol: 'triangle',
    areaStyle: {
      origin: 'start'
    },
    data: [
      ["2016-01-01 00:00:00", 5],
      ["2016-01-02 00:00:00", 15],
      ["2016-01-03 00:00:00", null],
      ["2016-01-04 00:00:00", 11],
      ["2016-01-05 00:00:00", 35]
    ]
  }]
};

function activateBrush() {
  myChart.dispatchAction({
    type: 'takeGlobalCursor',
    key: 'brush',
    brushOption: {
      brushType: 'lineX',
      brushMode: 'single'
    }
  });
}

myChart.setOption(option);
activateBrush();