echarts仪表盘点击打分实现

逃离我推掉我的手 2022-01-23 06:39 493阅读 0赞

## Echarts仪表盘刻度点击 ##

> 项目中需要使用仪表盘来做一个打分的功能，·下面是一个官网的仪表盘，是没有刻度的点击事件的，所以就要手动实现一个了，

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5qdW5fZmVp_size_16_color_FFFFFF_t_70]

## 思路 ##

这里的一个方框指的是一个canvas，然后根据比例获取到仪表盘的一个中心，然后根据鼠标点击的相对canvas的坐标值，能够算出指针角度的tan值，然后根据tan值来判断指针所指的刻度，然后设值渲染。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5qdW5fZmVp_size_16_color_FFFFFF_t_70 1]

## 这边就直接上代码了。 ##

methods: {
          setScore(e) {
            /**
             * 
             * 
             * e.layerX 鼠标相对canvas X轴的位置
             * e.layerY 鼠标相对canvas Y轴的位置
             * centerX  更具比例得到指针中心的X轴位置
             * centerY  根据比例得到指针中心的Y轴位置
             * 
             * rate     得到点击点 到指针中心的 一个比例，即 左角度的tan值
             * 
             * 各个分段的取值   
             *  score     [3]     [4]       [5]        [1]     [2]      [5]
             * 坐标轴          -2      -0.4        原点     0.4       2
             */
            var chart = e.path[2].id;
            var score = 1;
            var echart = document.getElementsByTagName("canvas")[5]
            var centerX = echart.clientWidth * 0.53
            var centerY = echart.clientHeight * 0.69
            var rate = (centerY - e.layerY) / (centerX - e.layerX)
            // console.log(e.layerX + " " + e.layerY)
            // console.log("centerX" + centerX + "--" + "cenerY" + centerY + "==" + rate)
            //如果点击再 指针的下面，就没反映，
            if (centerY < e.layerY) {
              return;
            }
            if (rate < 0.4 && rate > 0) {
              score = 1;
            } else if (rate < 2 && rate > 0.4) {
              score = 2;
            } else if (rate > 2 || rate < -2) {
              score = 3;
            } else if (rate < 0 && rate > -0.4) {
              score = 5
            } else {
              score = 4
            }
            //重新加载echart
            let myChart = this.$echarts.init(document.getElementById(chart));
            this.option1.series[0].data[0].value = score;
            myChart.setOption(this.option1, true);
            this.$nextTick(function () {
              myChart.resize();
            })
          },

这是仪表盘的控件，给定一个点击事件setScore($event),代码中注释已经给的很明确了，有什么问题的地方可以留言我哈，

## 最后 ##

给出最后的效果图，当然这个样式是美工调出来的啦，  
![在这里插入图片描述][20190602214716438.gif]

> 最后，可以留一个问题，根据鼠标悬停将指针移动到指针的位置，就是指针跟鼠标走，大家有兴趣可以自己实现看看啊哈哈

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5qdW5fZmVp_size_16_color_FFFFFF_t_70]: /images/20220123/32ce145e81484588b57f52ec0f29ff38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5qdW5fZmVp_size_16_color_FFFFFF_t_70 1]: /images/20220123/2988885fca704a15a5e3f973448940b3.png
[20190602214716438.gif]: /images/20220123/849488bcddf34fd99ad6a92632948700.png