Echarts在线免费图表

 
            var colors = ['#5BE6FC', '#FC3147', '#00E485', '#F7C500', '#0673C6'];
var data = [5436, 3106, 4560, 968, 4321];
const timg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAABACAYAAACZUm7XAAAABHNCSVQICAgIfAhkiAAABENJREFUaEPtWE1y0zAUfmobtsAJaGfYU05A2HUaM7R7ZggnoF2xJJwAegLKCShD07IjXbKiPQHpCShb6kR8T7IdSf6R7CRDFn4zrh1Xlj5971+CFimyd04kdogmuyTO8TyfiPk+d75uwTWls2WuZc7PQOutfo6KR7TMtcx5GWiDsJeikgEtcy1zfgbaIOznqE1fbYPT0EpWKgjLnU2izgO9FdnF9QJ960P0rW+INn4Q3V6T+DZuuFWqH0rk7jYAvMSCACPwbIrED54yvSvQl/gzwv0TiTN+DpZwcDICGHqrQTUWgKR3JE757hU/OMXU2vsKUBfJKumC9/A7ZfRJCQKMjV/5VF4NTj7bgzo+YgFeMBH5Bw8nAHxC4ivuFSL38N0ETE8xD+ESd43RN/gNgOVzlIOT0WtM9MFeGnZDk4Fvx4VwlfOsDxJ7NYccQM1HRd8Ug5MRg2JwKVvXYHCvrkEXg1QOBcZF4uVq1BEAHrjj8+Dkbh8qY1WmcoWw0MV8UMOCRKk7HmG2R7MZp1Dx2bG5gg1OG/9Pg7EvJIZsL8sR2WMGnxsAH5vamYHTu/mFganxL54xd4s5BuUYQR0AtZYMcNEAvzmOQdgjJ9uNDL8ux9pREJwzT+Y4yFgScDnW8vqvu2at8badg7WNLWZPMyct1pAPh9hNieTssg6MqWVT1peyB5VmHqzYS8D1YGsiAST2K4OrTmPf60Ayxj4tTV064H9OzGoMgrYEWUzA1sTQyAYFEJYFTmmwx1kjySIxg+sh+AnOnfxfVA7DfiUrywVnhBZ5CHDRCGCSBB3gCEsFZyWACwccldtESqcNjiuSQTHTU9iwlWl4WPX8ztysVsMZYriwp3K1JuBCUgLcekFq48o4B9wDzsxQ8pKZ47JVizgNqO+W5K0zzWR45gWHFEdONSHhUKqML5IQszHBmcGviVrXHHBTBlfm8TXUSlfzOkRl1Cn4Z12HWOlQstJB2Cowb+Cx9/9fhoh+Y+0kfXL6YrEqgpVI/KoyKiqZVEVQyl6+OAx0Ck8BayUD1XinJROX6LfjWUUQkGMDIQUNs4pN3kRnc1ZsKtWaBSchHcUoDJsfwgSBUutymb7BTVVaqjlluhrkssd5s4O4tMCW0EWs10Thmh4ISfTHHfQuboOjALqtIY4dxOl+MAt1B8qIK9+k9WR1olgwTqICmuolMJhjjHfla6rTneePI+AsEr1FvfO1QiL1+R4YE7C1TAKPIzKAZubIXh6jn4XBNnAUHYLQF7tFgTxE6OKzmZwEHIFNAcg9upKo9fm6c1HpMEp9f9ECCNgVX+5RGt5VHCQGFJfK1QEw7TNyGxzpN2ybAiFIAlB2HNstVC0Ryvu479OAH9zMDnmhQQXIEhzWa91zLOzY1V1Sh5s+XjNY4wirFBtXyzCBKcJSPYcKZ65obR3dcSm1shdCpZIbY6iYJUaebuA8yVr/AKbKTpW9pByXAAAAAElFTkSuQmCC'

var option = {
  backgroundColor: '#002653',
  grid: {
    top: "5%",
    left: "18%",
    right: "8%",
    bottom: "5%"
  },
  xAxis: {
    show: false,
    type: 'value',
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      verticalAlign: 'top',
      color: "green",
      fontSize: 15,
      formatter: (params) => {
        return `{a|}${params}`
      },
      rich: {
        a: {
          width: 20,
          height: 20,
          backgroundColor: {
            image: timg,
            // image:'./tpng'
          }
        }
      },
    },
    axisTick: "none",
    inverse: true,
    axisLine: {
      show: false
    },
    data: ['设备总数', '保养预警', '保养次数', '寿命预警', '维修次数']
  },
  series: [{
    type: 'pictorialBar',
    barWidth: 10,
    legendHoverLink: false,
    silent: true,
    symbolRepeat: true,
    symbolMargin: 4,
    symbol: 'rect',
    symbolClip: true,
    symbolSize: [8, 25],
    symbolPosition: 'start',
    label: {
      show: true,
      position: 'right',
      formatter: '{c} m',
      fontSize: 16,
      color: '#e54035'
    },
    itemStyle: {
      color: '#ffe68f'
    },
    data: [5436, 3106, 4560, 968, 4321]
  },
  {
    type: 'pictorialBar',
    barWidth: 10,
    legendHoverLink: false,
    barGap: '-100%',
    silent: true,
    symbolRepeat: true,
    symbolMargin: 4,
    symbol: 'rect',
    symbolClip: true,
    symbolSize: [8, 25],
    symbolOffset: [0, 35],
    symbolPosition: 'start',
    label: {
      show: true,
      position: 'right',
      formatter: '{c} m',
      offset: [0, 40],
      fontSize: 16,
      color: 'green'
    },
    itemStyle: {
      color: 'red'
    },
    data: [5436, 3106, 4560, 968, 4321]
  }
  ]
}