echarts实现误差线图

Actualee

已于 2024-02-21 14:21:01 修改

阅读量661

点赞数 10

文章标签： echarts 前端 javascript

于 2024-02-21 14:18:42 首次发布

本文链接：https://blog.csdn.net/actualee/article/details/136210734

版权

本文详细描述了如何在Vue2项目中结合Echarts库创建误差线图，包括自定义类型、数据编码、误差线样式和均值线的配置，以及实际效果的展示。

摘要由CSDN通过智能技术生成

使用vue2+echarts实现的误差线图

option = {
        title: {
          text: '误差线图'
        },
        legend: { top: '5%', left: 'center' },
        xAxis: {
          data: ['x1', 'x2', 'x3']
        },
        yAxis: {
          // 选取合适的yAxis取值范围, 保证曲线展示在图表中心位置
          min: function (value) {
            let yRange = 3;
            return Math.floor(value.min > yRange ? value.min - yRange : value.min);
          },
          max: function (value) {
            let yRange = 3;
            //取最大值向上取整为最大刻度
            return Math.ceil(value.max + yRange);
          }
        },
        series: [
          {
            type: 'custom',
            // name: '误差范围',
            // 误差线样式
            itemStyle: {
              borderWidth: 2,
              color: 'green'
            },
            renderItem: function (params, api) {
              let xValue = api.value(0);
              // 下面线的中心坐标
              let lowPoint = api.coord([xValue, api.value(1)]);
              // 上面线的中心坐标
              let highPoint = api.coord([xValue, api.value(2)]);
              console.log(highPoint, lowPoint);
              let style = api.style({
                stroke: api.visual('color'),
                fill: undefined
              });
              return {
                type: 'group',
                children: [
                  // 误差线上方点
                  {
                    type: 'ring',
                    transition: ['shape'],
                    shape: {
                      cx: highPoint[0],
                      cy: highPoint[1] - 6,
                      r: 6,
                    },
                    style: {
                      fill: '#fff',
                      stroke: 'pink',
                      lineWidth: 2,
                    }
                  },
                  // 误差线条
                  {
                    type: 'line',
                    transition: ['shape'],
                    shape: {
                      x1: highPoint[0],
                      y1: highPoint[1],
                      x2: lowPoint[0],
                      y2: lowPoint[1],
                    },
                    style: style
                  },
                  // 误差线下方点
                  {
                    type: 'ring',
                    transition: ['shape'],
                    shape: {
                      cx: lowPoint[0],
                      cy: lowPoint[1] + 6,
                      r: 6,
                    },
                    style: {
                      fill: '#fff',
                      stroke: 'purple',
                      lineWidth: 2,
                    }
                  },
                ]
              };
            },
            // 定义数据和图形元素的映射关系
            // 如data[0] = [0, 160.79363960585394, 167.03636039414604]
            // 0会被映射在x轴上, 剩余的两个索引1,2对应的数字会映射在y轴上
            encode: {
              x: 0,
              y: [1, 2]
            },
            // 误差线数据-实际情况需要根据后端返回的high、low数据进行组合计算
            data: [
              [0, 160.79363960585394, 167.03636039414604],
              [1, 154.6824268539158, 159.5025731460842],
              [2, 155.6824268539158, 165.6025731460842]
            ],
            // z: 100
          },
          {
            type: 'line',
            name: '均值',
            data: [163.915, 157.0925, 160.0925],
            // splitLine: {
            //   show: false 
            // },
            symbol: 'none',
            // 折线样式
            lineStyle: {
              borderWidth: 2,
              color: 'red',
            },
          }
        ]
      }

效果如下：