前端数据可视化入门：使用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小时内与您取得联系。

整合营销服务商