echarts仪表盘配置

 

meterchart() {
      let myEcharts = echarts.init(this.$refs.meterChart);
      var option = {
        series: [
          {
            type: "gauge",
            min: 0,
            max: 180,
            splitNumber: 6,
            startAngle: 240,
            endAngle: -60,
            radius: "90%",
            //轴线
            axisLine: {
              lineStyle: {
                color: [
                  [3 / 10, "#fff"],
                  [7 / 10, "red"],

                  [1, "red"],
                ],
                width: 2,
              },
            },
            // 刻度线
            splitLine: {
              length: 10,
              distance: 1,
              lineStyle: {
                width: 1,
                color: "#fff",
              },
            },
            // 数字
            axisLabel: {
              distance: 10,
              color: "#fff",
              fontSize: 14,
            },
            // 间隔线
            axisTick: {
              show: true,
              splitNumber: 6,
              distance: 2,
              lineStyle: {
                color: "#fff",
              },
            },
            //圆心
            anchor: {
              show: true,
              size: 30,
              itemStyle:{
                color:'transparent',
                borderColor:'#fff',
                borderWidth:'2'
              }
            },
            //指针
            pointer: {
              icon:
                "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
              length: "70%",
              width: 6,
              offsetCenter:[0,'-16%'],
              itemStyle: {
                color: "#fff",
              },
            },
            //标题
            title: {
              show: true,
              color:'#fff',
               fontWeight:'bold',
               offsetCenter:[0,'80%']
            },
            //数据
            data: [
              {
                value: 60,
                name: "km/h",
                detail: {
                  show: true,
                  color:'#fff',
                  fontSize: 12,
                  fontWeight:'bold',
                  offsetCenter:[0,0]
                },
              },
            ],
          },
          // {
          //   type: "gauge",
          //   min: 0,
          //   max: 100,
          //   splitNumber: 10,
          //   radius: "50%",
          //   axisLine: {
          //     show: false,
          //   },
          //   axisLabel: {
          //     show: false,
          //   },
          //   splitLine: {
          //     show: false,
          //   },
          //   detail: { show: false },
          //   axisTick: {
          //     show: false,
          //   },
          // },
        ],
      };
      myEcharts.setOption(option);
    },