如何使用Echarts實現數據可視化

在當今社會，數據已經成為人們生產和生活的重要組成部分。為了更好的利用數據，常常需要通過數據可視化手段來展示和分析數據。而Echarts正是一種常用的數據可視化工具。Echarts提供了基於HTML5 Canvas的高效、靈活、可定製的數據可視化解決方案。

一、為什麼要使用Echarts

Echarts作為一種數據可視化的工具，有以下幾個優點：

1、美觀易用

Echarts提供了豐富的圖表類型、數據可視化組件和交互式的功能。用戶可以通過簡單的配置就可以快速生成美觀實用的圖表。

2、數據可視化全能

Echarts不僅提供基礎的圖表類型，還提供了地圖、散點圖、詞雲等多種高級圖表類型。同時，Echarts支持使用JSON和XML格式來展示真實世界的複雜數據。

3、交互式可視化

Echarts提供了交互式的功能，例如圖表縮放、拖拽、提示框等，這些功能都可以幫助用戶更好的分析和展示數據。

二、如何使用Echarts

1、引入Echarts庫

在製作Echarts圖表之前，需要先引入Echarts庫。可以通過CDN方式引入Echarts。例如，在HTML頁面中引入Echarts庫的代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Echarts實例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
    <!-- 為 echarts 準備一個具備大小（寬高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>

2、創建圖表實例

在引入Echarts庫之後，就可以創建一個圖表實例。一般情況下，需要提供一個DOM元素給圖表實例，圖表就會自動根據該元素的大小來顯示。代碼如下：

var myChart = echarts.init(document.getElementById('main'));

3、配置圖表

在創建圖表實例之後，需要對圖表進行配置，通常可以通過以下幾個方面來設置：

圖表類型設置

通過設置series的type屬性來指定圖表類型，例如，設置一個柱狀圖：

option = {
    series: [{
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

圖表樣式設置

通過設置title、legend、xAxis、yAxis等組件的屬性，可以對圖表樣式進行設置。例如，設置一個帶有標題和x軸、y軸的柱狀圖：

option = {
    title: {
        text: '柱狀圖示例'
    },
    tooltip: {},
    legend: {
        data:['銷量']
    },
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

交互式功能設置

通過設置toolbox、dataZoom、visualMap等組件的屬性，可以為圖表添加交互式的功能。例如，設置一個具有縮放和數據篩選功能的折線圖：

option = {
    title: {
        text: '折線圖示例'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['最高氣溫','最低氣溫']
    },
    xAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name:'最高氣溫',
        type:'line',
        data:[11, 11, 15, 13, 12, 13, 10]
    },{
        name:'最低氣溫',
        type:'line',
        data:[1, -2, 2, 5, 3, 2, 0]
    }],
    dataZoom: [
        {
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'empty'
        },
        {
            type: 'inside',
            xAxisIndex: 0,
            filterMode: 'empty'
        }
    ]
};

4、顯示圖表

在配置好圖表之後，可以通過調用setOption()方法來展示圖表：

myChart.setOption(option);

三、如何顯示數值為中心

在使用Echarts展示數據時，數值常常是圖表的核心之一。可以通過調整數據、坐標軸和標籤等方式來使數值成為圖表的中心。

1、調整數據

通過調整數據來使數值成為圖表的中心，通常需要首先處理數據。例如，將數據按照大小排序，或將數據歸一化。

將數據按照大小排序

將數據按照大小排序可以使用JavaScript的sort()方法，例如，將一個數組按照從小到大的順序排序：

var data = [5, 20, 36, 10, 10, 20];
data.sort(function(a, b) {
    return a - b;
});

將數據歸一化

將數據歸一化可以使得不同指標的數據在同一縱軸上進行比較。通常的方法是將數據按照指定公式轉化，例如，將一個數組進行數據歸一化：

function normalizeData(data) {
    var max = Math.max.apply(null, data);
    var min = Math.min.apply(null, data);
    var diff = max - min;
    for (var i = 0; i < data.length; i++) {
        data[i] = (data[i] - min) / diff;
    }
    return data;
}
var data = [5, 20, 36, 10, 10, 20];
data = normalizeData(data);

2、調整坐標軸

通過調整坐標軸的定義，可以使數值更加明顯。例如，將Y軸定義為數值軸，則圖表上的數值就會更加明顯。代碼如下：

option = {
    xAxis: {
        // 自定義X軸
    },
    yAxis: {
        type: 'value'
    }
    // 其他配置項
};

3、調整標籤

通過調整標籤的格式和顯示方式，可以使得數值更加突出。例如，在柱狀圖中，可以將標籤的字體加粗加大，或者將標籤顯示在柱子內部或下方等。代碼如下：

option = {
    xAxis: {
        // 自定義X軸
    },
    yAxis: {
        type: 'value',
        axisLabel: { // 設置Y軸標籤
            show: true,
            textStyle: {
                color: '#000',
                fontSize: 16,
                fontWeight: 'bold'
            }
        }
    },
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        label: {
            show: true, // 是否顯示標籤
            position: 'top', // 標籤顯示位置
            formatter: '{c}', // 標籤顯示內容
            textStyle: {
                color: '#000',
                fontSize: 16,
                fontWeight: 'bold'
            }
        }
    }]
};

四、結語

Echarts是一種方便易用、功能強大的數據可視化工具。在使用Echarts展示數據時，可以通過調整數據、坐標軸和標籤等方式來使數值成為圖表的中心。希望通過本文的介紹可以幫助讀者更加方便快捷地使用Echarts來展示數據。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/201174.html