怎么利用echarts畫雷達圖和折柱混合

怎么利用ECharts畫雷達圖和折柱混合

目錄

1. 引言
2. ECharts簡介
3. 雷達圖的基本概念
4. 使用ECharts繪制雷達圖
   • 4.1 安裝和引入ECharts
   • 4.2 創建雷達圖的基本結構
   • 4.3 配置雷達圖的指標和維度
   • 4.4 自定義雷達圖的樣式
5. 折柱混合圖的基本概念
6. 使用ECharts繪制折柱混合圖
   • 6.1 創建折柱混合圖的基本結構
   • 6.2 配置折柱混合圖的數據
   • 6.3 自定義折柱混合圖的樣式
7. 雷達圖與折柱混合圖的結合
8. 實際應用案例
9. 總結
10. 參考文獻

引言

數據可視化是現代數據分析中不可或缺的一部分，它能夠幫助人們更直觀地理解復雜的數據。ECharts 是一個由百度開源的強大的數據可視化庫，支持多種圖表類型，包括折線圖、柱狀圖、餅圖、雷達圖等。本文將詳細介紹如何使用 ECharts 繪制雷達圖和折柱混合圖，并通過實際案例展示如何將這兩種圖表結合使用。

ECharts簡介

ECharts 是一個使用 JavaScript 實現的開源可視化庫，可以流暢地運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（如 IE8/9/10/11，Chrome，Firefox，Safari 等）。ECharts 提供了豐富的圖表類型和交互功能，能夠滿足大多數數據可視化的需求。

雷達圖的基本概念

雷達圖（Radar Chart），也稱為蜘蛛網圖（Spider Chart），是一種以從同一點開始的軸上顯示的三個或更多個定量變量的二維圖表的形式顯示多變量數據的圖形方法。雷達圖通常用于比較多個變量的值，特別適用于展示多個維度的數據。

使用ECharts繪制雷達圖

4.1 安裝和引入ECharts

首先，我們需要在項目中安裝 ECharts?？梢酝ㄟ^ npm 或 yarn 進行安裝：

npm install echarts --save

或者

yarn add echarts

安裝完成后，在項目中引入 ECharts：

import * as echarts from 'echarts';

4.2 創建雷達圖的基本結構

在 HTML 文件中創建一個容器來放置雷達圖：

<div id="radarChart" style="width: 600px;height:400px;"></div>

然后，在 JavaScript 中初始化 ECharts 實例并綁定到該容器：

const radarChart = echarts.init(document.getElementById('radarChart'));

4.3 配置雷達圖的指標和維度

接下來，我們需要配置雷達圖的指標和維度。以下是一個簡單的配置示例：

const option = {
    title: {
        text: '雷達圖示例'
    },
    tooltip: {},
    legend: {
        data: ['預算分配', '實際開銷']
    },
    radar: {
        indicator: [
            { name: '銷售', max: 100 },
            { name: '管理', max: 100 },
            { name: '信息技術', max: 100 },
            { name: '客服', max: 100 },
            { name: '研發', max: 100 },
            { name: '市場', max: 100 }
        ]
    },
    series: [{
        name: '預算 vs 開銷',
        type: 'radar',
        data: [
            {
                value: [80, 90, 70, 85, 95, 88],
                name: '預算分配'
            },
            {
                value: [70, 82, 75, 80, 90, 85],
                name: '實際開銷'
            }
        ]
    }]
};

radarChart.setOption(option);

4.4 自定義雷達圖的樣式

ECharts 提供了豐富的配置選項，允許用戶自定義雷達圖的樣式。例如，可以修改雷達圖的顏色、線條樣式、填充效果等。以下是一個自定義樣式的示例：

