echarts横向进度条

const datas = [

   { name: "瑞文", value: "32", value1: "258", value2: "82" },

  { name: "剑姬", value: "37", value1: "265", value2: "98" },

  { name: "青钢影", value: "94", value1: "582", value2: "550" },

  { name: "艾瑞莉娅", value: "73", value1: "324", value2: "235" },

  { name: "暗裔剑魔", value: "37", value1: "321", value2: "120" },

  { name: "伊泽瑞尔", value: "74", value1: "350", value2: "260" },

  { name: "狐臭", value: "69", value1: "429", value2: "294" },

  { name: "佛耶戈", value: "65", value1: "545", value2: "354" }

];

const xData = datas.map(item => item.value1);

const yData = datas.map(item => item.name);

const zData = datas.map(item => item.value2);

const pData = datas.map(item => item.value);

//const max = Math.ceil(Math.max(...yData) * 1.2);

const max = 100;

const maxData = [max, max, max, max, max, max, max, max, max, max];//控制左边名字显示的数量

option = {

   toolbox: {

          show: true,

          feature: {

            saveAsImage: {

              show: true,

              title: "保存图片",

              excludeComponents: ["toolbox"],

              pixelRatio: 1,

              backgroundColor: "#05233D",

            },

          },

        },

   backgroundColor: "#0b1a2a",

   grid: {

      left: "25%",

      right: "10%",

      bottom: "10%",

      top: "10%",

      containLabel: false

   },

   xAxis: [

      {

         show: false

      },

      {

         show: true,

         splitLine: {

            show: false

         }

      }

   ],

   yAxis: [

      {

         show: true,

         data: yData,

         offset: 80,

         position: "left",

         axisLabel: {

            lineHeight: 0,

            verticalAlign: "bottom",

            fontSize: 14,

            color: "#ffffff",

            formatter: "{value}"

         },

         axisLine: {

            show: false

         },

         splitLine: {

            show: false

         },

         axisTick: {

            show: false

         }

      },

      {

         show: true,

         data: zData,

         offset: 5,

         position: "left",

         axisLabel: {

            lineHeight: 0,

            verticalAlign: "bottom",

            fontSize: 14,

            color: "#8CEA00",

            formatter: "{value}"

         },

         axisLine: {

            show: false

         },

         splitLine: {

            show: false

         },

         axisTick: {

            show: false

         }

      }

   ],

   series: [

      {

         name: "进度",

         show: true,

         type: "bar",

         barGap: "-100%",

         xAxisIndex: 1,

         barWidth: 20,

         itemStyle: {

            borderRadius: 4,

            color: {

               type: 'linear',

               x: 0,

               y: 0,

               x2: 1,

               y2: 0,

               colorStops: [

                  {

                     offset: 0,

                     color: '#148BCE', // 0% 处的颜色

                  },

                  {

                     offset: 1,

                     color: '#73E3FF', // 0% 处的颜色

                  },

               ],

               global: false, // 缺省为 false

            }

         },

         label: {

            show: true, 

            position: 'insideRight', 

            formatter: '{c}%',

            offset: [-10, 2], 

            color: '#fff'

         },

         labelLine: {

            show: false

         },

         z: 2,

         data: pData,

         animationDelay: 1000,

         animationDuration: 1000

      },

      {

         name: "百分比",

         z: 1,

         show: true,

         type: "bar",

         xAxisIndex: 1,

         barGap: "-100%",

         barWidth: 20,

         itemStyle: {

            borderRadius: 4,

            color: "rgba(13, 55, 78, 1)"

         },

         label: {

            show: true,

            verticalAlign: "middle",

            position: "right",

            fontSize: 14,

            color: "#fff",

            formatter: function (data) {

               return xData[data.dataIndex];

            }

         },

         data: maxData

      }

   ]

};