ECharts にアニメーション効果を追加する方法-jsチュートリアル-php.cn

ECharts にアニメーション効果を追加する方法

PHPz

リリース： 2023-12-18 08:18:32

オリジナル

2036 人が閲覧しました

ECharts にアニメーション効果を追加する方法

ECharts は、JavaScript ベースのオープンソースの視覚化チャートライブラリであり、豊富な種類のチャートと対話型関数を提供し、データ視覚化の分野で広く使用されています。静的チャートと比較して、動的チャートはより鮮明かつ直観的であり、データの変化や傾向をより適切に表示できます。したがって、ECharts にアニメーション効果を追加すると、グラフの魅力と読みやすさが向上すると同時に、現代のユーザーの美的ニーズにもより適合します。

この記事では、ECharts にアニメーション効果を追加する方法を紹介し、参考として具体的なコード例を示します。

まず、ECharts でアニメーション効果を有効にするには、echarts.init() メソッドでアニメーションを true に設定するか、特定のアニメーション構成項目を設定する必要があります。例:

var myChart = echarts.init(document.getElementById('main'), null, {animation: true});
//或者
var option = {
    animation: {
        duration: 2000, //动画持续时间，单位为毫秒
        easing: 'elasticOut' //缓动函数类型
    },
    //其他配置项...
};
var myChart = echarts.init(document.getElementById('main'), null, option);

ログイン後にコピー

次に、データおよびチャート構成アイテムにアニメーション関連のパラメーターを設定する必要があります。たとえば、次のようになります。

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        animation: true, //启用x轴的动画效果
        axisLabel: {
            interval: 0
        }
    },
    yAxis: {
        type: 'value',
        animation: {
            duration: 2000, //y轴的动画持续时间，单位为毫秒
            easing: 'bounceOut' //缓动函数类型
        }
    },
    series: [{
        name: 'sales',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        animationDelay: function (idx) { //启用条形图的动画效果
            return idx * 500;
        }
    }]
};

ログイン後にコピー

myChart.setOption(option);

ログイン後にコピー

以下は完全な ECharts アニメーションサンプルコードです:

var myChart = echarts.init(document.getElementById('main'), null, {animation: true});

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        animation: true,
        axisLabel: {
            interval: 0
        }
    },
    yAxis: {
        type: 'value',
        animation: {
            duration: 2000,
            easing: 'bounceOut'
        }
    },
    series: [{
        name: 'sales',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        animationDelay: function (idx) {
            return idx * 500;
        }
    }]
};

myChart.setOption(option);

ログイン後にコピー

上記の例を通じて、ECharts にさまざまなアニメーション効果を簡単に追加し、データ視覚化チャートをより鮮明で視覚的なものに変えることができます。理解しやすくなります。同時に、クールになりすぎてユーザーエクスペリエンスに影響を与えることを避けるために、アニメーション効果の合理性と実用性にも注意を払う必要があります。

以上がECharts にアニメーション効果を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。