Echarts在线免费图表

 
            var bgImg =
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbYAAAARCAYAAACxZ4mSAAAAAXNSR0IArs4c6QAABANJREFUeF7t3O9rG3UcB/D35y5dmjjbLq5JLJsynOgqA2c721lW7HCgCCLI9gf4QHFbQrOBj/dYWFOaqugD/wCHIIIoFKWsiza46kCWFeZQ6ixJusW0m+mP3N1HkiWhe3aPZN69A3lw3/t87+79+jz4EDgi8MFn/w0N7irhgOHA9EFcRqQABSjgawHxQ/rBy/qM7aD8y6is+CEvM1KAAhTws4DnB9vQvMYAdOWG5YafG83sFKAABfwi4OnBduRzDTlP4Om7S1jMn5QtvzSVOSlAAQr4WcC7g01Vhi/h2UoNpcVX5I6fm8zsFKAABfwk4NnBduiy9hmC0MKI3PRTQ5mVAhSggN8FPDnYBq5oWKvY32UjPzsmlt+bzPwUoAAF/CTgvcGmKoez6K/V8NfVMan4qZnMSgEKUIACgOcG29C87hFFYP6I/MEGU4ACFKCA/wQ8Ndj6r+nO0Cr2LdxCHifF9l87mZgCFKAABR4YbHsmNGQZSEIRqtOoYsNcw9RyBHbcRgLAzub6ll1D5vZNbEQPIGEAXY11gbWpmK6kpIITasZGcFoUkfo5R+AELHy0fA534mm8B0G0ya92DZ+svC+FaFrfMYC+xroB3bLwWfmc/OmqTarG4A/or5hY+m1Y1lztYREFKEABCnhO4IHB1juhr5qC4VZKB5gppSQbS+sxAUa3pZ8tpGS2d1JHTcWxdr0gWxqXmfpxbFKHRPHatj0/FVLy9e60vhAA3th2j6ullHwZy+hBsfBWu15wrTAuF92KH8rqk4YDXTgqS273sI4CFKAABbwn0B5sXRMa6RScNnD//xQVqBRXMR2JINxhIyFAR/OX191SBZnYI+hAAEkBgk2WamEVUzgvGzivnfFuJAGEm9fahIWp4j+oxXuQgOLR5nqtZiJTLqMa68YZAXoa9wDszSCmV0/J327IB2a0W8LYe+Ul5CHiuNnDGgpQgAIU8KZAe7DFJ/UEFM+1YmoAXxQT8ms0rW8awPOtdQv46nZKfo6n9XUAh9v1gm+K45KrH0cn9bihGGmds018t5KUuXhaXwZQ/zY+ClwqpuT7aFpHDOB4u14xv3JWvnVFrmoO/Ij+9U38nh+Te672sIgCFKAABTwr0BhskQu6d0cAb8O5/5akAyyXUvJp7wcaNzvwLlpvTypKhRQ+7ruAx6wAThkKozGgBOViFh/iotg9ae0JCs7U30xsXmutdB2Z3U+h0wwiIYodTc17BROZvjJMuwtJEXQ21gXrBQdTOCvrbtRfzOk+qaKWG5NbbupZQwEKUIAC3hb4X78VeXBOd4UVj+eO4jpE1NutYjoKUIACFHAjIENzOuCm8GGssRSKMBYXBqX6MD4fn4kCFKAABf57gX8BSq0+Tbg1W4gAAAAASUVORK5CYII="


var datalist = [
  {
    name: '检测设备A',
    value: 100
  },
  {
    name: '检测设备B',
    value: 80
  },
  {
    name: '检测设备C',
    value: 60
  },
  {
    name: '检测设备D',
    value: 40
  }
]
option = {
  backgroundColor: '#0f4581',
  //你的代码
  grid: {
    left: "10%",
    right: "10%",
    bottom: "10%",
    top: "10%",
  },
  xAxis: {
    show: false,
    type: "value",
  },
  yAxis: [
    {
      type: "category",
      inverse: true,
      axisLabel: {
        color: '#fff',
        fontSize: 14,
        margin: 10,
        formatter: (name, index) => {
          const id = index + 1;
          return `{count|TOP}{num${index}|0${id}}`;
        },
        rich: {
          count: {
            width: 32,
            height: 22,
            fontStyle: 'italic',
            fontWeight: 'bold',
            align: 'center',
            color: '#ffffff',
            fontSize: 16,
          },
          num0: {
            width: 22,
            height: 22,
            fontStyle: 'italic',
            fontWeight: 'bold',
            align: 'center',
            color: '#f43339',
            fontSize: 16,
          }, num1: {
            width: 22,
            height: 22,
            fontStyle: 'italic',
            fontWeight: 'bold',
            align: 'center',
            color: '#ffff64',
            fontSize: 16,
          }, num2: {
            width: 22,
            height: 22,
            fontStyle: 'italic',
            fontWeight: 'bold',
            align: 'center',
            color: '#3b9bf8',
            fontSize: 16,
          }, num3: {
            width: 22,
            height: 22,
            fontStyle: 'italic',
            fontWeight: 'bold',
            align: 'center',
            color: '#0ec289',
            fontSize: 16,
          },
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: datalist.map(el => {
        return el.name
      }),
    },
    {
      type: "category",
      inverse: true,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        verticalAlign: "top",
        textStyle: {
          color: "#ffffff",
          fontSize: "14",
          padding: [20, 0, 10, 0],
        },
      },
      data: datalist.map(el => {
        return el.value
      }),
    },
  ],
  series: [
    {
      name: "值",
      type: "bar",
      itemStyle: {
        normal: {
          // barBorderRadius: 30,
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "rgba(24, 144, 254, 1)",
            },
            {
              offset: 0.5,
              color: "#16599b",
            },
            {
              offset: 1,
              color: "#0f4581",
            },
          ]),
          barBorderRadius: 2,
        },
      },
      barWidth: 8,
      data: datalist,
      label: {
        show: true,
        // offset: [30, -16],
        padding: [20, 0, 10, 0],
        verticalAlign: "top",
        color: '#75d8ff',
        fontWeight: 500,
        position: 'left',
        fontSize: 16,
        align: 'left',
        formatter: function (params) {
          return params.data.name;
        }
      },
    },
    {
      type: 'pictorialBar',
      barWidth: '18',
      z: 99,
      silent: true,
      barCategoryGap: 20,
      symbol: 'image://' + bgImg,
      symbolOffset:[-60, 8, 50, 0],
      symbolClip: false,
      symbolBoundingData: 110,
      symbolPosition: 'center',
      symbolSize: ['100%', '100%'],
      label: {
        show: false,
      },
      data: [100, 100, 100, 100]
    }]
};