Echart结合圆形实现仪表盘的绘制详解

2024-04-02 19:04:59 182人浏览八月长安

摘要

效果图注意：使用startAngle: 200,endAngle: -20,在数据为零时，会出现一个实心圆，需要调整一下角度。效果代码 var option = {

效果图

注意：使用startAngle: 200,endAngle: -20,在数据为零时，会出现一个实心圆，需要调整一下角度。

效果

代码

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中的仪表盘、和三个圆进行实现

代码

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: "数量",
          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: "数量",
          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: "数量",
          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,
            },
          },
        }
      ]
    };

到此这篇关于Echart结合圆形实现仪表盘的绘制详解的文章就介绍到这了,更多相关Echart仪表盘内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Echart结合圆形实现仪表盘的绘制详解

本文链接: https://www.lsjlt.com/news/142881.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341