echarts-仪表盘

最新推荐文章于 2024-05-28 15:45:01 发布

勇气大爆炸

最新推荐文章于 2024-05-28 15:45:01 发布

阅读量167

点赞数 3

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_38260470/article/details/137557804

版权

文章详细描述了如何使用ECharts库创建一个具有渐变颜色、特定尺寸和指针的自定义仪表盘，展示了数据值43的进度条配置。

摘要由CSDN通过智能技术生成

const options = {
        series: [
          {
            radius: "95%", // 仪表盘的大小，可以是像素值或者百分比
            type: "gauge",
            progress: {
              show: true,
              width: 8,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(70, 111, 245, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(79, 224, 232, 1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            axisLine: {
              lineStyle: {
                width: 8,
                color: [[1, "rgba(7, 44, 111, 1)"]],
              },
            },
            axisTick: {
              show: true, //是否显示刻度
              distance: 2,
              itemStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: 2,
              length: 5,
              lineStyle: {
                width: 2,
                color: "#fff",
              },
            },
            axisLabel: {
              distance: 10,
              color: "#fff",
              fontSize: 12,
            },
            // 表盘指针中间的固定点
            anchor: {
              show: true,
              showAbove: true,
              size: 12,
              itemStyle: {
                color: "#4572F3",
                borderColor: "#F7F9FD;",
                borderWidth: 2,
              },
            },
            // 指针
            pointer: {
              width: 6,
              length: "80%",
              offsetCenter: [0, "-10%"], //指针位置 默认圆中心
              itemStyle: {
                color: '#C9D6FF'
              },
            },
            title: {
              show: false,
            },
            detail: {
              fontSize: 0,
            },
            data: [
              {
                value: 43,
              },
            ],
            splitNumber: 5,
          },
        ],
      };