JSFiddle - React, Tailwind, and code Playground

Echarts_MinMaxDisplay

by tmtron

HTML

<script src="//cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
<div id="msgs"></div>'

JavaScript

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

var filterMode =
  //'filter'
  //'weakFilter';
  'empty'
//'none'
;

option = {
  toolbox: {
    feature: {
      dataZoom: {
        show: false,
        yAxisIndex: 'none'
      },
      dataView: {
        show: false
      },
      saveAsImage: {
        show: false
      },
      restore: {
        show: true
      },
      magicType: {
        type: ['line', 'bar', 'stack', 'tiled']
      },
      brush: {
        show: false,
        type: ['lineX', 'clear']
      }
    }
  },
  brush: {
    xAxisIndex: 'all',
    brushLink: 'all',
    brushType: 'lineX',
    brushMode: 'single',
    removeOnClick: true,
    outOfBrush: {
      colorAlpha: 0.1
    },
    brushStyle: {
      color: 'rgba(94,94,124,0.3)',
      borderColor: 'red'
    }
  },
  legend: {
    show: true,
    left: 'center',
    padding: [10, 50, 10, 50],
    backgroundColor: 'red',
    // data: ['issueMin', 'issueMax']
  },
  grid: {
    top: 30,
    bottom: 80
  },
  dataZoom: [{
      type: 'slider',
      show: false,
      filterMode: filterMode
    },
    {
      type: 'inside',
      show: false,
      filterMode: filterMode
    }
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      snap: false
    },
  },
  xAxis: {
    type: 'time',
    // then we get a click event for the axis-labels
    triggerEvent: true
  },
  yAxis: {
    type: 'value',
    // ,    max: 50
    triggerEvent: true
  },
  series: [{
      name: 'issueMin',
      connectNulls: false,
      type: 'line',
      symbolSize: 10,
      stack: 'confidence-band',
      // 'triangle', 'diamond', 'pin', 'arrow', 'none'
      symbol: 'triangle',
      //areaStyle: {
      //  origin: 'start'
      //},
      lineStyle: {
        normal: {
          opacity: 0
        }
      },
      data: [
        ["2016-01-01 00:00:00", 5],
        ["2016-01-02 00:00:00", 15],
        ["2016-01-03...