ECharts圖表使用及異步加載的特性示例詳解

更新時間：2022年12月23日 16:19:38 作者：黎燃

這篇文章主要為大家介紹了ECharts圖表使用及異步加載的特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

ECharts

數(shù)據(jù)可視化在過去幾年中取得了巨大進展。開發(fā)人員對可視化產(chǎn)品的期望不再是簡單的圖表創(chuàng)建工具，而是在交互、性能、數(shù)據(jù)處理等方面有更高的要求。

chart.setOption({
    color: [
        '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83',
        '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
    ],
    // ...
});

ApacheECharts一直致力于讓開發(fā)人員以更方便的方式創(chuàng)建靈活、豐富的視覺作品。在最新的Apache ECharts 5中，我們專注于加強圖表的敘事能力，以便開發(fā)人員能夠以更簡單的方式講述數(shù)據(jù)背后的故事。

var themeEC4 = {
    color: [
        '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83',
        '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
    ]
};
var chart = echarts.init(dom, themeEC4);
chart.setOption(/* ... */);

如果之前使用了import“charts/lib/chart/bar”，則新接口對應(yīng)于從“charts/charts”導(dǎo)入｛BarChart｝；為了幫助了解配置項需要引入哪些模塊，我們的新示例編輯頁面添加了生成按需導(dǎo)入代碼的功能。在示例編輯頁面的完整代碼選項卡下選擇按需導(dǎo)入后，可以檢查需要導(dǎo)入的模塊和相關(guān)代碼。在大多數(shù)情況下，我們建議盡可能使用這組新的按需接口。它可以充分利用打包工具樹抖動的功能，并可以有效解決命名空間沖突問題，防止內(nèi)部結(jié)構(gòu)的暴露。如果仍然使用CommonJS模塊編寫方法，我們?nèi)匀恢С智懊娴姆椒ǎ?/p>

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
// 注意，新的接口中默認不再包含 Canvas 渲染器，需要顯示引入，如果需要使用 SVG 渲染模式則使用 SVGRenderer
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([BarChart, GridComponent, CanvasRenderer]);

// 創(chuàng)建 echarts 實例。
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);
// 用 option 描述 `數(shù)據(jù)`、`數(shù)據(jù)如何映射成圖形`、`交互行為` 等。
// option 是個大的 JavaScript 對象。
var option = {
    // option 每個屬性是一類組件。
    legend: {...},
    grid: {...},
    tooltip: {...},
    toolbox: {...},
    dataZoom: {...},
    visualMap: {...},
    // 如果有多個同類組件，那么就是個數(shù)組。例如這里有三個 X 軸。
    xAxis: [
        // 數(shù)組每項表示一個組件實例，用 type 描述“子類型”。
        {type: 'category', ...},
        {type: 'category', ...},
        {type: 'value', ...}
    ],
    yAxis: [{...}, {...}],
    // 這里有多個系列，也是構(gòu)成一個數(shù)組。
    series: [
        // 每個系列，也有 type 描述“子類型”，即“圖表類型”。
        {type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
        {type: 'line', data: [2231, 1234, 552, ... ]},
        {type: 'line', data: [[4, 51], [8, 12], ... ]}
    }]
};
// 調(diào)用 setOption 將 option 輸入 echarts，然后 echarts 渲染圖表。
chart.setOption(option);

ECharts的用戶使用選項來描述他們對圖表的各種需求，包括他們有什么數(shù)據(jù)、想要繪制什么圖表、圖表看起來像什么、包含什么組件以及可以操作什么東西。簡而言之，選項描述了如何將數(shù)據(jù)和數(shù)據(jù)映射到圖形和交互行為中。

myChart.setOption({
    series : [
        {
            name: '訪問來源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'視頻廣告'},
                {value:274, name:'聯(lián)盟廣告'},
                {value:310, name:'郵件營銷'},
                {value:335, name:'直接訪問'},
                {value:400, name:'搜索引擎'}
            ]
        }
    ]
})

大多數(shù)組件和系列可以根據(jù)上/右/下/左/寬/高進行絕對定位。這種絕對定位方法類似于CSS的絕對定位。絕對定位基于ecarts容器DOM節(jié)點。它們中的每一個都可以是：

