Echarts绘制折线图，超简单，源码点击即可运行！【文末源码地址】

news/2024/11/17 18:16:28/

文章目录

  • 前言
  • Apache Echarts
  • 绘制基础折线图
  • 绘制带标记的折线图
  • 绘制多条折线图
  • 绘制带标签的折线图
  • 完整源码地址

前言

本文包含的代码仅为部分片段，完整源码有详细注释，可在文末领取！

在当今数字化时代，数据可视化已成为一种必不可少的工具。它可以帮助我们更好地理解数据，从而做出更明智的决策。以下是数据可视化的一些重要性：

  • 帮助我们更好地理解数据

通过将数据可视化，我们可以更轻松地理解数据。图表和图形可以帮助我们发现数据中的模式、趋势和异常值，从而更好地理解数据。

  • 帮助我们做出更好的决策

通过可视化数据，我们可以更好地了解数据中的信息，从而做出更好的决策。例如，如果我们正在分析销售数据，我们可以使用可视化工具来查看哪些产品最畅销，哪些产品需要进一步推销。

  • 帮助我们与他人分享数据

通过将数据可视化，我们可以更好地与他人分享数据。图表和图形可以帮助我们向他人传达数据中的信息，使他们更容易理解数据。

Apache Echarts

官网地址：https://echarts.apache.org/zh/index.html

Apache Echarts 的优点：

  • 官网提供超过200款图表案例
  • 基于 JavaScript 的开源可视化图表库
  • 提供详细的API文档方便查找图表配置

本文就讲解如何用 Apache Echarts 绘制常见的折线图。

折线图： 折线图用于显示数值变量随时间变化的趋势。每个数据点表示一个时间点的值。

绘制基础折线图

折线图如下：

在这里插入图片描述

图表包含内容有：

  • 标题、图例、坐标轴
  • 当鼠标移动到折线图上会有提示框出现
  • 还可以将曲线设置为平滑

源码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flask+echarts项目</title><!-- 导入下载的 echarts.min.js --><script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div><script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));// 自定义图表的宽高
// var myChart=echarts.init(document.getElementById('main'),null,{width:500,height:400});// 跟随浏览器的宽度自适应图表大小
// var myChart=echarts.init(document.getElementById('main'));
// window.addEventListener('resize',function(){myChart.resize();});// 指定图表的配置项和数据
var option={// 图表标题配置title:{text:'基础折线图'},// 提示框组件tooltip:{// 是否显示提示框show:true,// 触发类型，axis 移动到坐标轴就触发trigger:'axis'},// 图例配置项legend:{// 图例的数据数组，data:["销量"],},// X 轴配置项xAxis:{// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴type:'category',// 坐标轴名称，可以对每一个名称进行单独配置，比如：Mon 显示为红色data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},// y 轴配置项yAxis:{// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴type:'value',},// 系列配置，根据不同图表有不同的配置series:[{// 系列名称，用于tooltip显示，legend图例筛选name:'销量',// 图表类型type:'line',// 数据内容data:[150, 230, 224, 218, 135, 147, 260],// 是否平滑曲线显示smooth: true}]
};
//使用刚指定的配置项和数据显示图像
myChart.setOption(option);
</script>
</body>
</html>

绘制带标记的折线图

折线图如下：

在这里插入图片描述

图表包含内容有：

  • 标题、图例、坐标轴
  • 当鼠标移动到折线图上会有提示框出现
  • 每条折线数据的最高点、最低点
  • 每条折现数据的平均值线

源码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flask+echarts项目</title><!-- 导入下载的 echarts.min.js --><script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:500px;"></div><script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));// 指定图表的配置项和数据
var option={// 图表标题配置title:{text:'折线图'},// 提示框组件tooltip:{// 是否显示提示框show:true,// 触发类型，axis 移动到坐标轴就触发trigger:'axis'},// 图例配置项legend:{},// 辅助工具栏：保存图片、图表切换、区域缩放、展示数据、重置toolbox:{// 各工具的配置项feature:{// 保存图片工具设置saveAsImage:{show:true},// 动态类型转换设置，magicType:{show:true,type:['line','bar']},// 重置按钮restore:{}}},// X 轴配置项xAxis:{// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴type:'category',// x轴标签与坐标轴刻度的位置：false对齐，true中间boundaryGap:false,// 坐标轴名称，可以对每一个名称进行单独配置，比如：Mon 显示为红色data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},// y 轴配置项yAxis:{// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴type:'value',// 坐标轴刻度标签的相关设置。axisLabel:{formatter:"{value} °C"}},// 系列配置，根据不同图表有不同的配置series:[{// 系列名称，用于tooltip显示，legend图例筛选name:'Heighest',// 图表类型type:'line',// 数据内容data:[10, 11, 13, 11, 12, 12, 9],// 图表标注内容markPoint:{data:[{type:"max",name:"最大值"},{type:"min",name:"最小值"},]},// 图线标注markLine:{data:[{type:"average",name:"平均值"}]}},{// 系列名称，用于tooltip显示，legend图例筛选name:'Lowest',// 图表类型type:'line',// 数据内容data:[1, -2, 2, 5, 3, 2, 0],// 图表标注内容markPoint:{data:[{type:"min",name:"最小值"}]},// 图线标注markLine:{data:[{type:"average",name:"平均值"}]}},]
};
//使用刚指定的配置项和数据显示图像
myChart.setOption(option);
</script>
</body>
</html>

