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

在这里插入图片描述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
      }
    }
  ]
};

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值