Echarts在线免费图表

 
            const value = 80
const maxvalue = 100;
let percent = (value / maxvalue) * 100;
percent = percent.toFixed(0);
let innerWidth = 50;
let innerRadius = "50%";
const detail = {
  show: true,
  color: "#fff",
  fontFamily: 'sans-serif',
  fontSize: 30,
}
const outerColor = [[1, new echarts.graphic.LinearGradient(1, 1, 0, 0, [
  {
    offset: 0,
    color: "#18E0E9",
  },
  {
    offset: 1,
    color: "#308CE8",
  },
])]]
const innerColor = [
  [value / maxvalue, new echarts.graphic.LinearGradient(0, 0, 1, 1, [
    {
      offset: 0,
      color: "#18E0E9",
    },
    {
      offset: 1,
      color: "#FFC61A",
    },
  ])],
  [1, "rgba(28,128,245,0)"]
]
const pointerColor = {
  type: 'linear',
  x: 0,
  y: 0,
  x2: 1,
  y2: 1,
  colorStops: [
    {
      offset: 0,
      color: '#FFC61A'
    },
    {
      offset: 1,
      color: '#18E0E9'
    }
  ]
}
option = {
      backgroundColor:"#000",
  tooltip: {
    show: false,
    formatter: "{a} <br/>{b} : {c}%",
  },
  series: [
    {
      type: "gauge",
      name: "外层辅助",
      radius: "78%",
      startAngle: "180",
      endAngle: "0",
      splitNumber: 1,
      pointer: {
        show: false,
      },
      detail: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: outerColor,
          width: 10,
          opacity: 1,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: "#fff",
        distance: -50,
      },
    },
    {
      type: "gauge",
      radius: "80%",
      startAngle: "180",
      endAngle: "0",
      splitNumber: 15,
      pointer: {
        show: false,
      },
      detail: {
        show: false
      },
      title: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        length: 30,
        lineStyle: {
          color: "#fff",
          width: 5,
          cap: "round",
          type: [2, 20],
          dashOffset: 8,
          join: "round"
        },
      },
      axisLabel: {
        show: false,
      },
      animationDuration: 400,
    },
    {
      name: "灰色内圈",
      type: "gauge",
      z: 10,
      radius: innerRadius,
      startAngle: "180",
      endAngle: "0",
      axisLine: {
        show: true,
        lineStyle: {
          color: innerColor,
          fontSize: 20,
          width: innerWidth,
          opacity: 1, //刻度背景宽度
        },
      },
      detail: detail,
      data: [value],
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      pointer: {
        show: true,
        length: "100%",
        width: 5,
        itemStyle: {
          color: pointerColor
        }
      },
      axisTick: {
        show: false,
      },
    },
  ],
};