数据可视化高级技术Echarts(折线图)

已于 2024-04-08 14:05:56 修改
阅读量3.7k 收藏 39
点赞数 31
分类专栏： 数据可视化高级技术Echarts 文章标签： 信息可视化 echarts python
于 2024-04-08 14:05:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63181360/article/details/137502226
版权
本文详细介绍了如何在JavaScript中使用ECharts库实现折线图，包括基本折线图、平滑处理、线条颜色、宽度、类型、节点样式、区域填充颜色以及堆叠和阶梯图的设置方法。
摘要由CSDN通过智能技术生成

目录

一、什么是折线图

二、如何实现

1.基本折线图

2.如何变得平滑只需要定义：

smooth

3.如何定义线条的样式

color：设置线的颜色

 width：设置线宽

 type：设置线的类型

4.如何定义节点样式

symbol 

symbolSize：设置节点大小

 color：设置节点颜色

5.如何定义区域填充颜色（即线条的下方有颜色填充）

areaStyle

color：设置填充颜色

oringin：图形区域的起始位置

6.堆叠折线图

stack

7.阶梯图

step

一、什么是折线图

        折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。

二、如何实现

1.基本折线图

        只需要在数据序列series中将类型定义为type:line即可实现最基本的折线图

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

2.如何变得平滑只需要定义：

smooth

是否平滑视觉引导线，默认不平滑，可以设置成 true 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。一般来说ture够用

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
};

3.如何定义线条的样式

整体样式在linestyle中进行设置

color：设置线的颜色

支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充

 width：设置线宽

直接使用数字进行设置

 type：设置线的类型

有三种，solid(实线)、dashed(虚线)、dotted(点线)

 设置lineStyle，颜色为绿色，宽度为3，线类型为虚线

option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line",
    lineStyle: {
      color:"green",
      width:3,
      type: "dashed",
    },
  }]
}

4.如何定义节点样式

symbol 

        是一种配置选项，用于指定线图中节点的形状。这个配置选项的作用是改变线图中每个数据点的标记形状，默认的圆形。

一些常用的标记形状及其对应的配置方法：

  1. 圆形：使用 "circle" 标记形状。配置方法为 symbol: "circle"

  2. 菱形：使用 "diamond" 标记形状。配置方法为 symbol: "diamond"

  3. 三角形：使用 "triangle" 标记形状。配置方法为 symbol: "triangle"

  4. 十字形：使用 "cross" 标记形状。配置方法为 symbol: "cross"

  5. 叉形：使用 "cross" 标记形状。配置方法为 symbol: "cross"

  6. X 形：使用 "cross" 标记形状。配置方法为 symbol: "cross"

  7. 心形：使用 "heart" 标记形状。配置方法为 symbol: "heart"

  8. 星形：使用 "star" 标记形状。配置方法为 symbol: "star"

  9. 方形：使用 "squre" 标记形状。配置方法为 symbol: "squre"

symbolSize：设置节点大小

取值范围：0 到 1，表示占图案区域的百分比。

 color：设置节点颜色

设置节点形状为菱形，大小为10，颜色为红色

option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line",
    lineStyle: {
      color: "green",
      width: 1,
      type: "dashed",
    },
    symbol: "diamond" ,
    symbolSize: 10,
    color:"red"
  }]
}

5.如何定义区域填充颜色（即线条的下方有颜色填充）

areaStyle

        区域填充样式。设置后显示成区域面积图。

color：设置填充颜色

支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充

oringin：图形区域的起始位置

默认情况下，图形会从坐标轴轴线到数据间进行填充。如果需要填充的区域是坐标轴最大值到数据间，或者坐标轴最小值到数据间，或者某个数值到数据间则可以通过这个配置项进行设置。

可选值包括：

  • 'auto' 填充坐标轴轴线到数据间的区域（默认值）
  • 'start' 填充坐标轴底部（非 inverse 情况是最小值）到数据间的区域
  • 'end' 填充坐标轴顶部（非 inverse 情况是最大值）到数据间的区域
  • number 填充指定数值到数据间的区域（从 v5.3.2 开始支持）

填充颜色为rgba，填充区域为end（填充坐标轴顶部）

option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line",
    labelLine: {
      lineStyle: {
        type: "dashed",
        cap: "square"
      }
    },
    areaStyle: {
      color: "rgba(49, 250, 123, 1)",
      origin: "end"
    }
  }]
}

6.堆叠折线图

