JSFiddle - React, Tailwind, and code Playground

Echarts_legend

by tmtron

HTML

<script src="//cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px; border-style: dashed; resize: both; overflow: hidden; padding: 20px"></div>
<div id="msgs"></div>'

JavaScript

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

function getRandom(i) {
  var max = 200 * i;
  var min = -10 * i;
  return Math.random() * (+max - +min) + +min;
}

var series = [];
for (var i = 10; i < 15; i++) {
  var newSeries = {
    name: 'series ' + i,
    type: 'line',
    data: [
      ["2016-01-01 00:00:00", getRandom(i)],
      ["2016-01-02 00:00:00", getRandom(i)],
      ["2016-01-03 00:00:00", getRandom(i)],
      ["2016-01-04 00:00:00", getRandom(i)],
      ["2016-01-05 00:00:00", getRandom(i)]
    ]
  };
  series.push(newSeries);
}


var paddingTop = 5;
var paddingBottom = 5;

var yAxisName = '1234567890';
var paddingLeft = 5;
var PIXELS_PER_CHAR = 8;
/*
 strang: when we set the left padding, the right position of the legend changes

if (yAxisName.length > 0) {
	paddingLeft = 80 + yAxisName.length * PIXELS_PER_CHAR;
}
*/
var paddingRight = 5; // -paddingLeft;

option = {
  legend: {
    type: 'scroll',
    show: true,
    //left: 'left',
    left: 'center',
    //right: 'auto',
    padding: [paddingTop, paddingRight, paddingBottom, paddingLeft],
    // backgroundColor: '#ccc',
    borderColor: 'black',
    borderWidth: '2'
    // data: ['issueMin', 'issueMax']
  },
  grid: {
    containLabel: true,
    top: '60',
    left: '2%',
    right: '2%',
    bottom: '2%'
  },
  xAxis: {
    type: 'time',
    axisLine: {
    	//onZero: true,
      symbol: ['none', 'arrow'],
      symbolSize: [10, 15],
      symbolOffset: 10
    }
  },
  yAxis: {
    type: 'value',
    name: yAxisName,
    nameLocation: 'end',
    // nameRotate: '45',
    //min: 30,
    //max: 100,
    // deactivate then the y-axis starts at 0
    scale: true,
    axisLine: {
    	onZero: false,
      symbol: ['arrow', 'arrow'],
      symbolSize: [10, 15],
      symbolOffset: [-10, 10]
    }
  },
  series
};


myChart.setOption(option);

function onDivResize() {
  myChart.resize();
}

new...