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 = {
        tooltip: {},
        legend: {
            data: ['A', 'B', 'C', 'D', 'E'],
        },
        calculable: true,
        xAxis: {
            data: ['2007', "2008", "2009", "2010", "2011"],
        },
        yAxis: [{
            type: 'value',
            name: '贸易量（万吨）',
        }],
        series: [{
            name: 'A',
            type: 'bar',
            barMaxWidth: 20,
            itemStyle: {
                normal: {
                    color: '#3fa7dc'
                }
            },
            data: []
        }, {
            name: 'B',
            type: 'bar',
            barMaxWidth: 20,
            itemStyle: {
                normal: {
                    color: '#ffea38'
                }
            },
            data: []
        }]
    }

    // 将基本配置 传入到实例当中 以后 通过 默认 merge 方式来 只更新数据
    demo.setOption(demoOption)

    // 数据更新函数
    function initDemo(data, obj) {
        demo.setOption(data)
    }

    // 假数据 1
    var dataOne = {
        series: [{
            name: 'A',
            data: [200, 200, 300, 330, 550]
        }]
    }
    // 假数据 2
    var dataTwo = {
        series: [{
            name: 'A',
            data: [100, 300, 100, 330, 350],
        }, {
            name: 'B',
            data: [200, 100, 400, 300, 600],
        }]
    }

    // 页面初始化
    initDemo(dataOne)

    var toggleBtn = document.querySelector('.toggle')

    // 无用的循环数据使用
    var n = 0
    toggleBtn.addEventListener('click', function () {
        n = (n + 1) % 2
        var data = n === 0 ? dataOne : dataTwo
        initDemo(data)
    })

})