ECharts圖表使用及非同步載入的特性範例詳解

2022-12-25 14:01:52

ECharts

資料視覺化在過去幾年中取得了巨大進展。開發人員對視覺化產品的期望不再是簡單的圖表建立工具，而是在互動、效能、資料處理等方面有更高的要求。

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

ApacheECharts一直致力於讓開發人員以更方便的方式建立靈活、豐富的視覺作品。在最新的Apache ECharts 5中，我們專注於加強圖表的敘事能力，以便開發人員能夠以更簡單的方式講述資料背後的故事。

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”，則新介面對應於從“charts/charts”匯入｛BarChart｝；為了幫助瞭解設定項需要引入哪些模組，我們的新範例編輯頁面新增了生成按需匯入程式碼的功能。在範例編輯頁面的完整程式碼索引標籤下選擇按需匯入後，可以檢查需要匯入的模組和相關程式碼。在大多數情況下，我們建議儘可能使用這組新的按需介面。它可以充分利用打包工具樹抖動的功能，並可以有效解決名稱空間衝突問題，防止內部結構的暴露。如果仍然使用CommonJS模組編寫方法，我們仍然支援前面的方法：

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]);

// 建立 echarts 範例。
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);
// 用 option 描述 `資料`、`資料如何對映成圖形`、`互動行為` 等。
// option 是個大的 JavaScript 物件。
var option = {
    // option 每個屬性是一類元件。
    legend: {...},
    grid: {...},
    tooltip: {...},
    toolbox: {...},
    dataZoom: {...},
    visualMap: {...},
    // 如果有多個同類元件，那麼就是個陣列。例如這裡有三個 X 軸。
    xAxis: [
        // 陣列每項表示一個元件範例，用 type 描述「子型別」。
        {type: 'category', ...},
        {type: 'category', ...},
        {type: 'value', ...}
    ],
    yAxis: [{...}, {...}],
    // 這裡有多個系列，也是構成一個陣列。
    series: [
        // 每個系列，也有 type 描述「子型別」，即「圖表型別」。
        {type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
        {type: 'line', data: [2231, 1234, 552, ... ]},
        {type: 'line', data: [[4, 51], [8, 12], ... ]}
    }]
};
// 呼叫 setOption 將 option 輸入 echarts，然後 echarts 渲染圖表。
chart.setOption(option);

ECharts的使用者使用選項來描述他們對圖表的各種需求，包括他們有什麼資料、想要繪製什麼圖表、圖表看起來像什麼、包含什麼元件以及可以操作什麼東西。簡而言之，選項描述瞭如何將資料和資料對映到圖形和互動行為中。

myChart.setOption({
    series : [
        {
            name: '存取來源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'視訊廣告'},
                {value:274, name:'聯盟廣告'},
                {value:310, name:'郵件行銷'},
                {value:335, name:'直接存取'},
                {value:400, name:'搜尋引擎'}
            ]
        }
    ]
})

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

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

絕對值（例如，底部：54表示距離容器底部邊界54個畫素）。或者它基於容器的高度和寬度的百分比（例如，右：“20%”表示距容器右邊界的距離為容器寬度的20%）。如下圖所示，設定軸網構件（即矩形座標系的底板）的左側、右側、高度和底部。

更改全域性樣式的最簡單方法是直接使用顏色主題。例如，在範例集合中，可以選擇“主題”來直接檢視採用主題的效果。 ECharts4從兩個內建主題開始，即“亮”和“暗”，以及通常的預設主題。可以這樣使用它們：

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');
});

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

option = {
    series: {
        type: 'scatter',
        itemStyle: {
            // 普通樣式。
            normal: {
                // 點的顏色。
                color: 'red'
            },
            // 高亮樣式。
            emphasis: {
                // 高亮時點的顏色。
                color: 'blue'
            }
        },
        label: {
            // 普通樣式。
            normal: {
                show: true,
                // 標籤的文字。
                formatter: 'This is a normal label.'
            },
            // 高亮樣式。
            emphasis: {
                show: true,
                // 高亮時標籤的文字。
                formatter: 'This is a emphasis label.'
            }
        }
    }
}

非同步載入

var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '非同步資料載入範例'
        },
        tooltip: {},
        legend: {
            data:['銷量']
        },
        xAxis: {
            data: data.categories
        },
        yAxis: {},
        series: [{
            name: '銷量',
            type: 'bar',
            data: data.data
        }]
    });
});

如果長時間載入資料，畫布上放置的空座標軸也會讓使用者感覺是否存在錯誤。因此，需要載入動畫來提示使用者正在載入資料。預設情況下，ECharts提供了一個簡單的載入動畫。只需呼叫showLoading方法即可顯示。載入資料後，呼叫hideLoading方法隱藏載入動畫。

它直觀易懂，適用於為某些特殊圖表型別客製化特定資料型別。然而，缺點是為了匹配這種資料輸入形式，通常需要有一個資料處理過程，並將資料分割設定為每個系列（和類別軸）。此外，這不利於多個系列共用一個資料，也不利於基於原始資料的圖表型別和系列的對映排列。因此，ECharts 4提供了一個單獨宣告資料的資料集元件，這帶來了以下效果它可以接近資料視覺化的常見思維模式：（I）提供資料，（II）指定資料到視覺的對映，從而形成圖表。資料和其他設定可以分開。資料始終在變化，其他設定始終不變。分離易於單獨管理。資料可以被多個系列或元件重用。對於具有大量資料的場景，不必為每個系列建立一個資料。支援更常見的資料格式，如二維陣列、物件陣列等，在一定程度上避免使用者轉換為資料格式。

以上就是ECharts圖表使用及非同步載入的特性的詳細內容，更多關於ECharts圖表使用及非同步載入的特性的資料請關注it145.com其它相關文章！

ECharts圖表使用及非同步載入的特性範例詳解

目錄

ECharts

非同步載入

熱門文章