ECharts折线图常见效果

已于 2022-05-20 21:38:10 修改
阅读量1.5k 收藏 6
点赞数 1
分类专栏： ECharts 文章标签： echarts 前端 javascript
于 2022-05-01 22:38:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunddy_x/article/details/124520478
版权

目录


本文记录一些平时常见的折线图的效果图及代码，需要时方便直接套用。本文只列出echarts的配置项代码，不了解echarts的使用方法可查看 官方文档。

基础

效果图：
在这里插入图片描述
配置项：

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

平滑

效果图：
在这里插入图片描述
配置项：

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

最大值、最小值、平均值

效果图：
在这里插入图片描述
配置项：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      data: [150, 230, 224, 218, 135, 147, 260],
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max'
          },
          {
            name: '最小值',
            type: 'min'
          }
        ]
      },
      markLine: {
        data: [
          {
            name: '平均值',
            type: 'average'
          }
        ]
      }
    }
  ]
}

图表标域

效果图：
在这里插入图片描述
配置项：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  visualMap: {
    show: false,
    dimension: 0,
    pieces: [
      {
        lte: 1,
        color: 'green'
      },
      {
        gt: 1,
        lte: 2,
        color: 'red'
      },
      {
        gt: 2,
        lte: 4,
        color: 'green'
      },
      {
        gt: 4,
        lte: 5,
        color: 'red'
      },
      {
        gt: 5,
        color: 'green'
      }
    ]
  },
  series: [
    {
      type: 'line',
      data: [150, 230, 224, 218, 135, 147, 260],
      markArea: {
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
        data: [
          [
            {
              xAxis: 'Tue'
            },
            {
              xAxis: 'Wed'
            }
          ],
          [
            {
              xAxis: 'Fri'
            },
            {
              xAxis: 'Sat'
            }
          ]
        ]
      }
    }
  ]
}

区域填充

效果图：
在这里插入图片描述
配置项：

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

坐标轴留白策略：紧挨边缘

效果图：
在这里插入图片描述

配置项：

option = {
  xAxis: {
    type: 'category',
    // 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，设置false可紧挨边缘。
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true
    }
  },
  series: [
    {
      type: 'line',
      data: [150, 230, 224, 218, 135, 147, 260]
    }
  ]
}

缩放：脱离 0 值比例

配置前效果图：
在这里插入图片描述
配置后效果图：
在这里插入图片描述
配置项：

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
    // 只在数值轴中（type: 'value'）有效。
    scale: true,
    axisLine: {
      show: true
    }
  },
  series: [
    {
      type: 'line',
      // data: [150, 230, 224, 218, 135, 147, 260]
      data: [250, 254, 244, 248, 255, 253, 250]
    }
  ]
}

堆叠

效果图：
在这里插入图片描述

高亮聚焦淡出效果图：
在这里插入图片描述
配置项：

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      stack: 'sale',
      data: [150, 230, 224, 218, 135, 147, 260],
      areaStyle: {},
      emphasis: {
        focus: 'self'
      }
    },
    {
      type: 'line',
      stack: 'sale',
      data: [120, 130, 204, 118, 175, 177, 160],
      areaStyle: {},
      emphasis: {
        focus: 'self'
      }
    }
  ]
}

同期比对、多x轴

效果图：
在这里插入图片描述
配置项：

const colors = ['#5470C6', '#EE6666'];
const option = {
  color: colors,
  tooltip: {
    trigger: 'none',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {},
  grid: {
    top: 70,
    bottom: 50
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[1]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return (
              params.value +
              (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            );
          }
        }
      },
      data: ['2022-1', '2022-2', '2022-3', '2022-4', '2022-5', '2022-6', '2022-7', '2022-8', '2022-9', '2022-10', '2022-11', '2022-12']
    },
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[0]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return (
              params.value +
              (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            );
          }
        }
      },
      data: ['2021-1', '2021-2', '2021-3', '2021-4', '2021-5', '2021-6', '2021-7', '2021-8', '2021-9', '2021-10', '2021-11', '2021-12']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '2021',
      type: 'line',
      xAxisIndex: 1,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [822, 788, 926, 959, 790, 864, 887, 707, 1056, 487, 610, 723]
    },
    {
      name: '2022',
      type: 'line',
      xAxisIndex: 0,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [939, 859, 783, 711, 887, 692, 1016, 1084, 1266, 1154, 1103, 970]
    }
  ]
}

渐变面积图、拐点描边样式、悬停显示拐点

效果图：
在这里插入图片描述
配置项：

