Echarts在线免费图表

 
            // 修改自https://www.isqqw.com/add?from=35428
const dataSource = [
   {
      value: '8',
      name: '千金',
   },
   {
      value: '1',
      name: '南浔',
   },
   {
      value: '2',
      name: '双林',
   },
   {
      value: '3',
      name: '和孚',
   },
   {
      value: '3',
      name: '善琏',
   },
   {
      value: '1',
      name: '开发区',
   },
   {
      value: '6',
      name: '石淙',
   },
   {
      value: '3',
      name: '练市',
   },
   {
      value: '5',
      name: '菱湖',
   },
];

const img3 =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAPCAYAAABut3YUAAACjklEQVRIiZ3Uv25cVRAG8N/YFpFw7GSNDAhREC8VDUiOoKGMW8o8gl2y3foR4m4pzSMkEv9KTINSIKG4oEkVb0AICaKQjZwEKUAYinPu9d31ggkj3T13Z+bMfOf75tzITPMsfHRUXgb91pmjA2y0vhxtYh+bNeMQO2JweKpgjq5hG72adzV9OO6mLMxFcmIbcrT/L/Hr2MDl+mzgYA6QKxjiBvo171Tds8DAdi0222CjFt0Tg8PKxh56Nda1CXaxKwZjhZnZHEtnABl3TtGfiTXFJjNNm9iJBAXoYecQm+3/jp3FzBgfO1uu/2aF4SNlbnafFwwx2Kmgts2h9rksBl9hrdb7XzMDO3Xtgmlk6HV8vZlYsRxdkaNhBTRRJNo0Y3Hhy891L3dIieOt748wFoOtWnBfYWfcudoN5Vt1+0FtuFbjQ2WOerimSHMDtzBZPbjUb/qFsMD878wpO5Gra1er71Z9xh1gKoChGOwpszdUZmZS9mYlIMq6/PVnC1gRXsCv+KskqIhPw21jWdeoOc2GmhHI1teNt3UWkpeC3/Fo6el5bwsrNfgbjjJNRN1XC2SnRVR4mQVIUzobAO2J//lAuIg3gxeRmR4v5QV9Yv2khMuVoTvJXTxsdlcIbUtJtkx0c6bfO76LuET0yfVOLHE/Fu99uix8IL1HnBOZpUM9U3gs8y5+xi94gOPi9yee4pmwKOOc8iE9j1Wska/gVeUmLpsSLQJ/4Bvyi1h88kkj/greF96V3hHW6kBEq3zz21AzHUtTLDUD1VWp0TsfEN+R38q4KfIRxOKz6zNSZsEWXibekvmG8DrxGtbJXqV7uTK4Wg6YcFyWeCLyoXJr7hM/kT/iB9wm7k0LWPb/DS9M/Btd/0fjAAAAAElFTkSuQmCC';
const img2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAPCAYAAABut3YUAAAClUlEQVRIiZWUzU4UURCFv4MT1CDKiP9pYxhdudEEohuXuHWnkReAxBeQR5D4BPAALnTnFlbGhTEQd7owjC7aREVnCGqMv8fFrW7ujBORk77p7ltVt06dqm5sM3CVrLtknQwuWc73XDLpklWXONaqSyYZAJfMuqQTfh2XTPfnHBoUmKHlksV/2O8DLWAqVgtYHkCkCSwCa8BhoBvvPdiJDMCsS6YHJGhF8gUVrKlgDVgAmmHrxzwwr4IusBKxPWjsQKQdQYvA2T5bdVg32+tmtna1GQQWMr/p3F5hJ2XawBI7t+u/4bJu7dxuyaCCuSA1ywBpd0lkFrgOLKlgZddkAlUVOZlK5ma21+yz5USmSe1eiQL/gmZm9uUh9dO9u9/WgbYKrsZhiyR12irS/MRn3oTkQ3xJKjgc9ttAVwVLme/ZmCFmbu4DbefOlDHJUq0+1tvtynEj9lZjtTNiAHeA26FKK8hU/xojR96UW7fm9g4Bo4ZhwUfDb4JORS+HIZ2hbR3Vb487NpKyfWOrDhIM2Ywjf8f61Dg+7guI0bB/NX4JbKZoIYPjdAmMEcoamqcXuHZMN7u3suodmphziP3BfKtRnHQLcyzTYQqxgVmH36+ATar0Ajs9W1WlQUggu5ekkoqutfMYMAE6Bz4Ccrokw4aWHzRGsK9ZXMYMC7CIGxi+KM3CW+Ad0AFtGX8W/AS+Ab8weyz2ChqYA4iDpF//cdAJ8IThQN7yoPgDeIJ5qBeP6hkeRVzBXAIuIsbrwqvAkF1IPYMRA5C8VVvycYr2GlmgDuYZ8BR4DHwCUOd5agK1FDHZcAw4D5wBTgOnjI8iNYXHbEbC75BTi2y0ldqpL7Y3hbrgD6A3hhJ4DTwXfl/NVVYUfwAziEz38N+3aQAAAABJRU5ErkJggg==';
const img1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAPCAYAAABut3YUAAACUUlEQVRIib2TvU+TURjFf6dWiUGQWmnUOEhhcjAmEF1cTGQ2vIkmDq7wJ7AxOIl/gXR3cXgdGWB00EQGFycsMSZGBS0C0ajgceh929uXSmMwnuTm5vm6z3k+rmzTFU/0GkAJo5nKKUtANdM5ZRxYAMaDywowo4SVbk865TFwC6gx5Zm8vdCdSQtVpywcYH8MVIGJcKrAUg8if0QvMgDTTrnR5fFqSD6vhJXQjXmgFGx5lIDJw5Cph7tbd7KEjUjXyNlaUMKkEpYPS6ZG73H9E/QckxJmAqlpulT8X8kEZJsfk8lGWIp0pZztr1Ccm6qAgOyHq3ndu9t2UsKyU2o0u5Pp6k6pA7NOW7swCzSUNMk4bcm1fOK5pNKZ03FndDDraFwxbgfdi3DqdP6Y+4HgfjjKGUjpwZ1yARhA9AEbwK/MwYCUC8zEnK4jQd4WyTlTAVMGfgDbxfLg3iXDIE2nbxarMo3c1OIC2gWFxPGUyflkRkeymnIJGBMcD+E7xeGh3THBsNukJ4ANwSqwZtiMi3X2og0Siik6IijjEKFAzXgINCIYNT6d471ePFPaWwTftHVVcMzCar5/HYzRjuQ1o/fYHyQ+G23J3gHtWnzH7AFHJPdhFS1OYA8iylgV8FmkEXA/blbQ6q75KXhmsai1h0ezcgeAa4grmMuCU9GCyc32OjeqVmtsIYU6jBUa6bh5YCEhf7J5KfHc8FRm24C2HhXaC9G53RXEReACcB5zDjGMGQJKSP3B8WQU+yVEfwU2QQ3wOuYd8BZ4A7xCfNyXE/gNPwLqz1THNfMAAAAASUVORK5CYII=';

