echarts仪表盘点击打分实现

Echarts仪表盘刻度点击

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

思路

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

这边就直接上代码了。

<div v-bind:id="'echart'+ec.name" style="width: 100%;height:85%" @click="setScore($event)"></div>

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),代码中注释已经给的很明确了，有什么问题的地方可以留言我哈，

最后

给出最后的效果图，当然这个样式是美工调出来的啦，

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