Echarts在线免费图表

 
            const data = 65;
const name = "有功功率"

option = {
  backgroundColor: "#1B232E",
  grid: {
    top: "Center",
  },
  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: '#FBD241',
        fontSize: 20,
      },
      formatter: '{value}%'
    },
    data: [data]
  },
  series: [
    {// 进度
      data: [
        { name: name, value: data }
      ],
      name: name,
      type: 'bar',
      barWidth: 15,
      showBackground: true,
      backgroundStyle: {
        borderRadius: 0,
        color: "#252F3D",
        borderColor: '#252F3D',
        borderWidth: 0,
        opacity: 1,
      },
      itemStyle: {
        color: {
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [{
            offset: 0,
            color: '#FBD241' // 0% 处的颜色
          }, {
            offset: 1,
            color: 'rgba(251, 210, 65, 0.35)' // 100% 处的颜色
          }],
        },
        borderRadius: 0,
      },
      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: [30, 48],
        label: {show: false},
         symbolOffset: [0, 0],
        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
    }*/]
};