echart仪表盘显示问题

新手上路,请多包涵
echart仪表盘设置成半圆,再设置distance将刻度值放在盘里面,首尾会有部分超出,如何解决。急急急!谢谢大佬们!

`var option = {

    toolbox: {
      show: false
    },
    tooltip: {
      formatter: "{a} <br/>{b} : {c}%"
    },
    series: [{
      startAngle: 180, //开始角度 左侧角度
      endAngle: 0, //结束角度 右侧
      name: "",
      type: "gauge",
      radius: 100,
      axisLine: {
        // 坐标轴线
        lineStyle: {
          // 属性lineStyle控制线条样式
          color: [
            // [0.2, "lime"],
            // [0.8, "#1e90ff"],
            [1, "#487DFF"]
          ],
          width: 20,
          // shadowColor: "#fff", //默认透明
          // shadowBlur: 10
        }
      },
      axisLabel: { // 坐标轴小标记
        distance: -18,
        textStyle: { // 属性lineStyle控制线条样式
          color: '#000',
          fontSize: 10, //改变仪表盘内刻度数字的大小
          shadowColor: '#000', //默认透明
        },
        formatter: function (value) {
          return value / 10 + 'k';
        }
      },
      splitLine: {
        // 分隔线
        length: 23, // 属性length控制线长
        lineStyle: {
          // 属性lineStyle(详见lineStyle)控制线条样式
          width: 1,
          color: "#487DFF",
          // shadowColor: "#fff", //默认透明
          // shadowBlur: 10
        }
      },
      itemStyle: {
        //指针样式
        normal: {
          color: "#fff"
        }
      },
      pointer: {
        //指针长度与宽度
        width: 2,
        length: "55%"
      },
      axisTick: {
        show: false
      },
      detail: {
        offsetCenter: [0, "28%"], // x, y,单位px
        textStyle: {
          // 其余属性默认使用全局文本样式,详见TEXTSTYLE
          // fontWeight: 'bolder',
          fontSize:38,
          color: "#FFDB4F"
        }
      },
      data: [{
        value: 30,
        name: ""
      }]
    }]
  };`

mingzi.jpg

阅读 3.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题