const option = {
  legend: {
    textStyle: {
      color: '#fff'
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      color: 'rgba(255,255,255,0.8)'
    },
    axisTick: {
      alignWithLabel: true,
      lineStyle: {
        color: 'rgba(255,255,255,0.8)'
      }
    },
    data: ['2022-1', '2022-2', '2022-3', '2022-4', '2022-5', '2022-6', '2022-7', '2022-8', '2022-9', '2022-10', '2022-11', '2022-12']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: 'rgba(255,255,255,0.8)'
    },
    splitLine: {
      lineStyle: {
        color: '#666'
      }
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      name: 'A',
      type: 'line',
      symbol: 'circle',
      symbolSize: 12,
      // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
      showSymbol: false,
      itemStyle: {
        color: '#0184d5',
        borderColor: 'rgba(221, 220, 107, 0.1)',
        borderWidth: 12
      },
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(1, 132, 312, 0.4)'
          },
          {
            offset: 0.8,
            color: 'rgba(1, 132, 312, 0.1)'
          }
        ])
      },
      data: [722, 988, 826, 959, 1090, 1264, 987, 907, 856, 1187, 1010, 923]
    },
    {
      name: 'B',
      type: 'line',
      symbol: 'circle',
      symbolSize: 12,
      showSymbol: false,
      itemStyle: {
        color: '#00d887',
        borderColor: 'rgba(221, 220, 107, 0.1)',
        borderWidth: 12
      },
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      lineStyle: {
        color: '#00d887',
        width: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(0, 216, 135, 0.4)'
          },
          {
            offset: 0.8,
            color: 'rgba(0, 216, 135, 0.1)'
          }
        ])
      },
      data: [239, 359, 283, 411, 587, 392, 516, 484, 666, 504, 703, 570]
    }
  ]
}

不定期更新…

