Echarts入门（一）| 折线图柱形图饼图

最新推荐文章于 2024-11-04 16:28:45 发布

秃头崽崽

最新推荐文章于 2024-11-04 16:28:45 发布

阅读量1.5k

点赞数 1

分类专栏：数据可视化文章标签：可视化数据可视化 js python Echarts

本文链接：https://blog.csdn.net/SartinL/article/details/106984101

版权

本文详细介绍ECharts图表库的使用方法，包括折线图、柱状图和饼图的配置与展示，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写目录标题

Echarts是什么

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

echarts.min.js的下载：

从官网上点击下载后进入选择GitHub

https://github.com/apache/incubator-echarts/tree/4.8.0/dist

然后点击echarts.min.js进入，选择Raw，然后Ctrl+S即可另存为

由于是国外的镜像站点，会比较慢，可私信我发给你
在这里插入图片描述

写一个Flask进行前端展示 echart.py

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/echarts')
def echarts():
    return render_template('echarts.html')

if __name__ == "__main__":
    app.run(debug=True)

引入Echarts

<head>
    <meta charset="UTF-8">
    <script src="/static/js/echarts.min.js"></script>
    <!-- cdn -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
</head>

准备一个足够高宽的div容器

<div id="line" style="width: 600px; height: 400px;"></div>
<div id="bar" style="width: 600px; height: 400px;"></div>
<div id="pie" style="width: 600px; height: 400px;"></div>

折线图

折线图是排列在工作表的列或行中的数据可以绘制到折线图中。折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。在折线图中，类别数据沿水平轴均匀分布，所有值数据沿垂直轴均匀分布。

<body>
    <div id="line" style="width: 600px; height: 400px;"></div>
    <script>
        var line_chart =  echarts.init(document.getElementById("line"));
        var line_option