Echarts在线免费图表

 
            const base64Img = {
   top1: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAATCAYAAACDW21BAAAABHNCSVQICAgIfAhkiAAAAeZJREFUSEu1VYtVwkAQ3IUCtAMDNIAVSGxAqcBYgVCBWoFYgViB2ADBCoQCyIsdYAGwzuZDcjlCjOC9x+MItzO7s3MbphpLfOeUqPmGkB6RjNgNhjXCo6NcJ0D89gNC7nMxfXaXkzoYdQkHIHzKCNYuu+Hs3wgVWPzOGF832A0h6aiKDG1wSOgMWi6Q3IrxoEvUuELmIeR5rQboqIQ4T5VyxtjNzxhTgB+0WKbtFTGfxA/X58hiXkYKAJil6ScAK6JNS7MuP1/sOVoAwhCEZ78iNM5GEROo0t+TIORszKOCRBZ8GXRVUgeSepAU5a+9sox3ODTh2d/LWBWgJ+bauhSAcCDdQSb0xpQ1SQq9YNzD4hKVVlsRWv9E10jJgug72qebrD8KwLf5+wVnpkYpU2+G824OSwfEC35fQzXj6hj3EMCSIcoAmT2bRinj0+fyqJUkrgeZtkirWxocJuG0M0PNFzlYVCYIZGcfVT5J7CHfVvp3EKLKbBUqbOMiM/p4rGUbqiipByrV/kjLvtcFwvxkOJBT5Bv3znK1NbzNyXMQqdW/yERFSDjVw1QYZePuD6RCH8RruNwekztfT/GLlnSo90i4V3CunYHIFxLEDBZ8NuNdQyANqvU+1KB0VGGL6W9Plyo9fgDABNMyzlBypwAAAABJRU5ErkJggg==',
   top2: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAWCAYAAAAmaHdCAAAABHNCSVQICAgIfAhkiAAAAf5JREFUOE+FVMFxnEAQnBHL02WIwHIEugwsRWA5AksR6Px1cSVUXPlrKQOcAY7AuggkR2AcAaevWVj3LHAFy3La190y29Mz0z0cVptnYjoj57TGfGribTFcqypJmfnWjTPGPHBYJTkxf3Y/4n9ZR9l7e1+lpyE3fzwx1Bq65tcCmjjLFxMZ87eOt6cs6KraPDLTBx9VHW/XyyXTtSTpQZJz1PsL9b3goqipvaf42zNYRko1Z/pNtpPfAelzJl5LQolFgkgSW5COTZJqUjnRvyg8CW6MoUt8tEH9KQ1TodvgAWArPI2ExQSkB7oHoxtfA4c7Q7RHgi8DwATkyJS8mCjnDuWkB5AlDUiA1cECu0FLdsSKmyen/i67MT8wwqul6SHCagli26zR3u+e8b6g0SuK0xJM7fR8dYHpBbtZOgWaEvU+uo8EDHcCeJC/9EaYTLwjIOPOu0DuADCpn+KdEt55Nw5eAvJNECC7WTldP2mn40yoT06430Am02PLQZ1zgfVTmfdk7rHexV9XIQdP4wdWSLBAeNLckqErTC+v2+BOUZOPjWr9Q+rg4gIfP3qleeRyUG1nQDg0JI0pTRt8FNTQ7zrOYMSRi+1yoqbwrcp5M9F4Ci4hxP0UpGekSK/xEzuD386YYJO1xKmro8M+cR8EVSL7xNKVo6kt7KLynP/rsBUfv7m1EwAAAABJRU5ErkJggg==',
   top3: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAWCAYAAAAmaHdCAAAABHNCSVQICAgIfAhkiAAAAdpJREFUOE+FVOFZg0AMTeoAdgPrBC1dwDqBdQJhAaETtJ2gxQXADXACywJSJ7DdoC5AfLkP+Dg46v05LhfevSQv4SD+OhLxlDpLSnpOV15Wm/242DDRuudHFHMQFykuXnqXQqc08u7V7u+KCY/op+ujZzwW8H8OYJMOPQSIcxLOJ2BIBKcDtgcX1TT0oishB/qIAQGbBeh+ksgvMWeguMflEfYx38g0eZ3n+g1X9YvMg/BNornayIAYICSOStL8jGENsS+Z8V0tQY7wmZFQjH2mfsrCAqmA9kBVgMEFsAuAVjWABTKcPDeeEG2Rr00DMqQBdYBzPMSu1pIpMXJQtONvvf2ehJ4/WL1KS+y/FREL7XqkkX0RniH2U1M9R2Rg86iKPeCu0YgqEOcTfla7tRSMRihzS/6aG4DYvaMg7cx3gRwF+FAQ1J/v2s5DQAMVzHvhVGA5ErpwsAB7e5lwUF6XwExVHCBW/owEqi6eoR8KKxygmxZgWqP0PlSaQjBb+KXtImj/oIJNF+vweXJU8KqpVm3dxWMeiU44K8HXQeUbs0QbsdXFZnoJGPVHpQMsRy6WkMLFAtGDmRmYFywSYa7c9n+Ws5S86eqomScOdS4BaOiaVVKmg8oV4h+LavThcizEdQAAAABJRU5ErkJggg=='
}
const closingbase64Img = {
   top1: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAYAAACXtf2DAAAABHNCSVQICAgIfAhkiAAAAjdJREFUOE+llI112kAQhHflApIOIuMCTCoIcgO2OyAVxK4gpILgCuJUELsBhDsgBZjgDkgBsPn2TggJn4A833tC6HSamZ39UelYVuYDkZMvvL4SsaWITkVWd/H4yVd+eF/vf9NiMUtBaWrTyjNA5ZeYvYjqCOAFoGWXmGr/Wovnh90zaYJJD0BZ6sW8D9kQpZ+IgPu+ZQst5qcHCbAmR+0fVBfc+S8/DiivXxPBK8GvNirvsQMCy8ZYdP4mAiy4B2xEktyWsGzSWwL87ljg+JG9YKlHHB/LvC+SDRWwmSeymSAreyM890r5j2W35GC8JQDDdKBEYPBRZnNAt6siPs4ekye9eB60vneRewk8RMumB60y+y26HmAxvdIUeMa3dr6JwBuISNbeMPXB4OM+ErO/gPdb+Svz93j/HYuVvASL7gH/wMNHUaE818VRJFH5VQK8RCr9oOTWZhCEkeBd+sh1yfVAwq/bfu5EkrAFHFcOjhK1PCGW5lydhj6wSfSLlxwKOwt+plzMl/Wjq6wasKqS1dCjjHuZi6IkfTYpz8Y3kIj8ROgwEmyjaApv/v/MYbeyXnGE7Oty1COs7uQjar8eZofBpRbUGhUhks7xEIdZ5TXFsLGzGZZ7v7ppju6Oce1NIjeJHvDke57aAzCUqwLcttGpkwRVXhI9YLeRoDFGYi/ku422iauTIJCE6vJy2ywf4ZlXy3ZOJcZEsxj2E5S9MfPESy4u/KVnvM69gqo9mqmYs59e/wDk0B7QXS1ZNQAAAABJRU5ErkJggg==',
   top2: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAQCAYAAAD0xERiAAAABHNCSVQICAgIfAhkiAAAAh9JREFUOE+Nk7FrFEEUxt83MykCglmERLTICpaCV0hAUBAkjaQIFqKVsbEQhKsEZRdX7kgnsbHQJvcnXJtGL4KFjZwIJ1iIgmKXPQUbd2aebzbZcOzd5dxqZ+Z7v3nve29A9S9/1DCkMyKOmei983bHKHORmC4w8UcHfkHRZn8sTjZQ35zLk44n9BRomz2/EcVxZhoohVvlmkhbmDWKsmE9dgxm8iSTzZiA20HM5Psg1Qj/3vMPDx6AsOOj9tP/gKVdgfUko626WGBvwx5YvfLE3/2J1stRzYQy06Zj+qvBDyS75UosoN8iHsgl76TsRYBOyVnPRm3xd/8bg4XN4Jsj/qJJXRfFeWb/WaQ/PfMnDcwL7Ezw8gDWPBK2D0ybxLziFTGYlyzT9hyw6pnOlhmAzlkyDWnE15mwUpBnsSEbSym9AJdRuUTsjwHqZEFuoz4iE8usG3+4Frj8DyeNxVTPpsKmHeTZQrgAZSnGLVurv1X16zzdkG5tSdoLVbyYvivrbhG1no0y1V56T4EXQ1dh8rQrgzlUrFYK6GvBIwCvq4DCq8sGzgTfdJ6su6jdrc4CSCt6zsxPDmBJNSfrIgptviKwx1WAdO+OI9evm232kodQ2JRx+SUZdwTWlMyOhslcVJcdVicPPoZXN2R0rGW+q5Wad1GrMxM2tRlMHwq29w301eoVlJ7JY1siD1jomyE4+Daro5LRaXkNf0Y9/Aca+/URxZAvFQAAAABJRU5ErkJggg==',
   top3: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABHNCSVQICAgIfAhkiAAAAWNJREFUOE+dk91VwkAQhe8k8Gw88C5WQDoQK9AOTAdQQqxAqUDogBJiB1iB8Z0ceE82493VSAJBfuYlZ7OZb+7M3AjqoeuAxyHKcgTVEJARzxtAlxBZwvMSnj8g13y3DYGuQ5hyDEUoAiYeDwVSBwbm6PQXgiJLBbg5ntr+hfrerUiREXx5qHr3rRBS55SbUOqsgc9XiYjcNcZ4EMILSBmh04sqpbYiYOKTIKr6jm5/BFZ1z3qcqkQVz+j2Yg58xo2lEE3h+wkKKhMMuISn89oRfNIbU+cLk00IHRISnQeBLqiCnrCGQ4DCvJ40E1vFDVHMACo0n3WuHwPlC1ubCuRtTwl731DiVfMCtLnrP+C6N3Y2h9zsfII8o0SML7EbC3zRBixmfzpjZpT5cA7IAXzvkUNfUvFv5Gt6orSqhv/BXDI0rrt5C6kyixVXKPHuT9mWXKXsQ/6UZTGHO/lZb7PyrtJvyHG6mqPy6TcAAAAASUVORK5CYII=',
   top4: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAAOlJREFUOE/NlN0NgkAQhGf5eZdgAViBtmAF2oIViBWIJdCBJdCB2oEl2ACxAPTWg3AICHdCfJDXnXw72ZmDoPv4PsFDnEAcw5kedVLqHZYQIixyDYM3Olg3qAVRywqYbScQYgthXeB6ZzX7BPVAarCEQGtmHOD6UTfIAKmfoR80AFLcjBFLR2HT0UBI42ZlmoSRkApGCGH7MSFLrzLiubZPhiETdj8EqW1ZGkln+yHOmK2l6tK7Rx2gQljF8gxlf1bNCnwLcnzzorLdeuH/gcDVowQokPaDUTcyJci2NQN5t1zX/z8yUVrzF4yCisfyvqRhAAAAAElFTkSuQmCC'
}

