首页 前端知识 Echarts 仪表盘样式修改 gauge类型

Echarts 仪表盘样式修改 gauge类型

2024-08-16 22:08:06 前端知识 前端哥 552 69 我要收藏
option = {
  series: [
    {
      type: 'gauge',
      // 仪表盘的外圈 渐变色
       axisLine: {
        lineStyle: {
          width: 130,
          color: [
              [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0.1,
                  color: "rgba(54, 240, 151, 0.2)"
                },
                {
                  offset: 1,
                  color: "rgba(90, 63, 255, 0.2)"
                }
              ])
            ]
          ]
        }
      },
      axisTick: {
        distance: -112,
        show: true,        // 显示小刻度线
        length: 15,        // 刻度线长度
        lineStyle: {
          width: 5,       // 刻度线宽度
          color: 'rgba(255, 255, 255, 0.4)'   // 刻度线颜色
        }
      },
      splitLine: {       // 长刻度线
        distance: -112,
        length: 30,
        lineStyle: {
          width: 5,
          color: 'rgba(255, 255, 255, 1)'  
        }
      },
      // 刻度数值
      axisLabel: {
        distance: 140,    // 数值与刻度的距离
        color: 'rgba(255, 255, 255, 0.6)',
        fontSize: 40
      },
      // 中心圆
      anchor: {
        show: true,
        showAbove: true,
        size: 45,    // 中心圆的大小
        itemStyle: {
          borderWidth: 15,   //中心圆的边框大小
          borderColor:"#fff", // 边框颜色
          color:"#000"      // 中心圆颜色
        }
      },
      // 指针
      pointer: {
        width:15,
        length: '65%',
        // offsetCenter: [0, '5%'],  指针位置 默认圆中心
        itemStyle: {
          color: '#ADE1FF',
        }
      },
      title: {
        show: false
      },
      // 文字
      detail: {
        valueAnimation: true,
        fontSize: 50,
        formatter: '{value} %',
        color: '#3DFFDC',
        offsetCenter: [0, '70%']  // 文字的位置
      },
      data: [
        {
          value: 40
        }
      ]
    },
    {
      type: 'gauge',
      // center: ['50%', '60%'],  // 仪表盘位置(圆心坐标)
      // startAngle: 200,   // 仪表盘起始角度,默认 225。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。
      // endAngle: -20,     // 仪表盘结束角度,默认 -45
      // min: 0,           // 最小的数据值,默认 0 。映射到 minAngle。
      // max: 60,         // 最大的数据值,默认 100 。映射到 maxAngle。
      // clockwise: true,        // 仪表盘刻度是否是顺时针增长,默认 true。
      // splitNumber: 10,        // 仪表盘刻度的分割段数,默认 10。
      itemStyle: {
        color: '#FD7347',
      },
      axisLine: {
        lineStyle: {
          width: 18,
          color: [
            [0.35, '#36F097'],
            [0.75, '#1ED6FF'],
            [1, '#5A3FFF']
          ],
          // shadowBlur: 20,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
          // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
        }
      },
      pointer: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      detail: {
        show: false
      },
      data: [
        {
          value: 20
        }
      ]
    }
  ]
};

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15900.html
标签
评论
发布的文章

XML与JSON的使用

2024-08-23 21:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!