sunddy_x
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts饼图（带动画效果）
God's asylum的博客
05-19 463
1、外围圆环运用仪表盘gauge，设置仪表盘的起始角度“startAngle”，和终止角度“endAngle”，设置仪表盘最小值“min”和最大值“max”属性来确定仪表盘数值大小， 隐藏仪表盘指针‘pointer’，隐藏detail，设置仪表盘外维宽度和颜色“axisLine”，隐藏刻度“axisTick”，设置进度条progress属性，隐藏刻度标签“axisLabel”，itemStyle属性设置渐变色 2、中间旋转的轮毂也是运用仪表盘来制作的，将仪表盘其他属性隐藏只保留刻度线，给刻度线添加阴影，动态
带阴影及动态效果的折线图（基于echarts.js）
06-21
带阴影及动态效果的折线图（基于echarts.js）
echart--效果花式折线图
gm_ming0501的博客
07-13 886
1/复杂的折线 html <!-- gm花样折线图gm --> <div class="stepBox" id="stepEchart" style="height:500px;"></div> js //工艺流程对比--0708 function echartsData(idName, xData, lendName, allLineData, minStep, maxStep) { var chartrun2 = echarts.init(document.
echarts折线样式美化(曲线)——效果图+代码
weixin_42865522的博客
11-04 5193
复制代码到https://www.echartsjs.com/examples/zh/editor.html?c=line-smooth中效果如下 option = { title: { text: '折线样式美化' }, tooltip : { trigger: 'axis', axisPointer: { ...
echarts 折线流光图
bad___man的博客
12-12 1351
echarts 折线流光图 一键式教学,包教包会,觉得有用记得关注糟老头子,这里只有干货.
echart3.0实现折线图转折点闪烁效果
H_HV_V的博客
11-11 5982
在echart2.0中可以很简单的实现折线图的转折点闪烁效果，只要在series中数据添加markPoint:{symbol:'emptyCircle', effect:{show:true}}即可，但是在echart3.0中由于effect关键字在折线图中已经去掉了，所以实现起来比较复杂。大概思路是在series中再多增加几个effectScatter数据，然后重写legend点击事件，提示fo
非常好用的Echarts饼图和折线图源码Demo
06-14
在这个“非常好用的Echarts饼图和折线图源码Demo”中，我们可以学习到如何利用Echarts库来实现这两种常见的数据展示方式。 首先，让我们深入了解一下Echarts的饼图。饼图是一种用于表示部分与整体之间关系的图形，...
Echarts：基础折线图（含异步加载数据）
12-04
折线图是一种常见的数据展示方式，适用于表现数据随时间变化的趋势。在ECharts中，创建一个基础折线图需要以下几个关键步骤： 1. 引入ECharts库：在HTML文件中，我们需要通过`<script>`标签引入ECharts的JS文件，...
echarts柱状图饼图折线图.zip
07-31
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及散点图等，适用于各类Web数据展示场景。本压缩包“echarts柱状图饼图折线图.zip”包含了一些关于...
折线图，缩放、长按、滑动
07-09
在IT行业中，折线图是一种常见的数据可视化工具，它能够清晰地展示数据随时间变化的趋势。本篇将详细探讨“折线图，缩放、长按、滑动”这一主题，以及与之相关的手势交互技术。 首先，折线图是统计学中用于表现连续...
echarts制作折线图
04-13
ECharts 提供了丰富的图表类型，其中折线图是一种常见的数据展示方式，适用于显示数据随时间变化的趋势。折线图可以清晰地展现数据在不同时间点的变化情况，帮助我们直观地理解数据的发展脉络。 二、ECharts 安装与...
炫光特效，模拟迁徙效果的echarts
12-13
echarts最新的版本中这种炫酷的效果实现起来比较麻烦，这个资源里是html和js都有，直接点击index.html就可以看到效果，可以无缝对接到项目里。 炫光特效，模拟迁徙效果
Angular7开荒--Echarts折线图字体设置，留白等设置
好吗好的~的技术博客
01-28 1081
今天在集成折线图的时候发现，字体颜色一直是红色，无法通过css来设置，百度了一下，总结如下： 可以在option里面加入如下代码： textStyle: { // 字体的样式 fontSize: 18, color: 'white' }, 可以在这里面进行字体样式的各种设置（比如大小，颜色，字体样式等） 实例：textStyle是与xAxis...
eCharts——折线图中坐标轴两边留白
qq_39354957的博客
09-11 1万+
折线图中常用的配置项 <script> var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], boundaryGap: false //坐标轴两边留白 }, yA
Echarts 将 x 轴左右留白
最新发布
虎康的博客
05-22 112
如图所示，将X轴的左右留白。
echarts设置x轴，标签与x轴的距离（当y轴有负数时，x轴标签紧贴x轴）
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-19 2万+
在用echarts做折现图时遇到的问题效果图是这样的。 option = { xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], onZero: false, show: true }, ]...
echarts k线图x轴刻度线外留白
itsmia的博客
03-29 290
【代码】echarts k线图x轴刻度线外留白。
ECharts XY轴留白策略配置boundaryGap
dhdhdh0920的专栏
08-21 3180
boundaryGap : [ '0', '0.1' ] yAxis: [{ boundaryGap : [ '0', '0.1' ], axisLabel: { formatter: '{value}', color: '#e2e9ff', }, axisLine: { ...
echarts问题小贴士
九亿宅男的梦的博客
01-06 168
1.legend 取消点击事件 legend: { data: ['申报凭证'], selectedMode:false //取消图例上的点击事件 }, color:["#e55346"], 2.折线样式 3.title 4.echarts多条折线图怎么数量对不上 5.areaStyle折线图渐变 areaStyle: { color: { ...
echarts折线图tooltip的轮播
03-28
ECharts是一个基于JavaScript的开源可视化库，用于构建交互式的图表和数据可视化界面。在ECharts中，折线图是一种常见的图表类型，而tooltip则是用于显示数据点的详细信息的工具提示框。 要实现ECharts折线图tooltip的轮播效果，可以通过设置tooltip的属性来实现。具体步骤如下： 1. 在ECharts的配置项中，找到tooltip属性，并设置trigger为'axis'，表示触发方式为坐标轴触发。 2. 设置tooltip的formatter属性为一个函数，用于自定义tooltip的内容。 3. 在formatter函数中，可以通过params参数获取到当前tooltip所需要显示的数据。根据需求，可以将数据进行处理后返回给tooltip。 4. 在formatter函数中，可以使用setInterval函数来实现tooltip内容的轮播效果。通过定时器不断更新tooltip的显示内容，从而实现轮播效果。 下面是一个示例代码，演示了如何实现ECharts折线图tooltip的轮播效果： ```javascript option = { // 其他配置项... tooltip: { trigger: 'axis', formatter: function(params) { var index = 0; setInterval(function() { index = (index + 1) % params.length; // 根据需求处理数据后返回tooltip内容 var content = params[index].name + ': ' + params[index].value; // 更新tooltip内容 echarts.getInstanceByDom(document.getElementById('chart')).getOption().tooltip[0].formatter = content; echarts.getInstanceByDom(document.getElementById('chart')).hideTip(); echarts.getInstanceByDom(document.getElementById('chart')).showTip({seriesIndex: 0, dataIndex: index}); }, 2000); return params[0].name + ': ' + params[0].value; } }, // 其他配置项... }; ``` 请注意，上述代码中的`chart`是折线图所在的DOM元素的id，需要根据实际情况进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值