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'));

    function initDemo(data, obj) {
        var demoOption = {
            tooltip: {},
            legend: {
                data: [],
            },
            calculable: true,
            xAxis: {
                data: ['2007', "2008", "2009", "2010", "2011"],
            },
            yAxis: [{
                type: 'value',
                name: '贸易量（万吨）',
                min: 0,
            }],
            color: ["#3fa7dc", "#ffea38", "#f9852d", "#F10F0F", "#14EE10"],
        };

        var seriesStyle = [{
            barMaxWidth: 10,
            itemStyle: {
                normal: {
                    // borderColor: '#3fa7dc',
                    color: '#3fa7dc'
                }
            },
        }, {
            barMaxWidth: 10,
            itemStyle: {
                normal: {
                    // borderColor: '#ffea38',
                    color: '#ffea38'

                }
            },
        }]

        var newOption = {
            legend: {
                data: data.map((item) => {item.name})
            },
            series: data    // 传入的数据
        }

        // 将数据样式 加载到我们的 新数据上面
        newOption.series.forEach(function(item, index) {
            $.extend(true, item, seriesStyle[index])        
        });

        // 新旧数据合并
        $.extend(true, demoOption, newOption)

        demo.setOption(demoOption, true);
    }

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

    // 页面初始化
    initDemo(dataOne)

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

    //...