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

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

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

1. まず、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);

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

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 を呼び出す必要があります。 JavaScript コードの setOption(option) メソッドを使用して、チャート構成項目をチャートに適用し、アニメーション効果を有効にします。

3. myChart.setOption(option);

上記の基本的なアニメーション設定項目に加えて、ECharts は、echarts-effect、echarts-gl、echarts-animation などの豊富なアニメーション効果拡張ライブラリも提供します。これらの拡張ライブラリにより、より複雑で素晴らしいアニメーション効果を実現できます。

以下は完全な 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 サイトの他の関連記事を参照してください。