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的官方文檔獲取更詳細的信息。

明：SVG 雖然也是標簽，但它不是 HTML5，標題加了 HTML5 只是為了與 canvas 放到一起。

一、為什么要學 SVG ?

SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基于像素的，但是 SVG 沒有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會失真。

與其他圖像比較，SVG 的優勢有以下幾點：

SVG 可以被多個工具讀取和修改。
SVG 與其他格式圖片相比，尺寸更小，可壓縮性強。
SVG 可任意伸縮。
SVG 圖像可以隨意地高質量打印。
SVG 圖像可以添加文本和事件，還可搜索，適合做地圖。
SVG 是純粹的 XML，不是 HTML5。
SVG是W3C標準

二、SVG 形狀元素

2.1、svg 標簽

SVG 的代碼都放到 svg 標簽呢，SVG 中的標簽都是閉合標簽，與html中標簽用法一致。svg的屬性有：

有width和height，指定了svg的大小。

eg：畫一條直線，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 設置的寬高沒有帶單位，此時默認是像素值，如果需要添加單位時，除了絕對單位，也可以設置相對單位。

viewBox 屬性

使用語法：<svg viewBox=" x1,y1,width,height "></svg>

四個參數分別是左上角的橫縱坐標、視口的寬高。表示只看SVG的某一部分，由上述四個參數決定。

使用 viewBox 之后，相當于svg整體大小不變，只能看到 viewBox 設置部分，視覺上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代碼可以直接嵌入到 html 頁面中，也可以通過 html 的embed、object、iframe嵌入到html中。嵌入的時候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？

2.2.1、embed 嵌入：

使用語法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路徑，type 表示 embed 引入文件類型。

優點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用語法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路徑，type 表示 object 引入文件類型。

優點：所有瀏覽器都支持，支持 html、html4 和 html5。

缺點：不允許使用腳本。

2.2.3、iframe 嵌入：

使用語法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路徑，width、height、frameborder 設置的大小和邊框。

優點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 標簽直接插入 html 內容內，與其他標簽用法一致。

2.2.5、連接到svg文件：

使用 a 標簽，直接鏈接到 SVG 文件。

使用語法：<a href="line.svg">查看SVG</a>

三、SVG形狀元素

3.1、線 - line

使用語法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line標簽創建線條，(x1,y1)是起點，(x2,y2)是終點，stroke繪制黑線，stroke-width是線寬。

3.2、矩形 - rect

//使用語法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小設置
 x="50" y="50"  //可選 左上角位置，svg的左上角默認(0,0)
 rx="20" ry="50" //可選 設置圓角
 stroke-width="3" stroke="red" fill="pink" //繪制樣式控制
></rect>
</svg>

上述參數 width、height是必填參數，x、y是可選參數，如不設置的時候，默認為(0,0)，也就是svg的左上角開始繪制。rx、ry是可選參數，不設置是矩形沒有圓角。fill定義填充顏色。

3.3、圓形 - circle

// 使用語法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定義圓心 ，可選
  r="40" // 圓的半徑
  stroke="black" stroke-width="2" fill="red"/> //繪制黑框填充紅色
</svg>

上述(cx,xy)定義圓心的位置，是可選參數，如果不設置默認圓心是（0,0）。r是必需參數，設置圓的半徑。

3.4、橢圓 - ellipse

橢圓與圓相似，不同之處在于橢圓有不同的x和y半徑，而圓兩個半徑是相同的。

// 使用語法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //設置橢圓的x、y方向的半徑
  fill="purple" // 橢圓填充色
  cx="150" cy="150" //設置橢圓的圓心 ，可選參數
 ></ellipse>
</svg>

上述橢圓的兩個rx、ry兩個方向半徑是必須參數，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數，如果不設置，則默認圓心為（0,0）。

3.5、折線 - polyline

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 繪制出一個默認填充黑色的三角形 -->
 <polyline 
  points=" //點的集合
   0 ,0, // 第一個點坐標
   100,100, // 第二個點坐標
   100,200 // 第三個點坐標
    " 
  stroke="green" 
 ></polyline>
<!-- 繪制一個臺階式的一條折線 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代碼執行結果如圖所示：

需要注意的是 points 中包含了多個點的坐標，但不是一個數組。

3.6、多邊形 - polygon

polygon 標簽用來創建不少于3個邊的圖形，多邊形是閉合的，即所有線條連接起來。

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多邊形的第一點
   100,100,  //多邊形的第二點
    0,100  //多邊形的第三點
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon繪制的時候與折線有些類似，但是polygon會自動閉合，折線不會。

3.7、路徑 - path

path 是SVG基本形狀中最強大的一個，不僅能創建其他基本形狀，還能創建更多其他形狀，如貝塞爾曲線、2次曲線等。

點個關注，下篇更精彩！

在線咨詢

上一篇：html中表單的使用以及get和post的區別
下一篇：HTML中鼠標滾輪事件onmousewheel處理

您的項目需求

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

整合營銷服務商

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

一、準備工作

二、創建項目并安裝ECharts

1. 初始化項目

2. 安裝依賴

三、構建基礎頁面

1. 創建HTML文件

2. 創建JavaScript文件

四、運行項目

1. 啟動本地開發服務器

2. 打開瀏覽器查看效果

五、深入理解ECharts配置

1. 圖表標題

2. 提示框

3. 圖例

4. 坐標軸

5. 數據系列

六、總結

一、為什么要學 SVG ?

二、SVG 形狀元素

三、SVG形狀元素

您的項目需求