option = {
   backgroundColor: 'rgba(5, 62, 72, 1)',
   grid: [
      {
         left: 10,
         top: 10,
         right: 10,
         bottom: 10,
         containLabel: true,
      },
   ],
   xAxis: [
      {
         gridIndex: 0,
         type: 'value',
         axisLabel: { show: false },
         axisLine: { show: false },
         splitLine: { show: false },
         axisTick: { show: false },
      },
      {
         gridIndex: 0,
         type: 'value',
         max: 100,
         axisLabel: { show: false },
         axisLine: { show: false },
         splitLine: { show: false },
         axisTick: { show: false },
      },
   ],
   yAxis: [
      {
         gridIndex: 0,
         type: 'category',
         inverse: true,
         position: 'left',
         data: dataSource.map((item) => item.name),
         axisTick: { show: false },
         axisLine: { show: false },
         splitLine: { show: false },
         axisLabel: {
            width: 80,
            padding: [0, 0, 0, -80],
            align: 'left',
            formatter: (name, index) => {
               const id = index + 1;
               if (id < 4) {
                  return `{icon${id}|}`;
               } else {
                  return `{count|${id}}`;
               }
            },
            rich: {
               icon1: {
                  width: 35,
                  height: 15,
                  align: 'center',
                  backgroundColor: {
                     image: img1,
                  },
               },
               icon2: {
                  width: 35,
                  height: 15,
                  align: 'center',
                  backgroundColor: {
                     image: img2,
                  },
               },
               icon3: {
                  width: 35,
                  height: 15,
                  align: 'center',
                  backgroundColor: {
                     image: img3,
                  },
               },
               count: {
                  padding: [0, 0, 0, 0],
                  width: 35,
                  height: 15,
                  color: '#A4E8E8',
                  align: 'center',
                  fontSize: 15,
                  fontFamily: 'DIN',
                  fontWeight: 500,
                  fontStyle: 'italic',
               },
               name: {
                  width: 80,
                  fontSize: 15,
                  align: 'left',
                  color: '#fff',
                  fontFamily: 'Source Han Sans CN',
                  fontWeight: 500,
               },
            },
         },
      },
      {
         gridIndex: 0,
         type: 'category',
         inverse: true,
         data: dataSource.map((item) => item.name),
         axisTick: { show: false },
         axisLine: { show: false },
         splitLine: { show: false },
         position: 'left',
         axisLabel: {
            width: 80,
            padding: [0, 0, 40, 0],
            align: 'left',
            formatter: (name, index) => {
               return `{value|${name}}`;
            },
            rich: {
               value: {
                  color: '#fff',
                  fontSize: 14,
                  fontWeight: 500,
               },
            },
         },
      },
      {
         gridIndex: 0,
         type: 'category',
         position: 'right',
         inverse: true,
         margin: 20,
         data: dataSource.map((item) => item.name),
         axisTick: { show: false },
         axisLine: { show: false },
         splitLine: { show: false },
         axisLabel: {
            align: 'right',
            padding: [0, 0, 50, -40],
            formatter: (_, index) => {
               return `{value|${dataSource[index].value}.0%}`;
            },
            rich: {
               value: {
                  color: '#fff',
                  fontSize: 14,
                  fontWeight: 500,
               },
            },
         },
      },
   ],
   series: [
      {
         type: 'bar',
         xAxisIndex: 0,
         yAxisIndex: 0,
         barWidth: 10,
         data: dataSource.map((item) => item.value),
         silent: true,
         itemStyle: {
            emphasis: {
               barBorderRadius: [0, 20, 20, 0],
            },
            normal: {
               barBorderRadius: [0, 20, 20, 0],
               color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                     {
                        offset: 0,
                        color: 'rgba(0, 255, 150, 0)', // 0% 处的颜色
                     },
                     {
                        offset: 1,
                        color: 'rgba(0, 255, 150, 1)', // 100% 处的颜色
                     },
                  ],
                  false
               ),
            },
         },
      },
      {
         type: 'pictorialBar',
         data: dataSource.map((item) => item.value),
         xAxisIndex: 0,
         yAxisIndex: 0,
         symbol: 'circle',
         symbolRotate: null,
         symbolSize: [10, 10],
         symbolPosition: 'end',
         symbolOffset: [0, 0],
         itemStyle: {
            color: 'white',
            shadowColor: 'rgba(115, 243, 255, 0.2)',
            shadowBlur: 10,
         },
      },
      {
         name: '背景',
         type: 'bar',
         barWidth: 10,
         barGap: '-100%',
         data: [10, 10, 10, 10, 10, 10, 10, 10, 10],
         itemStyle: {
            normal: {
               color: 'rgba(131, 132, 132, 0.1)',
               barBorderRadius: [30, 30, 30, 30],
            },
         },
      },
   ],
};