阅读 2551

Echarts 踩坑

这段时间接到个需求,给项目里的折线图添加条最大差值线,如下面两图,在两条线段中找出相差最大的地方连一条线。

不带线.png
带线.png

一开始没觉得有什么难度,直接我看了项目。。。
这项目另外封装了一遍Echarts,设定了许多参数配置。。。
不管怎么样。。。开干吧

第一次尝试

后台把数据发过来了,是一组(两个)坐标点,与另外两条线放在一起。
先不做处理,看看这种形式的数据会被怎么绘制。

奇怪的线.png

咦?怎么是这鬼样?(不要在乎线的颜色,我改了。。。显眼一点)
看了下配置

xAxis: {
        type: 'category',
        data: data.xAxisValue?data.xAxisValue:dataObj.xAxisData
}
复制代码

有点不好的预感。。。

再看看后台返回的数据格式

list1:[
  {
    yAxis: 0,
    xAxis: 0
  },
  {
    yAxis: 0.1,
    xAxis: 2
  }
  {
    yAxis: 0.2,
    xAxis: 5,
  }
  .....
]
复制代码

嗯,很整齐的x,y坐标点格式

再看看最终经封装的echarts处理过后的,被渲染的数据是怎么样的

list: [ 0, 0.1, 0.2 ]
复制代码

你特么在逗我? 这是定好x轴刻度,然后依次填入数据的意思吗?
所以数据最后被处理得只剩y值?
再看一下最终打印出来的配置参数

xAxis: {
  type: "category",
  data: [1,2,3,4,5,6 ......]
}

复制代码

难怪会出现刚才那么奇怪的线,还真是这样啊。。。。
因为这组只有两个点(反正够画一条线了)
所以线就直接出现在x轴0点的地方了。。。。

奇怪的线.png

第二次尝试

由于不好更改封装的组件(万一改了后,其他地方的图表暴雷,锅就大了)
于是我想,不如将差值线的数组长度,改成跟另外两条线一样。。。

      option.series[2].data = [] // 先清空数组
      option.series[2].data.length = option.xAxis.data.length //直接设定数组长度
      option.series[2].data[x] = y1
      // 在数组的第X个元素(X就是要画的两个点的横坐标)替换成点的y值
      option.series[2].data[x] = y2
复制代码

因为Echarts的数组中如果数值为空的话,会默认不绘制
Tips:一个小知识,可由此画出断点的线

线似乎出现在了对的位置,可它弯了?.png

为什么弯了啊!!!,我是直的啊!!!

不能放弃,贫穷的码农不能放弃

再看一下代码
懂了,
是因为X轴的坐标是按顺序递增的,不能更改。
于是我手动写进去的点,实际上是

list: [
  {
    x: 100,
    y: 0,
  }
  {
    x:101,
    y: 1,
  }
]
复制代码

也就是说,两个点的X轴坐标并不一致,因此这两个点并不能画出一条垂直于X轴的线。
可是X轴坐标的配置是封装好了的,除非去改封装的源码。。。

不,我不能背锅!

这个问题恐怕在常规的数组里解决不了了,毕竟他根本没法出现两个X值相同的点。
于是我想到了标线 markLine

第三次尝试 markLine

Echarts里提供了markLine功能,如下图带箭头的那条虚线。

标线图.png

为什么想用markLine? 因为他不会受到原有的配置影响。
虽然markLine好像都是平行于X轴的线,但想想Echarts的丰富,或许能改成竖线呢?

let markLine = {
        name:'差值线',
        type:'line',
        markLine: {
            normal:{
              lineStyle:{
                width:2,
                type:'solid', 
              },
            }
          },
          symbol:'none', //带不带箭头
          data: [[
                {coord:[x1,y1]},
                {coord:[x2,y2]}
            ]] //这里是重点
        }
      }

option.series[2] = markLine
// series就是存放我们要绘制的线的数据的数组
复制代码

它直了!.png

大功告成,可喜可乐!

文章分类
前端
文章标签