echarts折线图流动特效的实现(非平滑曲线)

这篇具有很好参考价值的文章主要介绍了echarts折线图流动特效的实现(非平滑曲线)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.实现效果

echarts 折线图动画,echarts,vue,echarts,前端,javascript

2.实现原理

echarts官网:series-lines

注意:流动特效只支持非平滑曲线(smooth:false)

series-lines路径图
用于带有起点和终点信息的线数据的绘制,主要用于地图上的航线,路线的可视化。
ECharts 2.x 里会用地图上的 markLine 去绘制迁徙效果,在 ECharts 3 里建议使用单独的 lines 类型图表。

一些参数:

series-lines.coordinateSystem :该系列使用的坐标系,可选:
‘cartesian2d’-使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
‘geo’-使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件。

series-lines.polyline:是否是多段线。
默认为 false,只能用于绘制只有两个端点的线段,线段可以通过 lineStyle.curveness 配置为曲线。
如果该配置项为 true,则可以在 data.coords 中设置多于 2 个的顶点用来绘制多段线,在绘制路线轨迹的时候比较有用,见示例 北京公交路线,设置为多段线后 lineStyle.curveness 无效。

series-lines.effect. show:是否显示特效。

series-lines.effect. period = 4。 特效动画的时间,单位为 s。

series-lines.effect. symbol = ‘circle’。特效图形的标记。
ECharts 提供的标记类型包括’circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, 'none’可以通过 ‘image://url’ 设置为图片,其中 URL 为图片的链接,或者 dataURI。

series-lines.effect. symbolSize = 3。特效标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示高和宽,例如 [20, 10] 表示标记宽为20,高为10。

series-lines.effect. trailLength = 0.2。特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长。

series-lines.effect. loop = true。是否循环显示特效。

series-lines.data. coords :一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
eg:

[
 {
    coords: [
      ["测1", 222],
      ["测2", 932],
      ["测3", 66],
      ["测4", 934],
      ["测5", 111],
      ["测6", 333],
      ["测7", 0],
    ],
  },
];

3.实现代码

data. coords的获取:

//多线段(polyline=true),如图左侧连续一段:
let yData = [222, 932, 66, 934, 111, 333, 0],
  xData = ["测1", "测2", "测3", "测4", "测5", "测6", "测7"],
   datacoords = [
     {
       coords: [],
     },
   ];
 for (var i = 0; i < xData.length; i++) {
   datacoords[0].coords.push([xData[i], yData[i]]);
 }
//单线段(polyline=false),如图右侧各段展示:
let yData = [90, 555, 666, 999, 567, 999, 888, 0],
 xData = ["测1", "测2", "测3", "测4", "测5", "测6", "测7", "测8"],
    datacoords = [];
  for (var i = 0; i < xData.length; i++) {
    datacoords.push([
      {
        coord: [i, yData[i]],
      },
      {
        coord: [i + 1, yData[i + 1]],
      },
    ]);
  }

setOption设置:文章来源地址https://www.toymoban.com/news/detail-621498.html

 this.charts.setOption({
   animation: true, //控制动画示否开启
   animationDuration: 3000,
   animationEasing: "bounceOut", //缓动动画
   animationThreshold: 8, //动画元素的阈值
   backgroundColor: "transparent", // 给echarts图设置背景色
   tooltip: {
     trigger: "axis",
     backgroundColor: "rgba(0,0,0,.5)",
     axisPointer: {
       type: "cross",
       label: {
         backgroundColor: "rgba(0,0,0,.5)",
       },
     },
     textStyle: {
       color: "#fff",
       fontSize: 14,
     },
   },
   grid: {
     left: "3%", //图表距边框的距离
     right: "3%",
     top: "15%",
     bottom: "5%",
     containLabel: true,
   },
   xAxis: [
     {
       nameGap: 3,
       nameTextStyle: {
         color: "rgba(255,255,255,.8)",
         fontSize: 12,
       },
       type: "category",
       data: xData,
       boundaryGap: false, //从0开始
       axisLine: {
         onZero: true,
         rotate: 30, //坐标轴内容过长旋转
         interval: 1,
         lineStyle: {
           color: "#636E7C",
         },
       },
       axisLabel: {
         color: "rgba(255,255,255,.8)", //坐标的字体颜色
         fontSize: 12,
       },
       axisTick: {
         //坐标轴刻度颜色  x和y不交叉
         show: false,
       },
     },
   ],
   yAxis: [
     {
       name: "个",
       min: 0,
       max: function (value) {
         return Math.ceil(value.max / 5) * 5;
       },
       splitNumber: 5,
       type: "value",
       nameTextStyle: {
         color: "rgba(255,255,255,.89)",
         fontSize: 12,
       },
       splitLine: {
         show: true,
         lineStyle: {
           color: "rgba(255,255,255,.25)",
           type: "dashed",
         },
       },
       axisTick: {
         //坐标轴刻度颜色
         show: false,
       },
       axisLine: {
         //坐标轴线颜色
         show: true,
         lineStyle: {
           color: "#636E7C",
         },
       },
       axisLabel: {
         color: "rgba(255,255,255,.8)", //坐标的字体颜色
         fontSize: 12,
       },
     },
   ],
   series: [
     {
       name: "苏苏小苏苏",
       type: "line",
       smooth: false,
       lineStyle: {
         color: "#DC7828",
         width: 1.5,
         type: "dashed",
         shadowOffsetX: 0, // 折线的X偏移
         shadowOffsetY: 10, // 折线的Y偏移
         shadowBlur: 4, // 折线模糊
         shadowColor: "rgba(255, 255, 255, 0.8)", //设置折线阴影颜色
       },
       showSymbol: true, //是否默认展示圆点
       symbol: "circle", // 默认是空心圆(中间是白色的)
       symbolSize: 7,
       itemStyle: {
         color: "#021E47", //实圆的背景色
         borderWidth: 1,
         borderColor: "#DC7828",
       },
       areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
           {
             offset: 1,
             color: "rgba(220,120,40,0.8)",
           },
           {
             offset: 0.74,
             color: "rgba(220,120,40,0.5)",
           },
           {
             offset: 0,
             color: "rgba(220,120,40,0)",
           },
         ]),
       },
       emphasis: {
         focus: "series",
       },
       data: yData,
     },
     {
       showSymbol: false,
       name: "苏苏小苏苏",
       type: "lines",
       polyline: true,
       smooth: false,
       coordinateSystem: "cartesian2d",
       zlevel: 1,
       effect: {
         show: true,
         smooth: true,
         period: 6,
         symbolSize: 4,
       },
       lineStyle: {
         color: "#fff",
         width: 1,
         opacity: 0,
         curveness: 0,
         cap: "round",
       },
       data: datacoords,
     },
   ],
 });

