快捷導(dǎo)航

Echart結(jié)合圓形實現(xiàn)儀表盤的繪制詳解

更新時間：2022年03月17日 14:48:04 作者：Ciao_Traveler

EChart開源來自百度商業(yè)前端數(shù)據(jù)可視化團隊，基于html5?Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。本文將利用EChart實現(xiàn)儀表盤的繪制，感興趣的可以學(xué)習(xí)一下

效果圖

注意：使用startAngle: 200,endAngle: -20,在數(shù)據(jù)為零時，會出現(xiàn)一個實心圓，需要調(diào)整一下角度。

效果

代碼

var option = {
      series: [
        {
          type: "gauge",
          center: ["50%", "50%"],
          radius: "80%",
          startAngle: 190,
          endAngle: -10,
          // minAngle:10,
          min: 0,
          max: 100,
          z: 5,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#65e1fb",
                },
                {
                  offset: 1,
                  color: "#2e70f6",
                },
              ]),
            },
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          progress: {
            show: true,
            roundCap: true,
            width: 5
          },
          pointer: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 30
            }
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          anchor: {
            show: false
          },
          title: {
            show: false
          },
          detail: {
            valueAnimation: true,
            width: "60%",
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, "-5%"],
            fontSize: "14px",
            ffontFamily: "Impact",
            formatter: "{value} %",
            color: "#fff",
          },
          data: data
        },
      ]
    };

效果圖

主要使用：echarts中的儀表盤、和三個圓進行實現(xiàn)

代碼

var option = {
      series: [
        {
          type: "gauge",
          center: ["50%", "50%"],
          radius: "95%",
          startAngle: 200,
          endAngle: -20,
          min: 0,
          max: 100,
          z: 5,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#65e1fb",
                },
                {
                  offset: 1,
                  color: "#2e70f6",
                },
              ]),
            },
          },
          progress: {
            show: true,
            roundCap: true,
            width: 5
          },
          pointer: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 30
            }
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          anchor: {
            show: false
          },
          title: {
            show: false
          },
          detail: {
            valueAnimation: true,
            width: "60%",
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, "2%"],
            fontSize: 12,
            // fontWeight: "bolder",
            formatter: "{value} %",
            color: "#fff",
          },
          data: [
            {
              value: this.props.data || 100
            }
          ]
        },
        {
          name: "數(shù)量",
          type: "pie",
          hoverAnimation: false,
          clockwise: false,
          radius: ["70%", "70%"],
          center: ["50%", "50%"],
          data: [10],
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderType: "dotted",//dotted 虛線
              borderColor: "#78d7ff",// 虛線顏色
              opacity: 0.5,
            },
          },
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
              textStyle: {
                fontSize: "14",
              },
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
        },
        {
          name: "數(shù)量",
          type: "pie",
          hoverAnimation: false,
          clockwise: false,
          radius: ["65%", "65%"],
          center: ["50%", "50%"],
          data: [10],
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderType: "dotted",//dotted 虛線
              borderColor: "#78d7ff",// 虛線顏色
              opacity: 0.5,
            },
          },
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
              textStyle: {
                fontSize: "14",
              },
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
        },
        {
          name: "數(shù)量",
          type: "pie",
          hoverAnimation: false,
          clockwise: false,
          radius: "55%",
          center: ["50%", "50%"],
          data: [10],
          itemStyle: {
            normal: {
              color: "#53bcf9",
            },
          },
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
              textStyle: {
                fontSize: "14",
              },
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
        }
      ]
    };

到此這篇關(guān)于Echart結(jié)合圓形實現(xiàn)儀表盤的繪制詳解的文章就介紹到這了,更多相關(guān)Echart儀表盤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: