JSFiddle - React, Tailwind, and code Playground

by creadone

HTML

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:400px;"></div>

JavaScript

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

  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: 10,
      left: '2%',
      right: '2%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    }],
    yAxis: [{
      type: 'value',
    }],
    series: [{
      type: 'line',
      data: Array(6).fill().map(() => Math.round(Math.random() * 100)),
    }, {
      type: 'line',
      data: Array(6).fill().map(() => Math.round(Math.random() * 200)),
    }, {
      type: 'line',
      data: Array(6).fill().map(() => Math.round(Math.random() * 300)),
    }, {
      type: 'line',
      data: Array(6).fill().map(() => Math.round(Math.random() * 300)),
    }, {
      type: 'line',
      data: Array(6).fill().map(() => Math.round(Math.random() * 300)),
    }]
  };

  myChart.setOption(option);

  var seriesColors = myChart.getModel().getSeries().map(s => {
    return {
      seriesIndex: s.seriesIndex,
      seriesColor: myChart.getVisual({
        seriesIndex: s.seriesIndex
      }, 'color')
    }
  })

  console.log(seriesColors)