Echarts在线免费图表

 
            option = {
  backgroundColor: '#000',
  grid: {
    left: '8%',
    // right: '0%',
    bottom: '1%',
    top: '15%',
    containLabel: true
  },
  legend: {
    data: [
      {
        name: '应评价数',
        itemStyle: {
          color: '#f39a04'
        }
      },
      {
        name: '已评价数',
        itemStyle: {
          color: '#33c2bb'
        }
      }
    ],
    show: true,
    right: '10%',
    top: '5%',
    textStyle: {
      color: '#fff',
      fontSize: 14
    },
    itemGap: 30
  },
  xAxis: [
    {
      show: false,
      type: 'value',
      max: 100,
      min: 0
    }
  ],
  yAxis: [
    {
      type: 'category',
      inverse: true,
      axisLabel: {
        show: true,
        color: '#fff',
        fontSize: 14,
        formatter: (params) => {
          const maxLength = 4;
          let chart = '';
          for (let i = 0; i < params.length; i++) {
            chart += params.charAt(i);
            if ((i + 1) % maxLength === 0 && i !== params.length - 1) {
              chart += '\n';
            }
          }
          return chart;
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: ['数据1', '2数据', '3数据', '4数据']
    },
    {
      axisLabel: {
        show: true,
        formatter: function (params) {
          return [
            `{a|${params.split(',')[0]}%}`,
            `{b|${params.split(',')[1]}%}`
          ].join('\n');
        },
        rich: {
          a: {
            color: '#f39a04',
            fontSize: 16
          },
          b: {
            color: '#33c2bb',
            fontSize: 16
          }
        }
      },
      inverse: true,
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: [
        [20, 50],
        [30, 70],
        [40, 80],
        [90, 100]
      ]
    }
  ],
  series: [
    {
      name: '应评价数',
      type: 'bar',
      barWidth: 18,
      data: [10, 30, 40, 90],
      itemStyle: {
        color: {
          type: 'linear',
          colorStops: [
            {
              offset: 0,
              color: 'rgba(243, 154, 4, 0)'
            },
            {
              offset: 1,
              color: 'rgba(243, 154, 4, .6)'
            }
          ]
        }
      },
      emphasis: {
        disabled: true,
        focus: 'none'
      },
      showBackground: true,
      backgroundStyle: {
        color: '#252b216b'
      }
    },
    {
      name: '已评价数',
      type: 'bar',
      barWidth: 18,
      data: [50, 70, 80, 100],
      itemStyle: {
        color: {
          type: 'linear',
          colorStops: [
            {
              offset: 0,
              color: 'rgba(51, 194, 187, 0)'
            },
            {
              offset: 1,
              color: 'rgba(51, 194, 187, .6)'
            }
          ]
        }
      },
      emphasis: {
        disabled: true,
        focus: 'none'
      },
      showBackground: true,
      backgroundStyle: {
        color: '#252b216b'
      }
    },
    {
      type: 'scatter',
      emphasis: {
        scale: false
      },
      symbol: 'rect',
      itemStyle: {
        barBorderRadius: [30, 0, 0, 30],
        color: '#f39a04',
        shadowColor: '#f39a04',
        shadowBlur: 1,
        borderWidth: 1,
        opacity: 1
      },
      symbolSize: [4, 18], // 进度条白点的大小
      z: 2,
      data: [10, 30, 40, 90],
      animationDelay: 500,
      symbolOffset: [-3, -11]
    },
    {
      type: 'scatter',
      symbol: 'rect',
      itemStyle: {
        barBorderRadius: [30, 0, 0, 30],
        color: '#33c2bb',
        shadowColor: '#33c2bb',
        shadowBlur: 1,
        borderWidth: 1,
        opacity: 1
      },
      symbolSize: [4, 18], // 进度条白点的大小
      z: 2,
      data: [50, 70, 80, 100],
      animationDelay: 500,
      symbolOffset: [-3, 11]
    }
  ]
};