深入學習Echartsdemo

一、Echartsdemo 簡介

Echartsdemo 是由百度公司推出的一款開源的數據可視化圖表庫，為開發者提供了絢麗多彩的圖表展示和動畫渲染效果。Echartsdemo 基於純 JavaScript 開發，兼容性良好，支持多種數據格式和維度展示，可應用於 Web 端、移動端和桌面端。下面我們通過實戰演示深入學習 Echartsdemo 的使用方法。

二、基礎圖表繪製

繪製圖表的第一步是引入 Echartsdemo 庫和自己的數據，數據一般是一個 JSON 對象格式。以柱狀圖為例：

// 引入 Echartsdemo 庫
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>

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

// 指定圖表的配置項和數據
var option = {
    title: {
        text: '月度統計'
    },
    tooltip: {},
    legend: {
        data:['銷量']
    },
    xAxis: {
        data: ["一月","二月","三月","四月","五月","六月"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [100, 200, 300, 400, 500, 600]
    }]
};

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

通過以上代碼，我們可以看到一個基礎的柱狀圖表已經生成，包含標題、提示框、圖例以及柱狀圖的 x 軸和 y 軸數據。我們可以通過修改配置項和數據來自定義自己的圖表，如修改標題名、調整柱狀圖的寬度、更改柱狀圖顏色等。

三、高級圖表展示

在基礎圖表展示的基礎上，Echartsdemo 還提供了許多高級圖表展示的效果，如餅狀圖、折線圖、雷達圖等。下面我們通過實戰演示來了解如何繪製這些高級圖表。

1. 餅狀圖

餅狀圖是一種展示數據佔比關係的圖表，我們來看看通過 Echartsdemo 如何繪製一個餅狀圖：

// 引入 Echartsdemo 庫
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>

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

// 指定圖表的配置項和數據
var option = {
    title: {
        text: '餅圖演示',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    series: [
        {
            name: '訪問來源',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接訪問'},
                {value: 310, name: '郵件營銷'},
                {value: 234, name: '聯盟廣告'},
                {value: 135, name: '視頻廣告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

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

在代碼中，我們設置了餅狀圖的標題、提示框、圖例和數據。通過 radius 屬性可以設置餅狀圖的內徑和外徑，通過 emphasis 屬性可以設置鼠標懸停時的效果。通過修改數據值和名稱，我們可以自定義自己的餅狀圖。

2. 折線圖

折線圖是一種反映數據變化趨勢的圖表，通過折線的起伏反映數據的波動情況。我們來看看通過 Echartsdemo 如何繪製一個折線圖：

// 引入 Echartsdemo 庫
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>

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

// 指定圖表的配置項和數據
var option = {
    title: {
        text: '折線圖演示'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['郵件營銷','聯盟廣告','視頻廣告','直接訪問','搜索引擎']
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} 次'
        }
    },
    series: [
        {
            name:'郵件營銷',
            type:'line',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'聯盟廣告',
            type:'line',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'視頻廣告',
            type:'line',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接訪問',
            type:'line',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

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

在代碼中，我們設置了折線圖的標題、提示框、圖例和數據。通過 xAxis 和 yAxis 屬性可以設置折線圖的橫坐標和縱坐標。通過 series 屬性可以設置折線的名稱和數據值。通過調整數據值和名稱，我們可以生成自己的折線圖。

四、總結

綜上所述，Echartsdemo 是一款功能強大、使用方便的數據可視化圖表庫，可應用於多種應用場景。通過本文實戰演示，我們深入了解了 Echartsdemo 的基礎圖表繪製和高級圖表展示的方法，並且掌握了如何自定義自己的圖表。相信通過不斷練習和實踐，我們可以運用 Echartsdemo 繪製出更加精美、多樣的圖表。