echarts 指示线markLine

最新推荐文章于 2024-06-28 16:41:08 发布

rogerwang@f2e

最新推荐文章于 2024-06-28 16:41:08 发布

阅读量2.9k

点赞数 5

分类专栏： echarts 文章标签： echarts markLine

本文链接：https://blog.csdn.net/RogerWang_H5/article/details/130228454

版权

echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章介绍了如何在Echarts的折线图中添加竖向指示线markLine，提供了具体的代码示例，展示了如何设置指示线的样式、标签以及数据。此外，还提及了后续将要补充的markLine的hover或点击事件功能。

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

echarts 指示线markLine

功能说明

echarts折线图添加竖向指示线markLine。

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p8ypZnYz-1681814203747)(/Users/howbuy/Library/Application Support/typora-user-images/image-20230412111034578.png)]

代码

const base64Icon =
 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABJlBMVEUAAABBuIM1SV5BuINBuINBuINBuINBuINBuINBuINBuIM/o31BuINBuINBuINBuINBuINBuINBuINBuINBuINBuINBuINBuIMzQlpLunxAk3g2U2I2U2JBuINBuINBuIM3WGRBuINBuINBuIM5Ymg+l3k6cW41S141S180SF0yOlcyN1Y2T2E3WmU4VWNBuIM5XmdBuIM7cW9BuINBuINBuINBuIM7cG5BuIM1SV41Sl41TF9Qu3k/uIQ0Rlw0Q1tAuYMwNFUxN1YxMlQzPVlFuoBLun1Nu3tOu3ozQVpHun8zP1oyOlc/uIM9dW43VWNJtn1GrXxFqHxSu3g9b2w6Ymg6XGZIsnxEo3tCnXpBlXlBj3dAi3Y/g3M+fHE7aGpEoXo8bWxw63rMAAAAOHRSTlMA09LaviHjsk88FAj78unLqY5hV0cO9+/a0tK/tKCYhoZ7bmdTGhPu5NLS0tCjkn92dDQyMS4sKF/QfZ0AAAIpSURBVEjH1dTnWuJAFAbgDylSRRTsfdXtvYUQExNCj2DvZff+b2KTyTkDKiX8W99fyczJc5jvmQP+Q5PhkLC49O7thGfhE6SNhQnh/dKiXxWOYFbx7dfPzFLRY3wD+W2IhZJ1Xt+nslduC3qsHtuG6m6rjQ8gyy3V+0B3LqtUFAGwQ897J+2yaKHa2xC2G36D8qm2R0VRuNbppXKo2qKF8RrCG79jS79oUskahHlqod2W1aIo2YDrS8t/K99xg7kUhO65O1ZJ/GhjB9jVddHA6dQUeWKSpYXalaUXxblXgI9+g6J1XTvwt8Ng37mF9kDRNnZTdGLzTONIE5Cmaal51DD8cy+v0IN9zJFOoiuZ5nPfU7TuAfxI2ye9kUqbHG215LiVTLWLhxXayuGRGLWo35hU7Ed6y5HO47G4jPZcREuXqFPjE8/giQhfqUtH5w9064ojDeGpqEK0UzdaivRB49UfeGaNo73Q6U4YjSO+RNN4rjDH0d6VKdJ7eUuT6GOL21c7jupFWmpypJvoK+zvHtSuvWhV86ZODabQX0JeKXdae+cyjgEiPdOqO3840iwGiXan1TT/ylv6CwPl5LTalox0FYOlMhxtWw5+uoAhZhTuUeGnLQwV5qS4PgYyIlopj+F4WlkEoyS5lOdypM+99TkEMNWtz6QwCk8rz2UgWa4PIZifCkkgoFX+qwuqkKa5DOyrV7+OMcRoLgPLK8osxhLLYDz5OF6Mf/rT1F2uAMvtAAAAAElFTkSuQmCC';

option = {
  title: {
    text: '电量分布统计'
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    boundaryGap: false,
    // prettier-ignore
    data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} W'
    },
    axisPointer: {
      snap: true
    }
  },
  series: [
    {
      name: '电量',
      type: 'line',
      smooth: true,
      // 指示线
      markLine: {
        // 上下图标可以单独设置，可为空
        symbol: [base64Icon, base64Icon],
        symbolSize: [14, 17],
        label: {
          show: true,
          padding: [0, 0, 5, 0],
          formatter(){
            return '指示线'
          }
        },
        data: [
          {
            xAxis: '10:00'
          }
        ],
        lineStyle: {
          width: 1,
          color: '#979797'
        }
      },
      // prettier-ignore
      data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400]
    }
  ]
};