echartsのmarkLineはX軸に垂直であり、新しいエリアブロックとカラーmarkareaが折れ線グラフに追加されます

レンダリング

2つのコード

{
            data: [0.54, 0.52, 0.72, 0.82, 0.44, 0.36, 0.82, 0.52, 0.74],
            type: 'line',
            markLine: {
              lineStyle: {
                width: 3,
                color: '#F7B500',
              },
              label: {
                show: true,
                position: 'end',
                formatter: '11.25万',
                color: '#32383B',
                height: 10,
                padding: [12, 12, 7, 12],
                lineHeight: 10,
                borderWidth: 2,
                borderColor: '#F7B500',
                borderRadius: 2,
                fontWeight: 550,
                fontFamily: 'HYQiHeiX1-GEW',
              },
              silent: true, // 鼠标悬停事件, true悬停不会出现实线
              symbol: 'none', // 去掉箭头
              data: [[
                { coord: [2, 0] }, // [x第几个（从0开始），y轴起始点 ]
                { coord: [2, 0.98] } // [x第几个（从0开始），y轴起始点 ]
              ]]
            }
          },

ここでx軸の値を使用することもできますが、文字列を使用します。x軸が数値の場合は、文字列に変更します。

data: [[
                { coord: ['12', 0] }, // [x轴值，y轴起始点 ]
                { coord: ['12', 0.98] } // [x轴值，y轴起始点 ]
              ]]

または

x軸タイプのカテゴリを値の形式に変更して、任意の値の位置を直接渡すことができるようにします 

カテゴリの場合、x軸上の点のみを判断でき、点を特定できません。

xAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(171, 170, 170, 0.2)'
            }
          },
          axisTick: { show: false },
          splitLine: { show: false },
        },

複数の行で渡されるデータ形式を変更する必要がある場合は、データを2次元配列で渡す必要があり、マップを実行してループすることができます。スキャッタープロットの配置と同様です。

   let data = {
         markData: 10,
         data: [
           [[12, 0.23], [14, 0.45]],
           [[12, 0.23], [14, 0.45]],
           [[12, 0.23], [14, 0.45]]
         ]
       }

markarea

エリアの場所を追加することをお勧めします。両側に点線が必要な場合でも、マークラインを描画する必要があります。

markArea: {
            itemStyle: {
              color: 'rgba(232, 241, 248, 1)',
            },
            data: [[
              { xAxis: dt.leftLine},
              { xAxis: dt.rightLine }
            ]]
          }

 

 

 

さあさあ