itemStyle: {
    // 陰影的大小
    shadowBlur: 200,
    // 陰影水平方向上的偏移
    shadowOffsetX: 0,
    // 陰影垂直方向上的偏移
    shadowOffsetY: 0,
    // 陰影顏色
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}

絕對值（例如，底部：54表示距離容器底部邊界54個像素）。或者它基于容器的高度和寬度的百分比（例如，右：“20%”表示距容器右邊界的距離為容器寬度的20%）。如下圖所示，設(shè)置軸網(wǎng)構(gòu)件（即矩形坐標(biāo)系的底板）的左側(cè)、右側(cè)、高度和底部。

更改全局樣式的最簡單方法是直接使用顏色主題。例如，在示例集合中，可以選擇“主題”來直接查看采用主題的效果。 ECharts4從兩個內(nèi)置主題開始，即“亮”和“暗”，以及通常的默認主題?？梢赃@樣使用它們：

var chart = echarts.init(dom, 'light');

$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {
    echarts.registerTheme('vintage', JSON.parse(themeJSON))
    var chart = echarts.init(dom, 'vintage');
});

直接樣式設(shè)置是一種常見的設(shè)置方法。在整個ECharts的選項中，itemStyle、lineStyle、areaStyle、label等可以在許多地方設(shè)置。在這些地方，可以直接設(shè)置圖形元素的顏色、線寬、點大小、標(biāo)簽文本、標(biāo)簽樣式等。一般來說，所有ECharts系列和組件都遵循這些命名約定，盡管itemStyle、label等可能出現(xiàn)在不同圖表和組件的不同位置。

option = {
    series: {
        type: 'scatter',
        itemStyle: {
            // 普通樣式。
            normal: {
                // 點的顏色。
                color: 'red'
            },
            // 高亮樣式。
            emphasis: {
                // 高亮?xí)r點的顏色。
                color: 'blue'
            }
        },
        label: {
            // 普通樣式。
            normal: {
                show: true,
                // 標(biāo)簽的文字。
                formatter: 'This is a normal label.'
            },
            // 高亮樣式。
            emphasis: {
                show: true,
                // 高亮?xí)r標(biāo)簽的文字。
                formatter: 'This is a emphasis label.'
            }
        }
    }
}

異步加載

var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '異步數(shù)據(jù)加載示例'
        },
        tooltip: {},
        legend: {
            data:['銷量']
        },
        xAxis: {
            data: data.categories
        },
        yAxis: {},
        series: [{
            name: '銷量',
            type: 'bar',
            data: data.data
        }]
    });
});

如果長時間加載數(shù)據(jù)，畫布上放置的空坐標(biāo)軸也會讓用戶感覺是否存在錯誤。因此，需要加載動畫來提示用戶正在加載數(shù)據(jù)。默認情況下，ECharts提供了一個簡單的加載動畫。只需調(diào)用showLoading方法即可顯示。加載數(shù)據(jù)后，調(diào)用hideLoading方法隱藏加載動畫。

它直觀易懂，適用于為某些特殊圖表類型定制特定數(shù)據(jù)類型。然而，缺點是為了匹配這種數(shù)據(jù)輸入形式，通常需要有一個數(shù)據(jù)處理過程，并將數(shù)據(jù)分割設(shè)置為每個系列（和類別軸）。此外，這不利于多個系列共享一個數(shù)據(jù)，也不利于基于原始數(shù)據(jù)的圖表類型和系列的映射排列。因此，ECharts 4提供了一個單獨聲明數(shù)據(jù)的數(shù)據(jù)集組件，這帶來了以下效果它可以接近數(shù)據(jù)可視化的常見思維模式：（I）提供數(shù)據(jù)，（II）指定數(shù)據(jù)到視覺的映射，從而形成圖表。數(shù)據(jù)和其他配置可以分開。數(shù)據(jù)始終在變化，其他配置始終不變。分離易于單獨管理。數(shù)據(jù)可以被多個系列或組件重用。對于具有大量數(shù)據(jù)的場景，不必為每個系列創(chuàng)建一個數(shù)據(jù)。支持更常見的數(shù)據(jù)格式，如二維數(shù)組、對象數(shù)組等，在一定程度上避免用戶轉(zhuǎn)換為數(shù)據(jù)格式。

以上就是ECharts圖表使用及異步加載的特性的詳細內(nèi)容，更多關(guān)于ECharts圖表使用及異步加載的特性的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: