echarts折线图每个x轴坐标都添加markPoint图表标注

最新推荐文章于 2024-06-21 15:47:42 发布

永远不会太晚

最新推荐文章于 2024-06-21 15:47:42 发布

阅读量4.5k

点赞数 1

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_42611074/article/details/129384394

版权

echarts 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这段代码展示了如何在Echarts中创建一条带有标记点的折线图。坐标(coord)用于指定数据在图表中的位置，lineData定义了折线图的数据，markPointData则用来添加标记点及其对应的值。图形包含在category类型的x轴和value类型的y轴上，同时设置了自定义的样式和标签。

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

在这里插入图片描述 coord指定数据在相应坐标系上的坐标位置
coord: [a, b]，a是x轴位置，b是y轴位置（一般是value）
下方代码可直接运行在https://echarts.apache.org/examples/zh/editor.html?c=line-simple

const lineData = [7, 22, 32, 14, 54];
const markPointData = lineData.map((item, index) => {
  return { coord: [index, item], value: item };
});

option = {
  grid: {
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: [
    {
      type: 'value',
    }
  ],
  series: [
    {
      name: '用电量增长率',
      type: 'line',
      lineStyle: {
        type: 'dashed',
        color: '#F1BF68'
      },
      itemStyle: {
        color: '#F1BF68',
        borderColor: '#fff',
        borderWidth: 2,
        shadowColor: '#F1BF68',
        shadowBlur: 10
      },
      symbol: 'circle',
      symbolSize: 10,
      data: lineData,
      markPoint: {
        symbol:
          'image://' +
          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAAAjCAMAAAD1/jdcAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALFQTFRFAAAA661F661F661F661F661F661F661F661F661F661F661F661F661F7bNR8Lxi8b5m8b9n661F661F661F8b5l661F661F661F661F8b5m8b9m7bNR661F7LFM661F661F661F7bRS8b5m8L1k7LBK661F661F661F661F661F661F7rVT8L1k7LBL661F661F661F661F7rZV8L1k7LFN661F661F661F661F661FvQ/oBwAAADt0Uk5TAAIHDBIVFgQcLTk/QSNbzvb/Bg0s7jgRPhT391obTSJDS3/45mVJQgMXHTFz5FUrARAoZNJHDhkeCwVXmKGrAAAA40lEQVR4nO3WxxKCMBAG4IWlg8QgRQTE3nvX938wE73KOJN48MB/znzZ0/4LAIqKmm6IRddQVYDFRMt2XE8srmNbaLJJsOGTJhVNk/gNVEC1fHHj5fhWAC2bSCGUkhBBc+RGoTSKE9BdSYTSdgqGJ614Rq3USq3Uyp8rP9iYbsq2d0cS4dv7N03CWi2TQrK8CHjD5iQSNiLSLVnD8rYP449t3+sPhuzhaDyZVrZ9HBY440eDElRcHvPFcpXR9WZbVF8eCQavy6M6O3N/OJ7O5fsz4ezMy/Vm3OUQxswe6uPLxDxPYLiMPmJuVccAAAAASUVORK5CYII',
        symbolSize: [65, 31],
        symbolOffset: [0, -22],
        label: {
          color: '#fff'
        },
        data: markPointData
      }
    }
  ]
};