higcharts横坐标crosshair设置渐变色

最新推荐文章于 2022-05-07 18:02:45 发布

Orange301511

最新推荐文章于 2022-05-07 18:02:45 发布

阅读量474

点赞数

分类专栏：大前端文章标签： vue.js echarts

本文链接：https://blog.csdn.net/LQS5858/article/details/124447222

版权

大前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

如何设置highcharts的crosshair的渐变色

您可以使用函数 Axis.addPlotBand()创建一个绘图带，在mouseOver事件使用，在mouseOut移除使用，详细可以查看如下代码例子

await this.$nextTick()
      let self = this
      HighCharts.chart('line', {
        chart: {
          type: 'spline'
        },
        title: {
          text: ''
        },
        legend: {
          enabled: false
        },
        credits: {
          enabled: false
        },

        tooltip: {
        },
        xAxis: {
          //表示为时间，注意大小写
          type: 'datetime',
          //格式化时间，day,week....
          dateTimeLabelFormats: {
            day: '%Y-%m-%d'
          },

        },
        yAxis: {
          opposite: true,
          title: {
            text: ''
          }
        },
        plotOptions: {

          spline: {
            lineWidth: 2,
            color: '#00B8A4',
            states: {
              hover: {
                lineWidth: 3
              }
            },
            marker: {
              enabled: false
            },
            //设置crosshair渐变色
            point: {
              events: {
                mouseOver: function (e) {
                  var targetX = e.target.x,
                    from = targetX - 0.1,
                    to = targetX + 0.1;
                  this.series.chart.xAxis[0].addPlotBand({
                    id: 'plot-band-1',
                    from: from,
                    to: to,
                    zIndex: 2,
                    color: {
                      linearGradient: {
                        x1: 0,
                        x2: 0,
                        y1: 1,
                        y2: 0
                      },
                      stops: [
                        [0, 'rgba(0, 184, 164, 0)'],
                        [1, 'rgba(0, 184, 164, 1)']
                      ]
                    }
                  });
                },
                mouseOut: function (e) {
                  this.series.chart.xAxis[0].removePlotBand('plot-band-1');
                }
              }
            }
          },
          series: {
            point: {
              events: {
                mouseOver: function () {
                  console.log('鼠标移入》〉》〉', this, this.x);
                  self.curX = this.x
                  self.curY = this.y
                }
              }
            },
            events: {
              mouseOut: function () {
                if (this.chart.lbl) {
                  this.chart.lbl.hide();
                }
              }
            }
          }
        },
        series: [
          { data: [[1527832563000, 29.9], [1527918791000, 71.5], [1528005191000, 106.4], [1528091591000, 129.2], [1528177991000, 144.0], [1528264563000, 176.0], [1528350963000, 135.6], [1528437363000, 148.5], [1528523763000, 216.4], [1528610163000, 194.1], [1528696563000, 95.6], [1528782963000, 54.4]] }
        ]
      });