Echarts數據可視化方案——打造專業的數據展示頁面

一、Echarts概覽

Echarts是一個開源的數據可視化框架，基於HTML5 Canvas技術，支持各種圖表類型，比如折線圖、柱狀圖、餅圖等，並且支持大數據量可視化。Echarts簡單易用，可擴展性強，支持響應式設計，提供了豐富的API和配置項，用戶可以根據自己的需求自定義圖表的顯示效果。

下面是一個簡單的Echarts示例：

// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項和數據
var option = {
    title: {
        text: 'ECharts 入門示例'
    },
    tooltip: {},
    legend: {
        data:['銷量']
    },
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);

在這個示例中，我們通過創建一個Echarts實例，並傳入一個DOM元素ID，將一個柱狀圖顯示在頁面上。這個圖表包括了一個標題、一個提示框、一個圖例、一個X軸、一個Y軸和一個柱狀系列，我們可以根據需要自定義這些元素的顯示效果。

二、Echarts的基本概念

在使用Echarts進行數據可視化之前，需要先了解一些基本概念。

2.1 Series

系列是Echarts中最重要的概念之一，它定義了一組數據和如何展示這些數據。在Echarts中，每個系列擁有一個類型(type)和一組數據(data)。系列類型指定了如何展示數據，可以是線型、柱狀、餅狀等，數據存儲在一個數組中，可以是一個數值、一個二元組或一個對象。

2.2 Option

Option是Echarts的配置項，它包含了所有可配置的元素和屬性，包括圖表的標題(title)、提示框(tooltip)、圖例(legend)、坐標軸(xAxis和yAxis)、系列(series)等。Option是一個JavaScript對象，通過設置不同的屬性和值，即可實現各種不同的圖表效果。除了Option，Echarts還提供了一些全局配置項(global)和主題(theme)。

2.3 Axis

軸(axis)是Echarts中用來顯示數據的直線，分為X軸和Y軸。軸上的刻度(scale)是用來表示數據大小的標尺，可以是數值、時間或類別。軸的標籤(label)用來顯示刻度值，可以進行格式化。

2.4 Tooltip

Tooltip是Echarts中用來顯示數據詳情的組件，當鼠標懸浮在圖表上時，會觸發Tooltip並顯示相應的數據和提示信息。Tooltip可以配置觸發方式(trigger)、顯示位置(position)、樣式和內容等。

2.5 Legend

Legend是Echarts中用來顯示系列信息的組件，可以勾選/取消某個系列來展示/隱藏相應的數據。Legend可以配置位置(position)、布局(orient)、樣式和內容等。

三、Echarts示例

3.1 折線圖(Line Chart)

折線圖是一種展示數據變化趨勢的圖表，可以用來比較不同時間或不同組別的數據變化。下面是一個折線圖的示例：

var option = {
    title: {
        text: '月度銷售額'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['銷售額']
    },
    xAxis: {
        type: 'category',
        data: ['一月','二月','三月','四月','五月','六月']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '銷售額',
        type: 'line',
        data: [1200, 1500, 1800, 2000, 1600, 1400]
    }]
};

在這個示例中，我們創建了一個折線圖，包括一個標題、一個提示框、一個圖例、一個X軸、一個Y軸和一個線型系列。X軸使用的是類別坐標軸(Category Axis)，Y軸使用的是數值坐標軸(Value Axis)。線型系列的數據存儲在一個數組中，每個元素表示一個數據點。

3.2 柱狀圖(Bar Chart)

柱狀圖用於展示離散數據的大小，通常用來比較不同組別之間的大小或展示數據的分布情況。下面是一個柱狀圖的示例：

var option = {
    title: {
        text: '銷售額'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data:['銷售額']
    },
    xAxis: {
        type: 'category',
        data: ['北京','上海','廣州','深圳','成都','武漢']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '銷售額',
        type: 'bar',
        data: [1200, 1500, 1800, 2000, 1600, 1400]
    }]
};

在這個示例中，我們創建了一個柱狀圖，包括一個標題、一個提示框、一個圖例、一個X軸、一個Y軸和一個柱狀系列。提示框使用的是陰影指示器(Shadow)。柱狀系列的數據存儲在一個數組中，每個元素表示一個數據點。

3.3 餅圖(Pie Chart)

餅圖用於展示數據的佔比情況，通常用來展示某個組別佔比或數據的分布情況。下面是一個餅圖的示例：

var option = {
    title: {
        text: '銷售額佔比'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['北京','上海','廣州','深圳','成都','武漢']
    },
    series: [{
        name: '銷售額佔比',
        type: 'pie',
        radius: ['50%', '70%'],
        label: {
            show: false
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
            }
        },
        data: [
            {value: 1200, name: '北京'},
            {value: 1500, name: '上海'},
            {value: 1800, name: '廣州'},
            {value: 2000, name: '深圳'},
            {value: 1600, name: '成都'},
            {value: 1400, name: '武漢'}
        ]
    }]
};

在這個示例中，我們創建了一個餅圖，包括一個標題、一個提示框、一個圖例和一個餅狀系列。餅狀系列的數據存儲在一個數組中，每個元素表示一個數據點。在餅圖中，每個數據點包括一個名稱(name)和一個數值(value)。我們還可以設置餅圖的半徑(radius)、標籤(label)、高亮(emphasis)等。

3.4 地圖(Map)

地圖用於展示數據在地理位置上的分布情況，通常用來展示某個區域的數據情況或對比不同區域的數據情況。下面是一個地圖的示例：

var option = {
    title: {
        text: '全國主要城市銷量情況',
        subtext: '單位：萬元'
    },
    tooltip: {
        trigger: 'item'
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    visualMap: {
        min: 0,
        max: 200,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true,
        color: ['#d94e5d','#eac736','#50a3ba']
    },
    series: [{
        name: '銷售額',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data:[
            {name: '北京', value: 100},
            {name: '上海', value: 50},
            {name: '廣州', value: 80},
            {name: '深圳', value: 70},
            {name: '成都', value: 60},
            {name: '武漢', value: 90}
        ]
    }]
};

在這個示例中，我們創建了一個地圖，包括一個標題、一個工具箱、一個視覺映射(Visual Map)和一個地圖系列。地圖系列使用了中國地圖(Map Type為’china’)，通過設置數據(data)來展示各個城市的銷售額。工具箱(toolbox)用來切換地圖狀態，視覺映射(visualMap)用來設置顏色和色階，體現數據的密度和大小。