master

分支 (1)

管理

管理

master

guotou
/
test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <template>
        <div id="main" style="width: 600px;height:400px;"></div>
    </template>

    <script src="./js/echarts.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

    <script type="module">

        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom, 'dark');
        var option;
        $.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json', function (_rawData) {
            // console.log(_rawData);
            run(_rawData);
        });

        function run(_rawData) {
            var countries = ['Finland', 'France', 'Germany', 'Iceland', 'Norway', 'Poland', 'Russia', 'United Kingdom'];
            var datasetWithFilters = [];
            var seriesList = [];
            echarts.util.each(countries, function (country) {
                var datasetId = 'dataset_' + country;
                datasetWithFilters.push({
                    id: datasetId,
                    fromDatasetId: 'dataset_raw',
                    transform: {
                        type: 'filter',
                        config: {
                            and: [
                                { dimension: 'Year', gte: 1950 },
                                { dimension: 'Country', '=': country }
                            ]
                        }
                    }
                });
                seriesList.push({
                    type: 'line',
                    datasetId: datasetId,
                    showSymbol: false,
                    name: country,
                    endLabel: {
                        show: true,
                        formatter: function (params) {
                            return params.value[3] + ': ' + params.value[0];
                        }
                    },
                    labelLayout: {
                        moveOverlap: 'shiftY'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    encode: {
                        x: 'Year',
                        y: 'Income',
                        label: ['Country', 'Income'],
                        itemName: 'Year',
                        tooltip: ['Income'],
                    }
                });
            });

            option = {
                animationDuration: 10000,
                dataset: [{
                    id: 'dataset_raw',
                    source: _rawData
                }].concat(datasetWithFilters),
                title: {
                    text: 'Income of Germany and France since 1950'
                },
                tooltip: {
                    order: 'valueDesc',
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    nameLocation: 'middle'
                },
                yAxis: {
                    name: 'Income'
                },
                grid: {
                    right: 140
                },
                series: seriesList
            };

            myChart.setOption(option);

        }

        option && myChart.setOption(option);


    </script>
</body>
</html>