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

目录

一、什么是折线图

二、如何实现

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]
    }
  ]
};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/537063.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

开发着开发着,盘满了

开发着开发着,盘满了

办公电脑突然报家目录不足1G空间了, 使用 Disk Usage Analyzer 工具打开看了下, 微软还真没把我当穷人, 一个vs code给我占了30几个G的空间. 大家可能也遇到这种情况的, 看到真的让人窒息, 以前windows上被VS studio 支配C盘的感觉又回来了. 不过这个ubuntu好处理点, 我该删…
阅读更多...
算法打卡day32

算法打卡day32

今日任务： 1）738.单调递增的数字 2）968.监控二叉树 738.单调递增的数字 题目链接：738. 单调递增的数字 - 力扣（LeetCode） 文章讲解：代码随想录 (programmercarl.com) 视频讲解：贪…
阅读更多...
CPU核心数、线程数都是什么意思？

CPU核心数、线程数都是什么意思？

最早，每个物理 cpu 上只有一个核心，对操作系统而言，也就是同一时刻只能运行一个进程/线程。 为了提高性能，cpu 厂商开始在单个物理 cpu 上增加核心（实实在在的硬件存在），也就出现了多核 cpu&…
阅读更多...
个人博客项目笔记_07

个人博客项目笔记_07