const option = {
    title: {
        text: '自定義樣式的雷達圖'
    },
    tooltip: {},
    legend: {
        data: ['預算分配', '實際開銷']
    },
    radar: {
        indicator: [
            { name: '銷售', max: 100 },
            { name: '管理', max: 100 },
            { name: '信息技術', max: 100 },
            { name: '客服', max: 100 },
            { name: '研發', max: 100 },
            { name: '市場', max: 100 }
        ],
        shape: 'circle',
        splitArea: {
            show: true,
            areaStyle: {
                color: ['rgba(114, 172, 209, 0.2)', 'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)', 'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)']
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
            }
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
            }
        }
    },
    series: [{
        name: '預算 vs 開銷',
        type: 'radar',
        data: [
            {
                value: [80, 90, 70, 85, 95, 88],
                name: '預算分配',
                areaStyle: {
                    color: 'rgba(255, 0, 0, 0.5)'
                },
                lineStyle: {
                    color: 'rgba(255, 0, 0, 1)'
                }
            },
            {
                value: [70, 82, 75, 80, 90, 85],
                name: '實際開銷',
                areaStyle: {
                    color: 'rgba(0, 255, 0, 0.5)'
                },
                lineStyle: {
                    color: 'rgba(0, 255, 0, 1)'
                }
            }
        ]
    }]
};

radarChart.setOption(option);

折柱混合圖的基本概念

折柱混合圖（Bar-Line Chart）是一種將柱狀圖和折線圖結合在一起的圖表類型。它通常用于展示兩種不同類型的數據，例如在一個圖表中同時展示銷售額（柱狀圖）和增長率（折線圖）。

使用ECharts繪制折柱混合圖

6.1 創建折柱混合圖的基本結構

在 HTML 文件中創建一個容器來放置折柱混合圖：

<div id="barLineChart" style="width: 600px;height:400px;"></div>

然后，在 JavaScript 中初始化 ECharts 實例并綁定到該容器：

const barLineChart = echarts.init(document.getElementById('barLineChart'));

6.2 配置折柱混合圖的數據

接下來，我們需要配置折柱混合圖的數據。以下是一個簡單的配置示例：

const option = {
    title: {
        text: '折柱混合圖示例'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    legend: {
        data: ['銷售額', '增長率']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '銷售額',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} 萬元'
            }
        },
        {
            type: 'value',
            name: '增長率',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} %'
            }
        }
    ],
    series: [
        {
            name: '銷售額',
            type: 'bar',
            data: [200, 180, 150, 120, 100, 90, 80, 70, 60, 50, 40, 30]
        },
        {
            name: '增長率',
            type: 'line',
            yAxisIndex: 1,
            data: [20, 18, 15, 12, 10, 9, 8, 7, 6, 5, 4, 3]
        }
    ]
};

barLineChart.setOption(option);

6.3 自定義折柱混合圖的樣式

ECharts 提供了豐富的配置選項，允許用戶自定義折柱混合圖的樣式。例如，可以修改柱狀圖的顏色、折線圖的樣式、圖例的位置等。以下是一個自定義樣式的示例：

const option = {
    title: {
        text: '自定義樣式的折柱混合圖'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    legend: {
        data: ['銷售額', '增長率'],
        left: 'right'
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '銷售額',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} 萬元'
            }
        },
        {
            type: 'value',
            name: '增長率',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} %'
            }
        }
    ],
    series: [
        {
            name: '銷售額',
            type: 'bar',
            data: [200, 180, 150, 120, 100, 90, 80, 70, 60, 50, 40, 30],
            itemStyle: {
                color: '#5470C6'
            }
        },
        {
            name: '增長率',
            type: 'line',
            yAxisIndex: 1,
            data: [20, 18, 15, 12, 10, 9, 8, 7, 6, 5, 4, 3],
            lineStyle: {
                color: '#EE6666'
            },
            symbol: 'circle',
            symbolSize: 10
        }
    ]
};

barLineChart.setOption(option);

雷達圖與折柱混合圖的結合

在某些情況下，我們可能需要將雷達圖和折柱混合圖結合使用，以展示更復雜的數據關系。例如，在一個圖表中同時展示多個維度的數據（雷達圖）和某個維度的趨勢變化（折柱混合圖）。

