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

小小小小小橘子

已于 2023-10-13 15:23:37 修改

阅读量1.6k

点赞数

文章标签： echarts 前端 javascript vue.js

于 2023-07-20 17:46:57 首次发布

本文链接：https://blog.csdn.net/qq_40055372/article/details/131836251

版权

文章讲述了如何根据业务需求，利用给定的数据格式，通过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
      }
    }