数据可视化高级技术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:设置节点大小

取值范围:01,表示占图案区域的百分比。

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]
    }
  ]
};
相关推荐
ROBOT玲玉10 分钟前
Milvus 中,FieldSchema 的 dim 参数和索引参数中的 “nlist“ 的区别
python·机器学习·numpy
Kai HVZ1 小时前
python爬虫----爬取视频实战
爬虫·python·音视频
古希腊掌管学习的神1 小时前
[LeetCode-Python版]相向双指针——611. 有效三角形的个数
开发语言·python·leetcode
m0_748244831 小时前
StarRocks 排查单副本表
大数据·数据库·python
B站计算机毕业设计超人1 小时前
计算机毕业设计PySpark+Hadoop中国城市交通分析与预测 Python交通预测 Python交通可视化 客流量预测 交通大数据 机器学习 深度学习
大数据·人工智能·爬虫·python·机器学习·课程设计·数据可视化
路人甲ing..1 小时前
jupyter切换内核方法配置问题总结
chrome·python·jupyter
游客5201 小时前
opencv中的常用的100个API
图像处理·人工智能·python·opencv·计算机视觉
每天都要学信号2 小时前
Python(第一天)
开发语言·python
凡人的AI工具箱2 小时前
每天40分玩转Django:Django国际化
数据库·人工智能·后端·python·django·sqlite
咸鱼桨2 小时前
《庐山派从入门到...》PWM板载蜂鸣器
人工智能·windows·python·k230·庐山派