echarts实现折线图表X轴一个坐标对应两个值并且连线的功能图表

文章讲述了如何根据业务需求,利用给定的数据格式,通过JavaScript函数chartDataFun进行数据处理,创建ECharts图表,特别是散点图,并添加连接线进行位移量的可视化展示。
摘要由CSDN通过智能技术生成

在这里插入图片描述

应业务要求,需要制作如上图样式的图表,做下记录
数据格式如下
const arr = [
    {
        "number": "1-4",
        "cumulativeDisplacement": "-6.3",
        "part": "闸底板"
    },
     {
        "number": "2-1",
        "cumulativeDisplacement": "13.8",
        "part": "闸底板"
    }
]
数据处理方法
chartDataFun(arr) {
      const routeData = []
      const newSeriesData = []
      const xData = []
      arr.forEach((obj, index) => {
        const even = index % 2 === 0
        const newObj = {
          name: obj.part + obj.number,
          symbolSize: 5,
          data: [
            [
              // 如果true  ? 当前 + 下一个  : 当前 + 上一个
              even
                ? obj.part + obj.number + ' ' + arr[index + 1].part + arr[index + 1].number
                : arr[index - 1].part + arr[index - 1].number + ' ' + obj.part + obj.number,
              obj.cumulativeDisplacement] ],
          type: 'scatter'
        }
        newSeriesData.push(newObj)
        routeData.push([even
          ? obj.part + obj.number + ' ' + arr[index + 1].part + arr[index + 1].number
          : arr[index - 1].part + arr[index - 1].number + ' ' + obj.part + obj.number,
        obj.cumulativeDisplacement])
        if (even) { xData.push(obj.part + obj.number + ' ' + arr[index + 1].part + arr[index + 1].number) }
      })

      const routeLineData = []
      routeData.forEach((item, index) => {
        if (index !== routeData.length - 1) {
          const newLineArr = [
            {
              coord: [item[0], item[1]],
              lineStyle: {
                width: 2,
                type: 'solid',
                color: '#5470c6'
              }
            },
            {
              coord: [routeData[index + 1][0], routeData[index + 1][1]],
              lineStyle: {
                width: 2,
                type: 'solid',
                color: '#5470c6'
              }
            }
          ]
          routeLineData.push(newLineArr)
        }

      })
      newSeriesData.length ? newSeriesData[ newSeriesData.length - 1 ].markLine = {
        silent: false,
        symbol: 'none',
        data: routeLineData
      } : {}
      return {
        xAxis: {
          type: 'category',
          data: xData,
          position: 'top',
          axisLabel: {
            textStyle: {
              fontSize: 18
            }
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {
          name: '累计位移量(mm)',
          nameRotate: -90,
          nameLocation: 'middle',
          nameGap: 30,
          nameTextStyle: {
            fontSize: 18
          },
          inverse: true
        },
        color: [ '#5470c6' ],
        series: newSeriesData
      }
    }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值