stack

        将每组数据添加上stack的相同名称即可，是否显示面积填充，看你的需求

示例：堆叠图，有面积填充

option = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

7.阶梯图

step

        使用step来设定：是否是阶梯线图。可以设置为 true 显示成阶梯线图，也支持设置成 'start', 'middle', 'end' 分别配置在当前点，当前点与下个点的中间点，下个点拐弯。

  1. 当 step 设置为 true 时，图表会显示为阶梯线图。这意味着在两个数据点之间的线段会垂直或水平延伸，直到下一个数据点的位置才会发生转折。这种方式强调了数据变化发生的阶段性。

  2. 当 step 设置为 'start' 时，线段会从当前数据点的起点垂直或水平延伸，直到下一个数据点的起点。这意味着转折发生在当前数据点的起始处。

  3. 当 step 设置为 'middle' 时，线段会从当前数据点的中间水平或垂直延伸，直到下一个数据点的中间位置。这意味着转折发生在当前数据点的中间。

  4. 当 step 设置为 'end' 时，线段会从当前数据点的终点水平或垂直延伸，直到下一个数据点的终点。这意味着转折发生在当前数据点的终点处。

option = {
  title: {
    text: 'Step Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Step Start', 'Step Middle', 'Step End']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Step Start',
      type: 'line',
      step: 'start',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Step Middle',
      type: 'line',
      step: 'middle',
      data: [220, 282, 201, 234, 290, 430, 410]
    },
    {
      name: 'Step End',
      type: 'line',
      step: 'end',
      data: [450, 432, 401, 454, 590, 530, 510]
    }
  ]
};