var index = 0
var result = [
   { name: '基地1', value: 58 },
   { name: '基地2', value: 53 },
   { name: '基地3', value: 35 },
   { name: '基地4', value: 30 },
]
const COLORS = ['#FFBF23', '#05F07D', '#01FCED', '#01FCED']
option = {
   tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器配置项。
         type: 'none', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
         axis: 'auto', // 指示器的坐标轴。
         snap: true // 坐标轴指示器是否自动吸附到点上
      },
      renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
      backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
      borderColor: '#333', // 提示框浮层的边框颜色。
      borderWidth: 0, // 提示框浮层的边框宽。
      padding: 5, // 提示框浮层内边距，
      textStyle: { // 提示框浮层的文本样式。
         color: '#fff',
         fontStyle: 'normal',
         fontWeight: 'normal',
         fontFamily: 'sans-serif',
         fontSize: 12
      },
      extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 额外附加到浮层的 css 样式

   },
   grid: {
      left: 74,
      top: 6,
      bottom: 0,
      right: 46
   },
   xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      // inverse: true,
      axisLine: {
         show: false // 隐藏y轴
      },
      axisTick: {
         show: false // 刻度线
      },
      axisLabel: {
         show: false // 隐藏刻度值
      },
      splitLine: {
         show: false // 不显示网格线
      }
   },
   yAxis: [
      {
         type: 'category',
         data: result.map((item) => item.value),
         inverse: true,
         position: 'right',
         axisTick: {
            show: false // 刻度线
         },
         axisLine: {
            show: false // 隐藏y轴
         },
         axisLabel: {
            formatter: '{value}%',
            textStyle: {
               color: '#01FCED',
               fontSize: '10'
            }
         }
      },
      {
         type: 'category',
         inverse: true,
         axisTick: 'none',
         axisLine: 'none',
         show: true,
         axisLabel: {
            textStyle: {
               color: function (param, index) {
                  const color = ['#FFBF23', '#05F07D', '#01FCED', '#01FCED']
                  return color[index]
               },
               fontSize: '12'
            },

            // formatter: function (params, i) {
            //   return `{img${i}|}` + params
            // },
            formatter: function (params) {
               if (index === result.length) {
                  index = 0
               }
               index++
               if (index - 1 < 4) {
                  return ['{a' + index + '|' + '}' + '  ' + params].join('\n')
               } else {
                  return ['{b|' + index + '}' + '  ' + params].join('\n')
               }
            },
            rich: {
               a1: {
                  backgroundColor: {
                     image: closingbase64Img.top1
                  },
                  height: 22,
                  width: 22,
                  align: 'center'
               },

               a2: {
                  backgroundColor: {
                     image: closingbase64Img.top2
                  },
                  width: 22,
                  height: 22,
                  align: 'center'
               },
               a3: {
                  backgroundColor: {
                     image: closingbase64Img.top3
                  },
                  width: 22,
                  height: 22,
                  align: 'center'
               },
               a4: {
                  backgroundColor: {
                     image: closingbase64Img.top4
                  },
                  width: 22,
                  height: 22,
                  align: 'center'
               },
               b: {
                  color: '#01FCED',
                  width: 22,
                  height: 22,
                  align: 'center'
               }
            },
            align: 'left',
            padding: [0, 0, 0, -60],
            show: true
         },
         data: result.map((item) => item.name)
      }
   ],
   series: [
      {
         name: '',
         type: 'bar',
         barWidth: 10,
         data: result.map((item) => item.value),
         itemStyle: {
            normal: {
               color: (item) => {
                  return COLORS[item.dataIndex]
               },
               barBorderRadius: [15, 15, 15, 15]
            }
         }
      }
   ]
}