快捷導(dǎo)航

ECharts兩種動(dòng)畫效果完整代碼

更新時(shí)間：2023年07月28日 08:58:52 作者：ZHI_MO_WEN

這篇文章主要給大家介紹了關(guān)于ECharts兩種動(dòng)畫效果的相關(guān)資料,在做項(xiàng)目時(shí)當(dāng)我們用到echarts圖表時(shí),大部分產(chǎn)品經(jīng)理都會(huì)要求我們給圖表加上一些動(dòng)畫效果,讓頁(yè)面看起來(lái)更加炫酷,需要的朋友可以參考下

加載動(dòng)畫：當(dāng)數(shù)據(jù)第一次加載或切換數(shù)據(jù)集時(shí)，可以通過設(shè)置 animation 屬性來(lái)展示加載動(dòng)畫，具體可以設(shè)置為 ‘auto’ 或者 true，這將啟用默認(rèn)的加載動(dòng)畫效果，也可以設(shè)置為一個(gè)對(duì)象，自定義加載動(dòng)畫的具體效果。例如：

option = {
    animation: true,
    ...
};

更新動(dòng)畫：當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，可以通過設(shè)置 animationDurationUpdate 和 animationEasingUpdate 屬性來(lái)展示更新動(dòng)畫，這將在數(shù)據(jù)變化后自動(dòng)執(zhí)行動(dòng)畫，使得數(shù)據(jù)變化更加直觀和平滑。例如：

option = {
    series: [{
        type: 'sankey',
        animationDurationUpdate: 1000, // 更新動(dòng)畫時(shí)長(zhǎng)為 1s
        animationEasingUpdate: 'quinticInOut', // 更新動(dòng)畫緩動(dòng)效果為 'quinticInOut'
        ...
    }]
    ...
};

在以上代碼中，我們將 series 屬性的 type 設(shè)置為 ‘sankey’，即表示創(chuàng)建一個(gè)桑基圖，并通過 animationDurationUpdate 和 animationEasingUpdate 屬性分別設(shè)置了更新動(dòng)畫的時(shí)長(zhǎng)和緩動(dòng)效果。這樣，在數(shù)據(jù)發(fā)生變化時(shí)，?；鶊D將自動(dòng)執(zhí)行更新動(dòng)畫。需要注意的是，為了使用動(dòng)畫效果，需要將 ECharts 版本升級(jí)到 4.0 及以上版本。

完整代碼如下：

HTML部分：

<div id="sankeyChart" style="height: 500px;"></div>

js:

// 初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('sankeyChart'));
// 配置項(xiàng)
var option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  series: {
    type: 'sankey',
    emphasis: {
      focus: 'adjacency'
    },
    nodeWidth: 20,
    data: [{
      name: 'A'
    }, {
      name: 'B'
    }, {
      name: 'C'
    }, {
      name: 'D'
    }, {
      name: 'E'
    }],
    links: [{
      source: 'A',
      target: 'B',
      value: 10
    }, {
      source: 'A',
      target: 'C',
      value: 15
    }, {
      source: 'B',
      target: 'D',
      value: 12
    }, {
      source: 'C',
      target: 'D',
      value: 8
    }, {
      source: 'C',
      target: 'E',
      value: 10
    }]
  }
};
// 顯示加載動(dòng)畫
myChart.showLoading();
// 異步加載數(shù)據(jù)
setTimeout(function () {
  myChart.hideLoading();
  myChart.setOption(option);
}, 2000);
// 更新數(shù)據(jù)
setTimeout(function () {
  option.series.data.push({
    name: 'F'
  });
  option.series.links.push({
    source: 'D',
    target: 'F',
    value: 5
  });
  myChart.setOption(option);
}, 4000);

上述代碼中，通過 showLoading() 方法來(lái)展示加載動(dòng)畫，在異步加載數(shù)據(jù)完成后，使用 hideLoading() 方法來(lái)隱藏加載動(dòng)畫并且調(diào)用 setOption() 方法來(lái)設(shè)置圖表數(shù)據(jù)。然后，在延遲 4 秒后，使用 setOption() 方法來(lái)更新數(shù)據(jù)。最終效果是一個(gè)帶有加載動(dòng)畫和更新動(dòng)畫的?；鶊D。

總結(jié)

到此這篇關(guān)于ECharts兩種動(dòng)畫效果的文章就介紹到這了,更多相關(guān)ECharts動(dòng)畫效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: