echarts-儀表盤-漸變

效果圖：

 

 

  <div style="width: 244px; height: 220px" id="propertyRightBottom"></div>

 

 // 自適應字體大小變化
    WidthAdaptive(res) {
      var windth = window.innerWidth;
      let fontSize = windth / 1920;
      return fontSize * res;
    },
    drawLine() {
      // 基於准備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(
        document.getElementById("propertyRightBottom")
      );

      let option = {
        backgroundColor: "transparent",
        grid: {
          right: "5%",
          left: "5%",
          top: "10%",
          bottom: "5%",
          borderWidth: 1,
        },
        xAxis: {
          show: false,
          type: "category",
          data: ["Mon"],
        },
        yAxis: {
          show: false,
          type: "value",
        },
        series: [
          {
            name: "任務完成率",
            type: "gauge",
            center: ["50%", "80%"],
            radius: "70%",
            min: 0,
            max: 100,
            splitNumber: 4,
            startAngle: 180,
            endAngle: 0,
            zlevel: 0,
            z: 9,
            data: [
              {
                value: 90,
                name: "保修指標率",
                itemStyle: {
                  color: "#FFDD01",
                },
              },
            ],
            detail: {
              formatter: function (params) {
                return "保修指標率";
              },
              fontSize: 18,
              color: "#ccc",
            },
            legend: {
              padding: 0,
              margin: 0,
            },
            pointer: {
              show: true,
              length: "60%",
              radius: "50%",
              width: "2.5%", //指針粗細
            },
            title: {
              // 儀表盤標題。
              show: false, // 是否顯示標題,默認 true。
            },
            markLine: {
              precision: 2,
            },
            axisTick: {
              show: false,
              splitNumber: 4,
              lineStyle: {
                width: 2,
              },
              length: -8,
            }, //刻度樣式
            splitLine: {
              show: true,
              length: -6,
              lineStyle: {
                color: "transparent", //用顏色漸變函數不起作用
              },
            }, //分隔線樣式
            axisLabel: {
              show: true,
              color: "#f9f9f9",
              distance: -20,
            },
            axisLine: {
              // 坐標軸線
              lineStyle: {
                // 屬性lineStyle控制線條樣式
                width: 16, // 儀表盤寬度
                color: [
                  //             顏色漸變函數 前四個參數分別表示四個位置依次為 右上左下
                  [
                    0,
                    new this.$echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#13d2a9", // 0% 處的顏色
                        },
                        {
                          offset: 0,
                          color: "#13d2a9", // 100% 處的顏色
                        },
                      ],
                      false
                    ),
                  ],

                  [
                    0.4,
                    new this.$echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#13d2a9", // 0% 處的顏色
                        },
                        {
                          offset: 0,
                          color: "#9ad8c9", // 100% 處的顏色
                        },
                      ],
                      false
                    ),
                  ],

                  [
                    1,
                    new this.$echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#9ad8c9", // 0% 處的顏色
                        },
                        {
                          offset: 0,
                          color: "#dadb1b", // 100% 處的顏色
                        },
                      ],
                      false
                    ),
                  ],
                ],
              },
            },
          },
          {
            name: "小圓形",
            type: "pie",
            hoverAnimation: false,
            legendHoverLink: false,
            zlevel: 0,
            center: ["50%", "80%"],
            radius: ["0%", "6%"],
            tooltip: {
              show: false,
            },
            z: 10,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 100,
                name: "2",
                itemStyle: {
                  normal: {
                    color: "#FFDD01",
                  },
                },
              },
            ],
          },
        ],
      };
      window.onresize = function () {
        myChart.resize();
      };
      myChart.setOption(option);
    },