vue2 echarts 折线图怎么点击这条虚线，触发点击事件

vue2 echarts 折线图怎么点击这条虚线，触发点击事件
vue2 echarts 折线图怎么点击这条虚线，触发点击事件

img

  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7738701
  • 你也可以参考下这篇文章：【Echarts系列】Vue2项目如何引入echarts
  • 除此之外, 这篇博客: Vue 使用 echarts 散点图在区域内标点中的 Vue 使用 echarts 散点图在区域内标点 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 首先是因为项目，需要在一个区域内根据坐标标出在标准大小的玻璃中标出检测出含有缺陷的坐标点。
    假如说，一块玻璃的大小是标准的 100200 mm的大小，这个是定死的，不会变，每块都这么大。
    那么就直接在界面上创建一个100    200px的div，表示是这块玻璃。
    规定，这块玻璃的中心点是原点（0,0），向右向上是正，向左向下是负。
    所以就是这个样子
    在这里插入图片描述
    所以说我就想用 echarts 直接在界面上渲染。

    html

    首先在界面上绘制一个div来放置echarts。其中这个被我抽离出来做成了组件，组件大小已经规定好了，就是200*100的标准大小。公司要求不能拉伸，不然给人的感觉点就是错位的，如果太大，可以按比例缩小或放大。

    <template>
  <div style="width: 100%;height: 100%;border: 1px solid #dee1e6;background-color: #f1f3f4;">
    <div id="map" style="width: 100%;height:100%;"></div>
  </div>
</template>

    然后是给散点图画坐标，其实这个地方就很烦。
    echarts 的坐标和公司的有出入。
    在这里插入图片描述
    首先设置x轴 和 y轴

    		 // 循环界面
        let xLabel = []
        let yLabel = []
        for (let i = -49; i <= 50; i++) {
          xLabel.push(i)
        }
        for (let y = -99; y <= 100; y++) {
          yLabel.push(y)
        }

    然后是绘制点的集合

    后台返回来的点的数据结构大体是这个样子的。
    在这里插入图片描述

    	    series.push({
          symbolSize: 10,
          color: 'red',
          name: this.showData[2],
          // data下面是计算出的，就是楞加
          data: [[this.showData[0] / 1000 + 49, this.showData[1] / 1000 + 99]],
          type: 'scatter',
        })

    坐标需要转换，除1000，不解释了，就这样规定的。

    然后就可以绘制散点图了。

           let option = {
          grid: {   // 因为就是个图片，模拟玻璃，就把绘制的边距设置为0，绘制区域充满整个屏幕
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
          },
          xAxis: { 
            show: false,
            data: xLabel
          },
          yAxis: {
            show: false,
            data: yLabel
          },
          series,
        }
        this.charts = echarts.init(document.getElementById('map'))
        this.charts.setOption(option, true)
        // 下面这个点击事件是当我点击图上的点的是后触发的点击事件
        this.charts.on('click', (params) => {
          if (params.componentSubType === 'scatter') {
            console.log('pointClick ----> ', params.seriesName)
          }
        })

    可以了。

    大体效果就这个样子。
    在这里插入图片描述

  • 您还可以看一下 jason老师的vue通用后台管理课程中的 echarts表格折线图实现小节, 巩固相关知识点

tooltip的线没有鼠标事件，绑定鼠标事件，不指定componentType，所有可触发事件的都会触发，下面例子：series和markLine会触发点击事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #chart {
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="chart"></div>
    <script src="https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js"></script>
    <script>
        const chart = echarts.init(document.getElementById('chart'))

        chart.setOption({
            tooltip: {
                trigger: 'axis'
            },
            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',
                    label: {
                        show: true
                    },
                    markLine: {
                        data: [
                            {
                                name: 'Y 轴值为 100 的水平线',
                                yAxis: 100
                            }
                        ]
                    }
                }
            ]
        })

        chart.on('click', params => {
            console.log(params);
        })
    </script>
</body>

</html>

img