绘制多条折线图

折线图如下：

在这里插入图片描述

图表包含内容有：

  • 标题、图例、坐标轴
  • 当鼠标移动到折线图上会显示多条折现数据提示框

源码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flask+echarts项目</title><!-- 导入下载的 echarts.min.js --><script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:500px;"></div><script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));// 指定图表的配置项和数据
var option={// 图表标题配置title:{text:'折线图',subtext:'点击右上方图标试试'},// 提示框组件tooltip:{// 是否显示提示框show:true,// 触发类型，axis 移动到坐标轴就触发trigger:'axis'},// 图例配置项legend:{// 图例的数据数组，data:["Email","Union Ads","Video Ads","Direct","Search Engine"],},// 直角坐标系内绘图网格grid:{// grid 组件离容器左侧的距离left:"3%",// grid 组件离容器右侧的距离。right:"3%",// grid 组件离容器下侧的距离bottom:"3%",// grid 区域是否包含坐标轴的刻度标签。containLabel:true},// 辅助工具栏：保存图片、图表切换、区域缩放、展示数据、重置toolbox:{// 各工具的配置项feature:{// 保存图片工具设置saveAsImage:{show:true},// 动态类型转换设置，magicType:{show:true,type:['line','bar','stack']}}},// X 轴配置项xAxis:{// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴type:'category',// x轴标签与坐标轴刻度的位置：false对齐，true中间boundaryGap:false,// 坐标轴名称，可以对每一个名称进行单独配置，比如：Mon 显示为红色data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},// y 轴配置项yAxis:{// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴type:'value',},// 系列配置，根据不同图表有不同的配置series:[{// 系列名称，用于tooltip显示，legend图例筛选name:'Email',// 图表类型type:'line',// 数据内容data:[120, 132, 101, 134, 90, 230, 210],// 是否平滑曲线显示smooth: true},{// 系列名称，用于tooltip显示，legend图例筛选name:'Union Ads',// 图表类型type:'line',// 数据内容data:[220, 182, 191, 234, 290, 330, 310],// 是否平滑曲线显示smooth: true},{// 系列名称，用于tooltip显示，legend图例筛选name:'Video Ads',// 图表类型type:'line',// 数据内容data:[150, 232, 201, 154, 190, 330, 410],// 是否平滑曲线显示smooth: true},{// 系列名称，用于tooltip显示，legend图例筛选name:'Direct',// 图表类型type:'line',// 数据内容data:[320, 332, 301, 334, 390, 330, 320],// 是否平滑曲线显示smooth: true},{// 系列名称，用于tooltip显示，legend图例筛选name:'Search Engine',// 图表类型type:'line',// 数据内容data:[820, 932, 901, 934, 1290, 1330, 1320],// 是否平滑曲线显示smooth: true}]
};
//使用刚指定的配置项和数据显示图像
myChart.setOption(option);
</script>
</body>
</html>

绘制带标签的折线图

折线图如下：

在这里插入图片描述

图表包含内容有：

  • 标题、图例、坐标轴
  • 折线图上展示数据标签
  • 当鼠标移动到折线图上会显示多条折现数据提示框

源码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flask+echarts项目</title><!-- 导入下载的 echarts.min.js --><script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:500px;"></div><script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));// 指定图表的配置项和数据
var option={// 图表标题配置title:{text:'折线图',subtext:'点击右上方图标试试'},// 提示框组件tooltip:{// 是否显示提示框show:true,// 触发类型，axis 移动到坐标轴就触发trigger:'axis'},// 图例配置项legend:{// 图例的数据数组，data:["Email","Union Ads","Video Ads","Direct","Search Engine"],},// 直角坐标系内绘图网格grid:{// grid 组件离容器左侧的距离left:"3%",// grid 组件离容器右侧的距离。right:"3%",// grid 组件离容器下侧的距离bottom:"3%",// grid 区域是否包含坐标轴的刻度标签。containLabel:true},// 辅助工具栏：保存图片、图表切换、区域缩放、展示数据、重置toolbox:{// 各工具的配置项feature:{// 保存图片工具设置saveAsImage:{show:true},// 动态类型转换设置，magicType:{show:true,type:['line','bar','stack']}}},// X 轴配置项xAxis:{// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴type:'category',// x轴标签与坐标轴刻度的位置：false对齐，true中间boundaryGap:false,// 坐标轴名称，可以对每一个名称进行单独配置，比如：Mon 显示为红色data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},// y 轴配置项yAxis:{// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴type:'value',},// 系列配置，根据不同图表有不同的配置series:[{// 系列名称，用于tooltip显示，legend图例筛选name:'Email',// 图表类型type:'line',// 数据内容data:[120, 132, 101, 134, 90, 230, 210],// 是否平滑曲线显示smooth: true},{// 系列名称，用于tooltip显示，legend图例筛选name:'Union Ads',// 图表类型type:'line',// 数据内容data:[220, 182, 191, 234, 290, 330, 310],// 是否平滑曲线显示smooth: true},{// 系列名称，用于tooltip显示，legend图例筛选name:'Video Ads',// 图表类型type:'line',// 数据内容data:[150, 232, 201, 154, 190, 330, 410],// 是否平滑曲线显示smooth: true},{// 系列名称，用于tooltip显示，legend图例筛选name:'Direct',// 图表类型type:'line',// 数据内容data:[320, 332, 301, 334, 390, 330, 320],// 是否平滑曲线显示smooth: true},{// 系列名称，用于tooltip显示，legend图例筛选name:'Search Engine',// 图表类型type:'line',// 添加标签label:{show:true,position:"top"},// 数据内容data:[820, 932, 901, 934, 1290, 1330, 1320],// 是否平滑曲线显示smooth: true}]
};
//使用刚指定的配置项和数据显示图像
myChart.setOption(option);
</script>
</body>
</html>

