Excel函數公式：簡單實用的Excel折線圖表制作技巧，必須掌握

圖表一直是Excel中的“高大上”，它的優點也是非常的多，直觀，形象，具體……今天我們要學習的就是方便實用的Excel折線圖繪制機技巧。

一、整理數據。

方法：

根據實際情況錄入數據

二、插入折線圖

方法：

1、選中數據源。

2、【插入】-【圖表】-【二維折線圖】，選擇自己所需要的樣式。

三、美化圖表

1、刪除背景線

方法：

1、單擊選中背景線。

2、【右鍵】-【刪除】。

2、設置橫坐標軸字體的顯示方式。

方法：

1、選中橫坐標軸上的內容。

2、【右鍵】-【設置坐標軸格式】-【大小與屬性標簽】（第三個雙向箭頭按鈕）-【自定義角度】中輸入數值，本示例中為：-40。

3、快速布局及其他。

方法：

1、選中圖表。

2、【設計】-【快速布局】，選擇自己喜歡的樣式。

3、根據實際需要繼續美化圖表，例如標題等。

四、保存圖表，拓展應用。

方法：

1、【文件】-【另存為】并選擇存儲位置。

2、選擇存儲類型為網頁（*.htm;*.html），并選擇【整個工作薄】。

3、【保存】。

五、查看網頁數據并拓展應用。

從保存的網頁數據中我們可以看出，既有圖表，又有網頁，這樣一來我們對數據的應用將會非常的方便。

據可視化是現代前端開發中必不可少的一部分，它能夠將復雜的數據以直觀的形式展示出來，使用戶更容易理解數據的意義。而ECharts作為一款強大的開源可視化庫，廣泛應用于各種數據可視化需求中。本文將介紹如何使用ECharts繪制一個基礎的折線圖。

一、準備工作

在開始之前，請確保你已經安裝和配置好以下工具：

Node.js（推薦安裝最新的LTS版本）
一個現代化的前端開發編輯器（推薦使用VSCode）

二、創建項目并安裝ECharts

1. 初始化項目

首先，我們需要創建一個新的前端項目并初始化npm。

mkdir echarts-demo
cd echarts-demo
npm init -y

2. 安裝依賴

安裝ECharts庫：

npm install echarts --save

三、構建基礎頁面

1. 創建HTML文件

在項目根目錄下創建一個 index.html 文件，并添加基本的HTML結構。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ECharts 折線圖示例</title>
  <style>
    #main {
      width: 600px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="main"></div>
  <script src="node_modules/echarts/dist/echarts.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

#main: 圖表的容器，設置了寬度和高度。
echarts.min.js: ECharts庫的腳本文件。
app.js: 存放ECharts相關配置和代碼的外部JavaScript文件。

2. 創建JavaScript文件

在項目根目錄下創建一個 app.js 文件。

// app.js

// 初始化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'
    },
    series: [
        {
            name: '銷量',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210]
        }
    ]
};

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

四、運行項目

1. 啟動本地開發服務器

為了方便地在本地查看效果，我們可以使用http-server運行本地服務器。首先，安裝http-server：

npm install -g http-server

然后，在項目根目錄下啟動服務器：

http-server

2. 打開瀏覽器查看效果

啟動服務器后，在控制臺中可以看到本地服務器的地址，例如http://127.0.0.1:8080。在瀏覽器中打開該地址，即可查看我們繪制的基礎折線圖。

五、深入理解ECharts配置

1. 圖表標題

通過title屬性設置圖表的標題，包括標題的文本、樣式、位置等。

title: {
    text: '基礎折線圖',
    left: 'center',
    textStyle: {
        color: '#333'
    }
}

2. 提示框

tooltip屬性配置提示框，trigger屬性用于指定觸發類型，如axis表示坐標軸觸發，item表示數據項觸發。

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'line'
    }
}

3. 圖例

legend屬性用于配置圖例，包括圖例的名稱、位置、樣式等。

legend: {
    data: ['銷量'],
    bottom: 0
}

4. 坐標軸

xAxis和yAxis分別配置x軸和y軸，包括坐標類型、刻度、標簽等。

xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
    type: 'value'
}

5. 數據系列

series用于定義圖表中的數據系列，包括數據名稱、類型、樣式等。

series: [
    {
        name: '銷量',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210],
        lineStyle: {
            color: '#3b7ddd'
        },
        itemStyle: {
            borderColor: '#3b7ddd'
        }
    }
]

六、總結

通過上述步驟，你應該已經掌握了使用ECharts繪制基礎折線圖的基本方法。ECharts強大的配置能力和靈活的定制選項使其可以勝任各種復雜的數據可視化任務。希望這篇文章對你理解和使用ECharts有所幫助，祝你在數據可視化的道路上不斷前進！如果你有更多需求，可以查閱ECharts的官方文檔獲取更詳細的信息。

學設計

教學內容	折線圖數據變化的實現
教學目標	知識目標:了解數據在圖形變化中的作用能力目標:能夠完成折線圖數據修改的代碼編寫素質目標:培養學生團結互助、熱愛祖國的綜合素質
重點	Echarts中折線圖定義和使用
難點	折線圖數據修改效果的代碼編寫
教學方法	講授法、任務驅動法、啟發法
課堂教學進程	教學環節	教師活動	學生活動	設計理念
	1、課堂考勤、上節課知識點回顧、課后作用問題處理（10分鐘） 2、課堂導入：折線圖效果的實現（5分鐘） 3、新課內容：使用電子課件和效果演示工具的使用（20分鐘）以練習案例的方式引導學生自己動手實現效果，感受代碼編寫（45分鐘） 4、總結課堂內容，布置作業（5分鐘） 5

在線咨詢

上一篇：揭秘爬蟲黑科技：HTML Title標簽內容提取，輕松上手！
下一篇：java之學習篇-亂碼問題匯總

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Excel函數公式：簡單實用的Excel折線圖表制作技巧，必須掌握

一、準備工作

二、創建項目并安裝ECharts

1. 初始化項目

2. 安裝依賴

三、構建基礎頁面

1. 創建HTML文件

2. 創建JavaScript文件

四、運行項目

1. 啟動本地開發服務器

2. 打開瀏覽器查看效果

五、深入理解ECharts配置

1. 圖表標題

2. 提示框

3. 圖例

4. 坐標軸

5. 數據系列

六、總結

您的項目需求