JSFiddle - React, Tailwind, and code Playground

by Donlee Malacad

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
  <body>
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <div id="main" style="width:600px; height:400px;"></div>       
      </div>
      <div class="col-md-2"></div>
    </div>
  </body>
</html>

JavaScript

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

myChart.title = '气泡图';

option = {
    legend: {
        data:['高度(km)与气温(°C)变化关系']
    },
    tooltip: {
        trigger: 'axis',
        formatter: "Temperature : <br/>{b}km : {c}°C"
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {value: false},
        axisLabel: {
            formatter: '{value} km'
        },
        boundaryGap: true,
    },
    series: [
        {
            name: '高度(km)与气温(°C)变化关系',
            type: 'line',
            smooth: true,
            lineStyle: {
                normal: {
                    width: 3,
                    shadowColor: 'rgba(0,0,0,0.4)',
                    shadowBlur: 10,
                    shadowOffsetY: 10
                }
            },
            data:[
            	[3, 35],
            	[30, 25],
            	[10, 15],
              [5, 5],
            ]
        }
    ]
};

myChart.setOption(option);