前端數據可視化入門：使用ECharts繪制基礎折線圖教程

據可視化是現代前端開發中必不可少的一部分，它能夠將復雜的數據以直觀的形式展示出來，使用戶更容易理解數據的意義。而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的官方文檔獲取更詳細的信息。

文由ScriptEcho平臺提供技術支持

項目地址：傳送門

Vue.js 中使用 ApexCharts 構建交互式折線圖

應用場景

ApexCharts 是一個功能強大的 JavaScript 庫，用于創建交互式、可定制的圖表。在 Vue.js 中，它可以通過 vue3-apexcharts 插件輕松集成，允許開發人員輕松地將圖表添加到他們的應用程序中。

基本功能

此代碼片段展示了一個使用 ApexCharts 構建的交互式折線圖。該圖表顯示了四個數據集（藍色、綠色、橙色和紅色）的趨勢，并允許用戶懸停在數據點上以查看詳細信息。

功能實現

1. 安裝 vue3-apexcharts 插件

npm install vue3-apexcharts

2. 導入 ApexCharts 組件

import ApexCharts from 'vue3-apexcharts'

3. 注冊 ApexCharts 組件

Vue.component('apexcharts', ApexCharts)

4. 定義圖表數據

const series = [
  // ...
]

5. 定義圖表選項

const chartOptions = {
  // ...
}

6. 渲染圖表

<template>
  <ApexCharts
    :type="chartOptions.chart.type"
    height="350"
    width="450"
    :options="chartOptions"
    :series="series"
  ></ApexCharts>
</template>

關鍵代碼分析

**chartOptions.chart.type：**指定圖表類型，此處為折線圖。

**series：**包含要顯示在圖表中的數據集。

**plotOptions.line.isSlopeChart：**啟用斜率圖表，允許用戶查看數據的趨勢。

**tooltip.followCursor：**啟用工具提示跟隨光標。

**dataLabels.formatter：**自定義數據標簽的格式，以顯示系列名稱。

**stroke.width 和 stroke.dashArray：**設置線條的粗細和虛線模式。

總結與展望

開發這段代碼的過程讓我深入了解了 ApexCharts 庫的強大功能和 vue3-apexcharts 插件的易用性。未來，此圖表功能可以擴展和優化，包括：

添加交互式功能，如縮放和拖放。
整合后端數據源以實現實時更新。
優化響應式設計以適應不同設備。
更多組件：

獲取更多Echos

本文由ScriptEcho平臺提供技術支持

項目地址：傳送門

微信搜索ScriptEcho了解更多

線圖

JSON是一種輕量級的數據交互格式，本質上是一個帶有特定格式的字符串。

JSON就是一種在各個編程語言中流通的數據格式，負責不同編程語言中的數據傳遞和交互。

python數據和json數據的相互轉化

# 導入json模塊
import json

# 準備符合json格式要求的python數據
data = [{"name":"aa","age":16},{"name":"bb","age":18}]

# 通過json.dumps(data)方法把python數據轉化為了json數據
data = json.dumps(data)
# 如果有中文可以帶上：ensure_ascii = False參數確保中文正常轉換

# 通過json.loads(data)方法把json數據轉化為了python數據
data = json.loads(data)

開發可視化圖表使用的技術棧：pyecharts包

官方網站：pyecharts.org
查看官方示例
官方畫廊：https://gallery.pyecharts.org/#/README

模塊安裝：pip install pyecharts

pyecharts入門

基礎折線圖

#　導包，導入Line功能構建折線圖對象
from pyecharts.charts import Line

# 得到折線圖對象
line = Line()
# 添加x軸數據
line.add_xaxis(["中國","美國","英國"])
# 添加y軸數據
line.add_yaxis("GDP",[30, 20 ,10])
# 生成圖表
line.render()

運行后，

生成了一個html文件，用瀏覽器打開：

折線圖基本構建完成~

全局配置選項 set_global_opts

TitleOpts:標題配置項
LegendOpts:圖例配置項
ToolboxOpts:工具箱配置項
VisualMapOpts:視覺映射配置項
TooltipOpts:提示框配置項
DataZoomOpts:區域縮放配置項

# 設置全局配置項set_global_opts來設置
line.set_global_opts(
    title_opts=TitleOpts(title='GDP展示', pos_left='center', pos_bottom='1%'),
    legend_opts=LegendOpts(is_show=True),
    toolbox_opts=ToolboxOpts(is_show=True),
    visualmap_opts=VisualMapOpts(is_show=True),
    tooltip_opts=TooltipOpts(is_show=True),
)

設置過后的折線圖：

數據處理

json原始數據格式化網站ab173.com

"""
演示可視化需求1：折線圖開發
"""
import json
from pyecharts.charts import Line
from pyecharts.options import TitleOpts, LabelOpts

# 處理數據
f_us = open("D:/rfpython/美國.txt", "r", encoding="UTF-8")
us_data = f_us.read()   # 美國的全部內容

f_jp = open("D:/rfpython/日本.txt", "r", encoding="UTF-8")
jp_data = f_jp.read()   # 日本的全部內容

f_in = open("D:/rfpython/印度.txt", "r", encoding="UTF-8")
in_data = f_in.read()   # 印度的全部內容

# 去掉不合JSON規范的開頭
us_data = us_data.replace("jsonp_1629344292311_69436(", "")
jp_data = jp_data.replace("jsonp_1629350871167_29498(", "")
in_data = in_data.replace("jsonp_1629350745930_63180(", "")

# 去掉不合JSON規范的結尾
us_data = us_data[:-2]
jp_data = jp_data[:-2]
in_data = in_data[:-2]

# JSON轉Python字典
us_dict = json.loads(us_data)
jp_dict = json.loads(jp_data)
in_dict = json.loads(in_data)

# 獲取trend key
us_trend_data = us_dict['data'][0]['trend']
jp_trend_data = jp_dict['data'][0]['trend']
in_trend_data = in_dict['data'][0]['trend']

# 獲取日期數據，用于x軸，取2020年（到314下標結束）
us_x_data = us_trend_data['updateDate'][:314]
jp_x_data = jp_trend_data['updateDate'][:314]
in_x_data = in_trend_data['updateDate'][:314]

# 獲取確認數據，用于y軸，取2020年（到314下標結束）
us_y_data = us_trend_data['list'][0]['data'][:314]
jp_y_data = jp_trend_data['list'][0]['data'][:314]
in_y_data = in_trend_data['list'][0]['data'][:314]

# 生成圖表
line = Line()       # 構建折線圖對象
# 添加x軸數據
line.add_xaxis(us_x_data)   # x軸是公用的，所以使用一個國家的數據即可
# 添加y軸數據
line.add_yaxis("美國確診人數", us_y_data, label_opts=LabelOpts(is_show=False))     # 添加美國的y軸數據
line.add_yaxis("日本確診人數", jp_y_data, label_opts=LabelOpts(is_show=False))     # 添加日本的y軸數據
line.add_yaxis("印度確診人數", in_y_data, label_opts=LabelOpts(is_show=False))     # 添加印度的y軸數據

# 設置全局選項
line.set_global_opts(
    # 標題設置
    title_opts=TitleOpts(title="2020年美日印三國確診人數對比折線圖", pos_left="center", pos_bottom="1%")
)

# 調用render方法，生成圖表
line.render()
# 關閉文件對象
f_us.close()
f_jp.close()
f_in.close()

生成折線圖：

在線咨詢

上一篇：前端開發崗位是否應該細分為偏靜態和偏交互
下一篇：「網絡安全」常見攻擊篇（14）-網頁掛馬

您的項目需求

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

整合營銷服務商