echarts example

by jeffersonswartz

HTML

<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
<button id="one">One Line</button>
<button id="two">Two Lines</button>
<div id="main" style="width: 600px;height:400px;"></div>

JavaScript

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

document.getElementById('one').addEventListener('click', () => {
  myChart.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line'
    }]
  }, true);
});

document.getElementById('two').addEventListener('click', () => {
  myChart.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line'
    }, {
      data: [320, 532, 301, 134, 2290, 3330, 3320],
      type: 'line'
    }]
  }, true);
});