JSFiddle - React, Tailwind, and code Playground

by 半 月

HTML

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.0/echarts.common.js"></script>
<button class="toggle" style="margin-bottom:20px;">toggleData</button>

<div class="demo" id="trade-history" style="width: 550px; height: 300px;"></div>

JavaScript

$(function() {
    var echartOpt = {
        fz: '15',
        color: '#fff'
    };

    var demo = echarts.init(document.getElementById('trade-history'));

    // echarts 基本配置
    var demoOption = {
        backgroundColor: '#1b237e',
        grid: {
            right: '10%',
            left: '10%',
            bottom: '10%',
            top: '20%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                shadowStyle: {
                    color: 'rgba(0,46, 115, 0.3)'
                }
            },
            formatter: function(params) {
                var str = params[0].name + "<br>";
                params.forEach(function(v, i) {
                    str += v.seriesName + ": " + v.value + "吨" + "<br>";
                });
                return str
            },
            textStyle: {
                align: 'left',
                color: '#5cc1ff',
                fontSize: '16'
            },
            backgroundColor: 'rgba(15, 52, 135, 0.5)',
            borderWidth: '1',
            borderColor: '#5cc1ff',
            extraCssText: 'box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);'
        },
        legend: {
            data: ['A', 'a', 'B', 'b', 'C', 'c', 'D', 'd', 'E', 'e'],
            right: '0',
            top: '0',
            textStyle: {
                color: echartOpt.color,
                fontSize: echartOpt.fz
            },
            itemGap: 20,
            itemHeight: 15,
            itemWidth: 15
        },
        calculable: true,
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: echartOpt.color
                }
            },
            axisTick: {
                show: false,
                interval: 0,
                alignWithLabel: true
            },
            axisLabel: {
                interval: 0,
                rotate: '0',
                textStyle: {
  ...