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

电玩女神 2024-03-26 18:41 55阅读 0赞

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

[268575bbc6fd4fecb5fb30d88d3f0345.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/211e1ef5d96a49e48a68d42f2fd85daf.png
[https_echarts.apache.org_examples_zh_editor.html_c_line-simple]: https://echarts.apache.org/examples/zh/editor.html?c=line-simple

发表评论取消回复

表情：

评论列表（有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读

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

![在这里插入图片描述][268575bbc6fd4fecb5fb30d88d3f0345.png]coord指定数据在相应坐标系上的坐标位置 coord: \[a, b\

电玩女神/ 2024年03月26日 18:41/ 0 赞/ 56 阅读

相关 Echarts动态加载折线图 x轴，y轴数据，阴影部分

需求 1. 制作折线图 1. x轴动态显示最近14天的日期 1. y轴根据x轴日期所对应的数据，动态显示数据所在区间。 1. 鼠标移入，显示日期对应的数据。

比眉伴天荒/ 2024年03月25日 20:04/ 0 赞/ 50 阅读

相关 echarts中折线图添加手柄，x轴数据隔一个显示一个

先看效果： ![20210208094413477.gif][] 主要是设置的： axisLabel: { interval: 1, // x

不念不忘少年蓝@/ 2022年12月05日 09:59/ 0 赞/ 324 阅读

相关 echarts对Y轴坐标控制

echarts自定义y轴刻度信息 <!DOCTYPE html> <html> <head> <meta charset="utf

待我称王封你为后i/ 2022年11月18日 13:54/ 0 赞/ 277 阅读

相关如何使用echarts给y轴x轴添加单位

如何使用echarts给y轴x轴添加单位 y轴每个单位刻度加单位使用 y轴顶部设置单位 x轴添加单位 y轴每个单位刻度加单位使

逃离我推掉我的手/ 2022年11月02日 15:27/ 0 赞/ 447 阅读

相关 echarts拖动X轴

dataZoom: [ { type: "slider", show: t

约定不等于承诺〃/ 2022年10月17日 04:21/ 0 赞/ 202 阅读

相关 jqueryflot图表x轴坐标过长完美解决方案(转)

jqueryflot图表x轴坐标过长完美解决方案(转) 参考文章： [（1）jqueryflot图表x轴坐标过长完美解决方案(转)][1_jqueryflot_x] （2

偏执的太偏执、/ 2022年08月28日 07:56/ 0 赞/ 181 阅读

相关【备忘】EChart 标题 title 样式，x轴、y轴坐标显示，调整图表位置等

![这里写图片描述][70] 示例里工作一般情况是够用了，更复杂的可以查询教程： title 官方解说：http://echarts.baidu.com/option.ht

╰+哭是因爲堅強的太久メ/ 2022年05月19日 06:12/ 0 赞/ 999 阅读

相关 Echarts3实例光滑折线图—垂直Y轴标注

实现效果 ![这里写图片描述][70] 知识点折线光滑设置grid 设置标题，toolbar Y轴垂直标题代码实现

àì夳堔傛蜴生んèń/ 2021年09月16日 07:06/ 0 赞/ 770 阅读

相关 Echarts动态加载折线图 x轴，y轴数据，阴影部分

需求 1. 制作折线图 2. x轴动态显示最近14天的日期 3. y轴根据x轴日期所对应的数据，动态显示数据所在区间。 4. 鼠标移入，显示日期对应的数据。 5.

忘是亡心i/ 2021年09月01日 05:36/ 0 赞/ 1096 阅读