4.更多相关demo,更新在苏苏的码云如果对你有帮助,欢迎你的star+订阅!

到了这里,关于echarts折线图流动特效的实现(非平滑曲线)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3使用 echarts - 饼图、折线图

    饼图 - 带中心图形 - graphic - elements 折线图 - 图表标记 markPoint

    2024年02月08日
    浏览(36)
  • python 数据、曲线平滑处理——基于Numpy.convolve实现滑动平均滤波——详解

    滑动平均滤波法 (又称: 递推平均滤波法 ),它把连续取N个采样值看成一个队列 ,队列的长度固定为N ,每次采样到一个新数据放入队尾,并扔掉原来队首的一次数据(先进先出原则) 。把队列中的N个数据进行算术平均运算,就可获得新的滤波结果。 N值的选取:流量,N=

    2024年02月09日
    浏览(48)
  • vue2之echarts的封装 折线图,饼图,大图

    chartPan.vue 使用 chartPan.vue 之饼图 效果 使用 chartPan.vue 之折线图 效果 展开大图 handlePreViewChart 事件 大图组件 maxChart.vue 大图效果

    2024年02月01日
    浏览(37)
  • vue里echarts的使用:画饼图和面积折线图

    vue里echarts的使用,我们要先安装echarts,然后在main.js里引入: 最终我们实现的效果如下: 头部标题这里我们封装了一个全局公共组件common-header,代码如下:

    2024年02月22日
    浏览(31)
  • Vue系列第八篇:echarts绘制柱状图和折线图

    本篇将使用echarts框架进行柱状图和折线图绘制。 目录 1.绘制效果 2.安装echarts  3.前端代码 4.后端代码   // 安装echarts版本4 npm i -D echarts@4 src/api/api.js src/components/common/dataanalyse/DataView.vue server.go controller/dataview.go

    2024年02月14日
    浏览(48)
  • 【unity小技巧】使用贝塞尔曲线实现导弹随机攻击敌人,也可以用于平滑拾取物品

    参考原视频链接: 【视频】:https://www.bilibili.com/video/BV1aU4y1v7yM/ 注意 :本文为学习笔记记录,推荐支持原作者,去看原视频自己手敲代码理解更加深入

    2024年02月13日
    浏览(36)
  • Echarts实现动态折线图的定时刷新

    在做项目的过程中,遇到一个需求:要从后台读取数据,并对echarts进行实时更新。先来看下实现的效果图: 首先来看一下没有和后台交互的echarts动态折线图如何实现,代码如下: 前面实现的是动态折现图并没有和后台交互,接下来看一下和后台交互的代码是如何实现的:

    2024年02月12日
    浏览(39)
  • echart 实现多柱状图+多折线图

    当图表中存在多个柱状图时,如何让每条折线折点对应在每个柱状图中点位置?  配置如下: 图例如下:

    2024年02月11日
    浏览(34)
  • echarts实现渐变折线图并添加点击事件

         折线图点击事件代码:  完整代码如下:

    2024年02月16日
    浏览(54)
  • 微信小程序使用Echart实现折线图案例

     一、实现效果 二、echart引入参考另一位博主博客 微信小程序引入echarts图表(保姆式)_啊翔呀的博客-CSDN博客_微信小程序引入echarts 总结来就是以下几步  1. 首先,下载echarts微信版 地址: GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本 2.把ec-canvas文件复制到项目

    2024年02月03日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包