以下是一個將雷達圖和折柱混合圖結合使用的示例：

const option = {
    title: {
        text: '雷達圖與折柱混合圖結合示例'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    legend: {
        data: ['銷售額', '增長率', '預算分配', '實際開銷']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '銷售額',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} 萬元'
            }
        },
        {
            type: 'value',
            name: '增長率',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} %'
            }
        }
    ],
    series: [
        {
            name: '銷售額',
            type: 'bar',
            data: [200, 180, 150, 120, 100, 90, 80, 70, 60, 50, 40, 30],
            itemStyle: {
                color: '#5470C6'
            }
        },
        {
            name: '增長率',
            type: 'line',
            yAxisIndex: 1,
            data: [20, 18, 15, 12, 10, 9, 8, 7, 6, 5, 4, 3],
            lineStyle: {
                color: '#EE6666'
            },
            symbol: 'circle',
            symbolSize: 10
        },
        {
            name: '預算分配',
            type: 'radar',
            radarIndex: 0,
            data: [
                {
                    value: [80, 90, 70, 85, 95, 88],
                    name: '預算分配'
                }
            ]
        },
        {
            name: '實際開銷',
            type: 'radar',
            radarIndex: 0,
            data: [
                {
                    value: [70, 82, 75, 80, 90, 85],
                    name: '實際開銷'
                }
            ]
        }
    ]
};

barLineChart.setOption(option);

實際應用案例

在實際應用中，雷達圖和折柱混合圖可以用于多種場景。例如，在銷售分析中，可以使用雷達圖展示不同產品的銷售表現，同時使用折柱混合圖展示銷售額和增長率的變化趨勢。在人力資源管理中，可以使用雷達圖展示員工的能力評估，同時使用折柱混合圖展示員工的績效變化。

以下是一個實際應用案例的示例：

”`javascript const option = { title: { text: ‘銷售分析與員工能力評估’ }, tooltip: { trigger: ‘axis’, axisPointer: { type: ‘cross’, crossStyle: { color: ‘#999’ } } }, legend: { data: [‘銷售額’, ‘增長率’, ‘產品A’, ‘產品B’, ‘產品C’, ‘員工A’, ‘員工B’, ‘員工C’] }, xAxis: [ { type: ‘category’, data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ‘10月’, ‘11月’, ‘12月’], axisPointer: { type: ‘shadow’ } } ], yAxis: [ { type: ‘value’, name: ‘銷售額’, min: 0, max: 250, interval: 50, axisLabel: { formatter: ‘{value} 萬元’ } }, { type: ‘value’, name: ‘增長率’, min: 0, max: 25, interval: 5, axisLabel: { formatter: ‘{value} %’ } } ], series: [ { name: ‘銷售額’, type: ‘bar’, data: [200, 180, 150, 120, 100, 90, 80, 70, 60, 50, 40, 30], itemStyle: { color: ‘#5470C6’ } }, { name: ‘增長率’, type: ‘line’, yAxisIndex: 1, data: [20, 18, 15, 12, 10, 9, 8, 7, 6, 5, 4, 3], lineStyle: { color: ‘#EE6666’ }, symbol: ‘circle’, symbolSize: 10 }, { name: ‘產品A’, type: ‘radar’, radarIndex: 0, data: [ { value: [80, 90, 70, 85, 95, 88], name: ‘產品A’ } ] }, { name: ‘產品B’, type: ‘radar’, radarIndex: 0, data: [ { value: [70, 82, 75, 80, 90, 85], name: ‘產品B’ } ] }, { name: ‘產品C’, type: ‘radar’, radarIndex: 0, data: [ { value: [60, 72, 65, 70, 80, 75], name: ‘產品C’ } ] }, { name: ‘員工A’, type: ‘radar’, radarIndex: 1, data: [ { value: [90, 85, 80, 75, 70, 65], name: ‘員工A’ } ] }, { name: ‘員工B’, type: