问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ECharts 点击图表时怎么复制值？

头像
ajanuw
    45820

    echarts 5.5.0，我想当鼠标在图标在单击或双击时能复制x轴上的值。

    image.png

    如图当点击红色位置的时候，我想将左侧的281.11数值写入粘贴板。

    这是我的代码

    <body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
  <script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    let option = {
      tooltip: { axisPointer: { type: 'cross' }, },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    };

    myChart.setOption(option);

    // myChart.on('mousemove', 'tooltip.axisPointer', e => {
    //   console.log(e);
    // })

  </script>
</body>

    请帮帮我，谢谢。

    搜索相关问题，未找到答案

    echartsjavascript
    阅读 1.8k
    2 个回答
    得票最新
    头像
    zangeci
      14.8k71731
      ✓ 已被采纳
      头像
      玛拉_以琳
        8.7k41542
        myChart.on('click', function (params) {
  if (params.componentType === 'xAxis') {
    var xValue = params.value; // 获取 x 轴上的值
    // 执行你想要的复制操作，比如将 xValue 复制到剪贴板
    // 例如：
    copyToClipboard(xValue);
  }
});

function copyToClipboard(xValue){
   /* 复制内容 */
  navigator.clipboard.writeText(xValue);
}

        复制也可以使用第三方库clipboard.js, 兼容性更强

        https://clipboardjs.com/
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题