文章目录
- 前言
- 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