完整源码地址

链接：https://pan.baidu.com/s/1cNwjkaG1-nZQPqjcnWiDfA?pwd=8c9v
提取码：8c9v


http://www.ppmy.cn/news/83972.html

相关文章

【OpenCV DNN】Flask 视频监控目标检测教程 03

【OpenCV DNN】Flask 视频监控目标检测教程 03

欢迎关注『OpenCV DNN Youcans』系列&#xff0c;持续更新中 【OpenCV DNN】Flask 视频监控目标检测教程 03 3.3 上传本地图片进行人脸检测3.3.1 OpenCV 级联分类器类 cv::CascadeClassifier3.3.2 cvFlask03 项目的构建步骤 本系列从零开始&#xff0c;详细讲解使用 Flask 框架…
阅读更多...
全网最详细，Selenium自动化测试问题总结+解决，跟着大佬上高速...

全网最详细，Selenium自动化测试问题总结+解决，跟着大佬上高速...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 Selenium4自动化测…
阅读更多...
写写shell中字符串的处理方法

写写shell中字符串的处理方法

在Shell中&#xff0c;字符串是最常见的数据类型之一。为了方便处理字符串&#xff0c;Shell提供了许多内置命令和语法。下面是一些常见的字符串处理方法&#xff1a; 字符串截取&#xff1a;可以使用${var:offset:length}语法来截取字符串。其中&#xff0c;var表示要截取的字…
阅读更多...
Python操作XML教程：读取、写入、修改和保存XML文档

Python操作XML教程：读取、写入、修改和保存XML文档

目录 导入所需模块解析XML文档获取元素遍历XML文档写入新的元素修改元素的内容和属性删除元素保存修改后的XML文档示例演示python操作xml的常用方法 XML是一种常见的数据交换格式&#xff0c;在许多应用中都被广泛使用。通过掌握Python操作XML的基础知识&#xff0c;您将能够轻…
阅读更多...
mongodb-分片集群-搭建

mongodb-分片集群-搭建

分片集群 高数据量和吞吐量的数据库应用会对单机的性能造成较大压力,大的查询量会将单机的CPU耗尽,大的数据量对单机的存储压力较大,最终会耗尽系统的内存而将压力转移到磁盘IO上。 为了解决这些问题,有两个基本的方法: 垂直扩展和水平扩展。 垂直扩展&#xff1a;增加更多的…
阅读更多...
Flink+hadoop部署及Demo

Flink+hadoop部署及Demo

Hadoop集群高可用部署 下载hadoop包地址 https://dlcdn.apache.org/hadoop/common/hadoop-3.2.4/hadoop-3.2.4.tar.gz 上传并解压到3台服务器 配置3台主机的hosts和免密登录 1.修改.bash_profile vi .bash_profile # HADOOP_HOME export HADOOP_HOME/apps/svr/hadoop-3.2.…
阅读更多...
【设计模式_七大原则_23种模式】

【设计模式_七大原则_23种模式】

what is Design pattern&#xff1f;&#xff1f;&#xff1f; 是一套反复被使用的、经过分类编目的、家喻户晓的、代码设计经验的总结。 它是 软件工程的一块基石。 “ 设计模式是软件工程中一种通用的&#xff0c;可复用的一种解决方案&#xff0c;它是一种解决问题的通用模板…
阅读更多...
阿里面试，HR说我不配21K，直接翻脸.....

阿里面试，HR说我不配21K，直接翻脸.....

好家伙&#xff0c;这奇葩事可真是多&#xff0c;前两天和粉丝聊天&#xff0c;他说前段时间面试阿里的测开岗&#xff0c;最后和面试官干起来了。 我问他为什么&#xff0c;他说没啥&#xff0c;就觉得面试官太装了&#xff0c;我说要21K&#xff0c;他说太高了&#xff0c;说…
阅读更多...
最新文章

Copyright @ 2022~2023