卷到起飞的数分
关注
专栏目录
Echarts 快速入门折线图
m0_70273331的博客
05-01 1579
[3, 4], ], type: “line”, }, ], }; [](()折线图样式设置 [](()折线图样式 折线图中折线的样式可以通过 lineStyle 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等，具体的可以参考配置项手册 [series.lineStyle](() 了解。 这里，我们以设置颜色（color）、线宽（width）和折线类型（type）为例说明。 option = { xAxis: { data: [“a”, “b”, “c”, “d”, “e”, “f”], }
echarts 折线图
aibujin的博客
05-16 1万+
echarts 折线图，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；
echart 折现图折线的线的颜色和点的颜色怎么设置
最新发布
肖肖肖丽珠的博客
09-14 658
color:'blue',//线的颜色。symbolSize:8,//拐点的大小。name: '收缩压',
Echarts4.0 使用系列——折线图，这里可能有你需要的
weixin_34007291的博客
03-18 641
前言：项目中经常会使用到Echarts,有的需求差不多复用性高，由于之前没有好好总结，时间一长就容易忘，所以这里总结一下Echarts折线图使用，下面会列举官网一些Api。 一、效果图 二、配置基础折线图 第一步：先初始化 let myChart = echarts.init(document.getElementById("echar...
玩转ECharts制作图表之折线图
wenqi
11-11 3884
折线图适合二维的大数据集，尤其是那些趋势比单个数据点更重要的场合 markArea //标注空间 (xAxis的值要与xdata值中取出) markArea: { data: [ [{ xAxis: '1月' }, { xAxi.
Echarts 之折线图
yytIcon的博客
01-08 3989
echarts学习之折线图和仪表盘
echarts 图表 折线图
07-21
echarts 图表 折线图
Echarts折线图
08-30 5396
效果图1： option:{ backgroundColor: "rgba(255,255,255,0)", tooltip: { trigger: "axis", axisPointer: { lineStyle: { color: { type: "linear", x: 0, .
Echarts可视化教程（三）——折线图的绘制
fh8uuc的博客
10-21 8473
阶梯图是一种比较特殊的折线图，阶梯图使用间歇型跳跃的方式显示一种无规律的数据的变化。我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！之间补充代码，这段代码由上面的堆积折线图示例代码修改而来，你需要补充完这段代码，实现将所有的四条折线都改成阶梯图：其中地铁。同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。中折线图的绘制，包括标准折线图、堆积折线图等。
ECharts常用图表 折线图
热门推荐
黑马程序员官方博客
12-02 1万+
另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~值后，后一个系列的值会在前一个系列的值上。如果在一个图表中有两个或者多个折线图。所以相当于蓝色是在红色这条线的基。折线图更多的使用来呈现数据随时间的。同个类目轴上系列配置相同的。如果每一组数据之间相差较少。那么有可能会出现这种情况。这显然不是我们想要的效果。在没有使用堆叠配置的时候。基于前一个图表进行堆叠。下一篇：ECharts。而是红色这条线对应的点。是一个空空如也的对象。
Echarts 折线图
一片涟漪
08-31 270
<template> <div id="main" style="width: 100%;height: 220px"></div> </template> <script> import * as echarts from 'echarts'; export default { name: "securit", data() { return { lineData:[820, 932,
Springboot+mybatis+echarts实现数据可视化 折线图饼图柱状图
06-22
Echarts是百度开源的一个数据可视化库，它基于JavaScript，提供丰富的图表类型，如折线图、饼图、柱状图等，且支持高度交互和自定义。Echarts具有良好的性能和跨浏览器兼容性，是Web端数据可视化的理想选择。 要将...
echarts数据可视化作业
01-14
**ECharts 数据可视化详解** ECharts 是一个由百度开发的开源JavaScript库，专门用于创建交互式的、基于浏览器的数据可视化图表。它支持丰富的图形类型，包括柱状图、折线图、饼图、散点图、热力图等，能够帮助用户...
EasyUI表格合并，及echarts折线图，导出折线图为图片
01-23
而Echarts是一款由百度开发的开源数据可视化库，它支持各种图表类型，如折线图、柱状图、饼图等，为数据分析和展示提供了强大的支持。 在"EasyUI表格合并"这一主题中，我们主要讨论的是如何使用EasyUI的datagrid...
uni-app封装echarts折线图，安卓真机测试可以使用
02-09
1. 创建一个uni-app的Vue组件，例如`EchartsLine.vue`，用于封装ECharts折线图。 2. 在组件中引入ECharts的JS库，并配置好需要的图表选项。 3. 使用uni-app的`uni.createSelectorQuery()`方法获取canvas元素，这是...
基于ECharts数据可视化大屏案例源码
12-03
ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，以及强大的交互功能和自定义选项，使得开发者能够轻松地在网页上创建出美观且互动性强的...
Echarts line折线图使用(vue)
dianpiyue3875的博客
04-26 1623
实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/lib/chart/line') // 以下的组件按需引入 require('echarts/lib/component/tooltip') // tooltip...
Echarts之折线图
m0_55173487的博客
07-14 3320
Echarts折线图图表配置： 1、x轴方面：轴线、轴刻度、轴延长线、轴值 2、y轴方面：轴线、轴刻度、轴延长线、轴值 3、数据方面：连线、阴影面积、最高点显示标签和圆点
数据可视化之折线图让数据变得更直观易懂
迪赛智慧数的博客
04-26 4627
折线图用于显示随时间或有序类别而变化的趋势，可能显示数据点以表示单个数据值，也可能不显示这些数据点。 折线图是排列在工作表的列或行中的数据可以绘制到折线图中。折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。折线图也同样也是可视化数据大屏中最常见常用的图表类型。 下面是数据大屏——”粮食那些事儿”，其中就充分运用了折线图，让数据变得更加直观，更加明了，更见通俗易懂。 今天用数据可视化平台来讲解，主要围绕折线图展开。同柱状图、饼图及其他图表一样.
介绍一下使用Echarts做数据可视化
05-14
Echarts是一款基于JavaScript的数据可视化库，它可以帮助我们轻松地将数据转化为各种图表，如折线图、柱状图、饼图等等。以下是Echarts的使用流程： 1. 引入Echarts库 我们需要在HTML文件中引入Echarts库，可以通过CDN或者下载到本地使用。 2. 准备数据 在使用Echarts之前，需要通过JavaScript准备好需要展示的数据。数据可以是一个数组或者一个对象，如果是对象，需要将数据格式化成Echarts所需要的格式。 3. 初始化Echarts 在HTML文件中，我们需要添加一个div元素作为图表的容器，并且设置一个固定的宽高。然后，通过JavaScript获取到这个div元素，调用Echarts提供的初始化函数，将图表容器和数据传入。 4. 配置Echarts 在初始化Echarts之后，我们需要对图表进行配置。Echarts提供了大量的配置选项，包括图表类型、样式、数据格式等等。我们可以根据自己的需求进行配置。 5. 渲染图表 最后，我们需要调用Echarts提供的渲染函数，将图表渲染在页面上。 以上就是使用Echarts做数据可视化的基本流程，当然，Echarts的使用还有更多细节和高级功能，需要结合具体的场景进行学习和使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值