Echarts在线免费图表

 
            const data = 85;
const name = "离校办理进度"

option = {
  backgroundColor: "#001e45",
  grid: {
    top: "48",
    bottom: "56",
  },
  xAxis: {
    show: false,
    type: "value",
    boundaryGap: [0, 0],
    max: 100
  },
  yAxis: {
    type: 'category',
    axisTick: 'none',
    axisLine: 'none',
    show: true,
    position: "right",
    axisLabel: {
      padding: [20, 5, 0, 0],
      align: "right",
      verticalAlign: "top",
      textStyle: {
        color: '#ffedcb',
        fontSize: 28,
        fontFamily: "PangMenZhengDao"
      },
      formatter: '{value}%'
    },
    data: [data]
  },
  series: [
    {// 进度
      data: [
        { name: name, value: data }
      ],
      name: name,
      type: 'bar',
      barWidth: 8,
      showBackground: true,
      backgroundStyle: {
        borderRadius: 11,
        color: "rgba(255,250,239,0.3)",
        borderColor: 'rgba(255,250,239,0.3)',
        borderWidth: 8,
        opacity: 1,
      },
      itemStyle: {
        color: {
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [{
            offset: 0,
            color: 'rgba(255, 225, 167, 1)' // 0% 处的颜色
          }, {
            offset: 0.5,
            color: 'rgba(255, 250, 239, 1)' // 100% 处的颜色
          }, {
            offset: 1,
            color: 'rgba(255, 225, 167, 1)' // 100% 处的颜色
          }],
        },
        borderRadius: 11,
      },
      label: {
        show: true,
        position: "insideTopLeft",
        fontSize: 16,
        fontFamily: "Source Han Sans CN-Regular",
        fontWeight: 400,
        color: "#FFFFFF",
        padding: [20, 0, 0, 0],
        formatter: '{b}'
      },
      emphasis: {
        disabled: true,
      },
      markPoint: {
        symbol: "image://data:image/png;base64,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",
        symbolSize: [23, 34],
        label: {show: false},
         symbolOffset: [0, -20],
        data: [
          { name: '最大值', type: 'max' }
        ],
      }
    }, {
      name: '圆',
      type: 'scatter',
      data: [
        { name: name, value: data }
      ],
      label: "none",
      symbolSize: 9,
      itemStyle: {
        borderColor: '#FFFFFF',
        borderWidth: 2.5,
        color: "rgba(255, 225, 167, 1)",
        opacity: 1,
      },
      z: 2
    }]
};