echarts仪表盘给刻度加点击事件

前段时间公司要求做一个带刻度齿轮的半圆当作空调操作的面板，UI给到的设计是这样的：

 

 每两个刻度代表1°，点到哪个刻度就是几度

最开始我还想用css去画那个刻度，试了很久没有成功，就只能用echarts仪表盘了

---

• 首先，说一下样式

这个页面只有上面那个刻度使用了echarts，其它都是我自己画上去的，中间那个半圆，我最开始也想使用echarts仪表盘里面的模板，找了很久没有合适的，就自己画的，然后定位定上去的

• 其次，是上面那个刻度

我在官网随便找了一个半圆的仪表盘模板，然后给options改造

下面是我的options配置：

  var option = {
    series: [{
      name: "刻度",
      type: "gauge",
      center: ["50%", "100%"],//位置
      radius: "160%",
      min: 16, //最小刻度
      max: 30, //最大刻度
      splitNumber: 2, //分割成几份，除去两端的刻度长线，中间会多一个长线，表示份数分割线
      startAngle: 180,//最大刻度，半圆180°
      endAngle: 0,//最小刻度，从0开始
      axisLine: {
        show: true,
        lineStyle: {
          width: 0,
          shadowBlur: 0,
          color: colorFormatOnChart(),//这个下面会说
        },
      }, //仪表盘轴线
      pointer: {
        //仪表盘指针，我这里没有显示指针，所以show给的是0
        show: 0,
        length: "70%",
        width: 2,
      },
      axisLabel: {
        //刻度标签
        show: false,
        color: "#0ab7ff",
        fontSize: 15,
        distance: -50,
      }, //刻度标签。
      axisTick: {
        show: true,
        splitNumber: 7,//是和上面的splitNumber关联，分成两份，每份有几个刻度
        lineStyle: {
          color: "auto",
          width: 6,//短刻度线宽
        },
        length: -10,//短刻度的线长，整数代表刻度线往圆内伸展，负数代表往外伸展
      }, //刻度样式
      splitLine: {
        show: true,
        length: -16,//长刻度的线上，就是那个分割线的长度，一般比短刻度长，才会覆盖住短刻度
        lineStyle: {
          width: 6,//长刻度线宽
          color: "auto",
        },
      },
    }],
  };

 axisLabel：是刻度标签，给每个刻度加上标签，可以显示代表几度，但是我这里不需要给每个刻度加上标签，所以直接给的false，然后两边，以及中间的刻度标签是我定位上去的

axisLine：仪表盘轴线，color是给仪表盘轴线加颜色的，如果只有一个颜色，那么全部的轴线都是这个颜色，但是也可以分段给刻度配颜色，下面是官网给的配置

• 最后，给整个仪表盘加绑定一个点击事件

 一定要给包裹echarts的容器加事件，这样才能保证只有在这个容器内点击，才能触发事件

如何点击刻度，彩色部分刻度就到某个刻度呢

使用角度，计算tan值

获取手指点击的位置，圆心，0°位置，三点做一个直角三角形

计算出那个角度，看它占的百分比，给到color值即可

  changeScale(e) {
    let that = this
    console.log(e);
    let x = parseInt(wx.getSystemInfoSync().windowWidth) / 2
    let y = 198
    let x2 = e.detail.x;
    let y2 = e.detail.y - 90;
    // 当前点击位置的角度.
    let currentAngle = Math.atan2(y - y2, x - x2) * 180 / Math.PI;
    console.log(currentAngle);
    let val = 16
    if (currentAngle > 0 && currentAngle <= 5) {
      val = 16
    } else if (currentAngle > 5 && currentAngle <= 15) {
      val = 17
    } else if (currentAngle > 15 && currentAngle <= 30) {
      val = 18
    } else if (currentAngle > 30 && currentAngle <= 45) {
      val = 19
    }
    ...
    that.colorFormatOnChart(val )
  },

 我这里给了一个大概，就是只要点击在5°~15°之间 就默认是把刻度调到17，小于5°就是16，以此类推

  function colorFormatOnChart() {
    switch (parseInt(curtem)) {
      case 16:
        return [
          [0, "#91dff1"],
          [1, "#8E9BAE"]
        ];
        break;
      case 17:
        return [
          [0.1, "#91dff1"],
          [1, "#8E9BAE"]
        ];
        break;

      ...

      case 30:
        return [
          [1, "#91dff1"],
          [1, "#8E9BAE"]
        ];
    }
  }

以上就是点击刻度，改变刻度颜色的办法，有什么不懂的或者好的建议，欢迎多多交流