写文章 写文章需要 三个接口： 获取所有文章类别 获取所有标签 发布文章 1. 所有文章分类 1.1 接口说明 接口url：/categorys 请求方式：GET 请求参数： 参数名称参数类型说明 返回数据： {"success":…
阅读更多...
Linux启动流程，常见故障英文总结/Linux学习环境发行版本选择及运行故障（补充）

Linux启动流程，常见故障英文总结/Linux学习环境发行版本选择及运行故障（补充）

小编这里对前面文章内容进行补充 1.运维架构人员理解Linux启动流程（对故障进行排查），企业面试面试官让面试者描述Linux启动细节，小编在这篇文章补充以下，制作了图表，有利于大家看懂整个流程 2.对于初学者/老…
阅读更多...
14亿美元！德国默克与AI生物科技公司合作；马斯克Neuralink首位脑机接口植入者用意念打游戏；黄仁勋在俄勒冈州立大学开讲

14亿美元！德国默克与AI生物科技公司合作；马斯克Neuralink首位脑机接口植入者用意念打游戏；黄仁勋在俄勒冈州立大学开讲

AI for Science 的新成果、新动态、新视角—— 日本第一 IT 公司富士通：生成式 AI 加速药物研发 马斯克：Neuralink 首位脑机接口植入者用「意念」打游戏 默克与 AI 生物科技公司 Caris 达成合作 AI 蛋白质设计服务提供商「天鹜科技」完成数千万元 Pre…
阅读更多...
IDEA中使用正则表达式替换时间日期

IDEA中使用正则表达式替换时间日期

很多时候需要把系统中的时间替换成当前时间，这是后我们就可以把数据库SQL文件在IDEA中打开，然后使用正则进行替换，下面我们来看下： 1.日期格式：校验yyyy－MM－dd ((([0-9]{3}[1-9]|[0-9]{2}[1-9…
阅读更多...
ELK 企业级日志分析 ELFK

ELK 企业级日志分析 ELFK

一 ELK 简介 ELK平台是一套完整的日志集中处理解决方案，将 ElasticSearch、Logstash 和 Kiabana 三个开源 工具配合使用， 完成更强大的用户对日志的查询、排序、统计需求。 1 ElasticSearch： 是基于Lucene（一个全文检索引擎的…
阅读更多...
golang的引用和非引用总结

golang的引用和非引用总结

目录 概述 一、基本概念 指针类型（Pointer type） 非引用类型（值类型） 引用类型（Reference Types） 解引用（dereference） 二、引用类型和非引用类型的区别 三、golang数据类型…
阅读更多...
李沐27_含并行连结的网络GoogLeNet_Inception——自学笔记

李沐27_含并行连结的网络GoogLeNet_Inception——自学笔记

Inception块 1.四个路径从不同层面抽取信息，然后在输出通道维合并。 2.有更少的参数个数和计算复杂度（相比于3X3和5X5卷积层） GoogLeNet 1.五个stages，九个inception块 Inception各种后续变种 1.Inception-BN(V2)——使用ba…
阅读更多...
【Harbor】harbor.yml详解

【Harbor】harbor.yml详解

目录 前言参数详解hostnameHTTP和HTTPSinternal_tlsharbor_admin_passworddatabasedata_volumestorage_serviceclairtrivyjobservicenotificationchartlog_versionexternal_databaseexternal_redisuaaproxy 前言 网络上对Harbor相关的资料真是少之又少，基本上都是教…
阅读更多...
2024mathorcup数学建模A 题思路分析-移动通信网络中 PCI 规划问题

2024mathorcup数学建模A 题思路分析-移动通信网络中 PCI 规划问题

# 1 赛题 A 题 移动通信网络中 PCI 规划问题 物理小区识别码(PCI)规划是移动通信网络中下行链路层上，对各覆盖 小区编号进行合理配置，以避免 PCI 冲突、 PCI 混淆以及 PCI 模 3 干扰等 现象。 PCI 规划对于减少物理层的小区间互相干扰(ICI)，增…
阅读更多...
STM32程序 关于Semhosting（半主机）和Microlib 以及Printf的关系

STM32程序 关于Semhosting（半主机）和Microlib 以及Printf的关系

一，Keil中Printf导致程序无法运行到Main函数 在Keil中调试STM32程序，编译烧录后，发现程序不能运行，Main函数中点亮LED灯的语句没起作用，说明没有进入Main函数。用Keil调试的时候，虽然设置了Run to main()&…
阅读更多...
Docker学习笔记（二）：在Linux中部署Docker（Centos7下安装docker、环境配置，以及镜像简单使用）

Docker学习笔记（二）：在Linux中部署Docker（Centos7下安装docker、环境配置，以及镜像简单使用）

一、前言 记录时间 [2024-4-6] 前置文章：Docker学习笔记（一）：入门篇，Docker概述、基本组成等，对Docker有一个初步的认识 在上文中，笔者进行了Docker概述，介绍其历史、优势、作用&am…
阅读更多...
springboot相关报错解决

springboot相关报错解决

Caused by: java.lang.ClassNotFoundException: 目录 Caused by: java.lang.ClassNotFoundException: org.springframework.context.event.GenericApplicationListener spring-boot-dependencies:jar:2.1.9.RELEASE was not found org.springframework.context.event.Generi…
阅读更多...
Mybatis-plus动态数据源

Mybatis-plus动态数据源

由于服务没有做微服务部署&#xff0c;需要在后台管理系统访问其他服务的库&#xff0c;所以需要用到动态数据源切换 引入依赖 mybatis-plus动态数据源依赖 <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot…
阅读更多...
【生产实习-毕设】pyspark学生成绩分析与预测（上）

【生产实习-毕设】pyspark学生成绩分析与预测（上）

注意&#xff1a;数据由实习单位老师提供&#xff08;需要自行搜索下载&#xff09;&#xff0c;页面美化为下载模板。 项目介绍&#xff1a;前端页面输入影响成绩的属性&#xff0c;预测出成绩&#xff0c;并作可视化展示——属性对成绩的影响。使用python pyspark 进行数据预…
阅读更多...
SpringBoot + Dobbo + nacos

SpringBoot + Dobbo + nacos

SpringBoot Dobbo nacos 一、nacos https://nacos.io/zh-cn/docs/quick-start.html 1、下载安装包 https://github.com/alibaba/nacos/releases/下载后在主目录下&#xff0c;创建一个logs的文件夹&#xff1a;用来存日志 2、启动nacos 在bin目录下打开cmd运行启动命令&a…
阅读更多...
小红的白色字符串

小红的白色字符串

题目描述 小红拿到了一个字符串&#xff0c;她准备将一些字母变成白色&#xff0c;变成白色的字母看上去就和空格一样&#xff0c;这样字符串就变成了一些单词。 现在小红希望&#xff0c;每个单词都满足以下两种情况中的一种&#xff1a; 1.开头第一个大写&#xff0c;其余为…
阅读更多...
简述OSI七层模型及每层的功能任务和协议

简述OSI七层模型及每层的功能任务和协议

文章目录 一、OSI七层模型的功能和任务1.物理层2.数据链路层3.网络层4.传输层5.会话层6.表示层7. 应用层 二、OSI七层模型每层的协议 开放系统互连参考模型&#xff08;Open System Interconnect&#xff0c;简称OSI&#xff09;是国际标准化组织(ISO)和国际电报电话咨询委员会…
阅读更多...
最新文章

Copyright @ 2022~2023