Echarts在线免费图表

 
            
const data = [
   { name: '张三', value: 123 },
   { name: '里斯', value: 103 },
   { name: '王武', value: 93 },
   { name: '李六', value: 80 },
]
const xdata = data.map((v) => v.name);
const ydata = data.map((v) => v.value);
const icon =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAABI0lEQVQokWXSv0qdQRAF8N+93gQlQQmYzkqwsUlp4zv4KLY+kW2wsdFHkHSKoo2KgkbFP4REo/fKMbPwXTOw7H7fzpk55+z07Iyg51+0ffRuH4tBJU7UOauPIZ5rvXgHbqAP+ITPmCrQH/yq9bcLbpUn8QXLmMN+JV/hErf4XeBh6xTQLL5hFYfYwh6OcIqfeMBTl94MvhbtBczjAOuVky5P0dnvaIuW6Y7emLOINaxU0Y+R00DNwb7/I+YsFf1e65B46bjVjXts4DuOi+JoUDbmIwnXBXjEjzJjFye4K01v7gWUpBucYRub5dYFzqtYnEveMGMUHc2EiI2GRN4l1cMg1DMdefQ3TV16uUzVXDaL2zSMjVED5SLt41D+BZh9fGjxCo/fXmSu3pv5AAAAAElFTkSuQmCC';
const icon1 =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAABSUlEQVQokV2Sv0oDQRDGf3u7EYNBEWJnJdjYWNr4Dj6KrU9kqzY2+gx2iqKNioJ/0QQxudztyneZlUsGlt27mW9mvm/GpeExgGNq+U5z94wFC/T21imACFR2aubAGdQBloAe0DXQCPixM2mDc+ZFYLWq2SWxHgLXFvwOvAJfwK+BY64kUJ/EdlWzHxO3IXBWOK6AO+AReAOGQNlubwXHmsrHyGZZsuE9N8Fz6FwToyqleBYtbl0Hyy2+vq7ZKksOJhV7TVJYEJ0MygoW8/Im6MXITh3p55EE80mZUZqS/zfnGATPifccAffWYgomoz4GwIcBxsFzITGAS+AB+DZOjXoCjYHPlHgqCs47gVPnGrVegGdLJuUUF7VG4qGBSgSR1YBlmouyqwMNWtuhoTec2u3JqaxyZonzNsysUQbJofJSSP8E1D27tMAfmOl6GGh2/cMAAAAASUVORK5CYII=';
const barColor = {
   0: ['#F7ECB0', '#FFE86C'],
   1: ['rgba(0, 202, 252, 0.3)', 'rgba(0, 202, 252, 1)'],
};

option = {
   backgroundColor: '#000',
   grid: {
      left: 40,
      bottom: 80,
      right: 70,
      top: 90,
      containLabel: false,
   },
   yAxis: [
      {
         inverse: true,
         data: xdata,
         axisLabel: {
            textStyle: {
               fontSize: 12,
               align: 'left',
               fontFamily: 'MiSans-Normal',
            },
            padding: [0, 0, 15, 10],
            formatter: (name, index) => {
               const _index = index + 1;
               if (index === 0) {
                  return `{icon1|}{num|TOP ${_index}  ${name}}`;
               }
               return `{icon|}{num|TOP ${_index}  ${name}}`;
            },
            rich: {
               icon: {
                  width: 7,
                  height: 8,
                  backgroundColor: {
                     image: icon,
                  },
               },
               icon1: {
                  width: 7,
                  height: 8,
                  backgroundColor: {
                     image: icon1,
                  },
               },
               num: {
                  padding: [0, 20, 0, 5],
                  width: 25,
                  color: '#fff',
                  align: 'left',
                  fontSize: 12,
                  fontFamily: 'Mohave-BoldItalic',
                  fontWeight: 400,
               },
            },
         },
         offset: 0,
         splitLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false,
         },
      },
      {
         inverse: true,
         data: ydata,
         axisLabel: {
            textStyle: {
               color: '#00C9FB',
               fontSize: 12,
               fontFamily: 'MiSans-Medium',
               align: 'right',
               padding: [0, 0, 15, 0],
            },
            formatter: (name, index) => {
               if (index === 0) {
                  return `{num1|${name}次}`;
               }
               return `${name}次`;
            },
            rich: {
               num1: {
                  color: '#FFE86C',
               },
            },
         },
         offset: 0,
         splitLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false,
         },
      },
   ],
   xAxis: {
      show: false,
   },
   series: [
      {
         z: 1,
         type: 'bar',
         data: ydata,
         barWidth: 7,
         showBackground: true,
         backgroundStyle: {
            color: 'rgba(95, 123, 149, 0.2)',
         },
         itemStyle: {
            color: function (params) {
               const { dataIndex } = params;
               const colors = dataIndex === 0 ? barColor[0] : barColor[1];
               return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                     offset: 0,
                     color: 'rgba(0, 0, 0, 0)',
                  },
                  {
                     offset: 0.5,
                     color: colors[0],
                  },
                  {
                     offset: 1,
                     color: colors[1],
                  },
               ]);
            },
         },
      },
      {
         type: 'pictorialBar',
         data: ydata,
         z: 10,
         symbol: 'circle',
         symbolRotate: null,
         symbolSize: [8, 8],
         symbolPosition: 'end',
         symbolOffset: [4, 0],
         itemStyle: {
            color: 'rgba(255,255,255,1)',
         },
      },
      {
         type: 'pictorialBar',
         data: ydata,
         z: 9,
         symbol: 'circle',
         symbolRotate: null,
         symbolSize: [16, 16],
         symbolPosition: 'end',
         symbolOffset: [8, 0],
         itemStyle: {
            color: 'rgba(255,255,255,0.1)',
            borderColor: 'rgba(255,255,255,0.3)',
         },
      },
      {
         type: 'pictorialBar',
         data: ydata,
         z: 8,
         symbol: 'circle',
         symbolRotate: null,
         symbolSize: [26, 26],
         symbolPosition: 'end',
         symbolOffset: [13, 0],
         itemStyle: {
            color: 'rgba(255,255,255,0.15)',
            borderColor: 'rgba(255,255,255,0.3)',
         },
      },
   ],
};