JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.0/echarts.min.js" integrity="sha512-LYmkblt36DJsQPmCK+cK5A6Gp6uT7fLXQXAX0bMa763tf+DgiiH3+AwhcuGDAxM1SvlimjwKbkMPL3ZM1qLbag==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="main" style="width: 100%;height:400px;"></div>

JavaScript

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

// Specify the configuration items and data for the chart
var option = {
  tooltip: {},
  dataZoom: [
  {
    show: false,
    realtime: true,
    start: 0,
    end: 10,
    xAxisIndex: [0],
    zoomLock: true,
    type: 'inside',
    filterMode: 'none',
  }],
  legend: {
    data: ['sales']
  },
  xAxis: {
    type: 'time',
  },
  yAxis: [
    {
      type: 'value',
      name: '°C',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#910000',
        },
      },
      min: 0,
      max: 20,
    },
    {
      type: 'value',
      name: 'mm',
      offset: 0,
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#1e6ed6',
        },
      },
      min: 0,
      max: 20,
    }
  ],
  "series":[
    {
    "type":"line",
    "name":"Temperature",
   ...