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

作者:苏苏哇哈哈 时间:2024-05-02 16:28:55 

1.实现效果

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

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设置:

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

来源:https://blog.csdn.net/qq_48085286/article/details/126219887

标签:echarts,折线图,流动
0
投稿

猜你喜欢

  • Python ini文件常用操作方法解析

    2022-01-07 09:52:44
  • python 操作 mongodb 数据库详情

    2024-01-19 17:53:45
  • tensorflow 查看梯度方式

    2022-11-07 12:46:22
  • python OpenCV实现答题卡识别判卷

    2023-12-20 17:27:57
  • python文字和unicode/ascll相互转换函数及简单加密解密实现代码

    2023-08-23 08:13:59
  • Python中的优先队列(priority queue)和堆(heap)

    2023-11-22 05:40:03
  • vue 开发一个按钮组件的示例代码

    2024-04-30 10:27:40
  • 一波神奇的Python语句、函数与方法的使用技巧总结

    2023-05-12 19:48:41
  • 新手如何发布Python项目开源包过程详解

    2023-02-27 13:08:05
  • MySQL数据库查询进阶之多表查询详解

    2024-01-27 07:14:51
  • jQuery 1.3的VS智能提示下载

    2009-01-18 12:54:00
  • asp程序定义变量比不定义变量速度快一倍

    2012-12-04 20:06:32
  • python+opencv实现论文插图局部放大并拼接效果

    2023-12-07 17:29:12
  • Python可视化工具Plotly的应用教程

    2022-03-28 01:47:02
  • python抓取需要扫微信登陆页面

    2022-03-01 16:15:32
  • 数据结构-树(三):多路搜索树B树、B+树

    2024-01-27 01:21:43
  • Python OpenCV基于HSV的颜色分割实现示例

    2021-11-04 19:24:26
  • asp如何从数据库中删除废旧的电子信箱地址?

    2009-11-15 20:04:00
  • matplotlib更改窗口图标的方法示例

    2023-01-15 17:55:30
  • Python可变参数会自动填充前面的默认同名参数实例

    2022-05-24 05:00:43
  • asp之家 网络编程 m.aspxhome.com