echarts图表折线图折线流动

最新推荐文章于 2025-05-15 14:49:11 发布

原创最新推荐文章于 2025-05-15 14:49:11 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #react.js

本文档展示了如何使用JavaScript创建一个series-lines路径图，包括自定义x轴和y轴数据，配置流动特效、多段线样式，并生成了详细的示例数据结构。

效果展示：

源码：


/**
 * series-lines路径图
 * @param xAxis 维度数据,如["测1", "测2", "测3", "测4", "测5", "测6", "测7", "测8"],
 * @param dataSet 指标数据 serise的value,如[90, 555, 666, 999, 567, 999, 888, 0]
 * @returns
 */
export const getSeriesLineEffect = (xAxis:any=[],dataSet:any=[],yAxisIndex:any=0,color='#fff')=>{
  let yData = dataSet,
  xData = xAxis,
  datacoords:any = [];
  if(xData.length){
    for (var i = 0; i < xData.length; i++) {
      datacoords.push([
        {
          coord: [i, yData[i]],
        },
        {
          coord: [i + 1, yData[i + 1]],
        },
      ]);
    };
  }
  let effect =  {
    type: "lines",
    // 流动特效只支持非平滑曲线（smooth：false）
    smooth: false,
    showSymbol: false,
    // 是否是多段线
    polyline: true,
    // 该系列使用的坐标系，可选：'cartesian2d'-使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件
    coordinateSystem: "cartesian2d",
    zlevel: 1,
    effect: {
      // 是否显示特效
      show: true,
      // 特效图形的标记
      smooth: true,
      // 特效动画的时间，单位为 s
      period: 6,
      // 特效标记的大小
      symbolSize: 4,
    },
    lineStyle: {
      color: color,
      width: 1,
      opacity: 0,
      curveness: 0,
      cap: "round",
    },
    // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
    yAxisIndex :yAxisIndex,
    // 一个包含两个到多个二维坐标的数组
    data: datacoords,
  }
  return effect;
}

生成数据结构展示：

{
    "type": "lines",
    "smooth": false,
    "showSymbol": false,
    "polyline": true,
    "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": [
        [
            {
                "coord": [
                    0,
                    "130396"
                ]
            },
            {
                "coord": [
                    1,
                    "129195"
                ]
            }
        ],
        [
            {
                "coord": [
                    1,
                    "129195"
                ]
            },
            {
                "coord": [
                    2,
                    "128497"
                ]
            }
        ],
        [
            {
                "coord": [
                    2,
                    "128497"
                ]
            },
            {
                "coord": [
                    3,
                    null
                ]
            }
        ]
    ]
}