Echarts在线免费图表

 
            const XData = ['A同学', 'B同学', 'C同学', 'D同学', 'E同学']
const YData = [90, 80, 70, 45, 30]
const rankData = {
   90: 1,
   80: 2,
   70: 3,
   45: 4,
   30: 5
}

option = {
   tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      axisPointer: {
         type: 'shadow' // 可选为：'line' | 'shadow'
      },
      padding: 0,
      formatter: (params) => {
         console.log(params)
         // 自定义 tooltip，这里返回 div 内容随意改造，打印看下 params 拿自己想要的数据
         return `
            <div style="padding: 8px;min-width: 100px;border-radius: 5px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
               -> ${params[0].axisValueLabel}
               <div style="display: flex;justify-content: space-between;align-items: center;">
                  <p>
                     <span style="display: inline-block;margin-right:5px;width: 10px;height: 10px;border-radius: 50%;background-color: rgba(42, 130, 228, 1)"></span>
                     排名
                  </p>
                  <span>${rankData[params[0].value]}</span>
               </div>
            </div>
         `
      },
      textStyle: {
         color: 'rgba(0, 0, 0, .8)'
      }
   },

   xAxis: {
      type: 'category',
      splitLine: { show: false },
      axisLine: {
         lineStyle: {
            color: 'rgba(0, 0, 0, .5)'
         }
      },
      axisTick: {
         lineStyle: {
            color: 'rgba(0, 0, 0, .5)'
         }
      },
      data: XData
   },
   yAxis: {
      type: 'value',
      splitNumber: 2,
      axisLine: {
         show: false,
         lineStyle: {
            color: 'rgba(0, 0, 0, .5)',
         }
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         fontSize: 16,
         // 分数与排名怎么对应？试了一个曲线还挺像，具体情况根据项目自定义 formatter 函数
         formatter: function (value, index) {
            return Math.ceil((100 - value) * (100 - value) / 700);
         }
      }
   },
   series: [
      {
         name: '分数',
         type: 'bar',
         barWidth: 25,
         itemStyle: {
            color: 'rgba(42, 130, 228, 1)'
         },
         data: YData
      }
   ]
};