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: "10%",
      right: "25%",
      bottom: "10%",
      top: "10%",
      containLabel: false
   },
   xAxis: [
      {
         show: false
      },
      {
         show: true,
         splitLine: {
            show: false
         }
      }
   ],
   yAxis: [
      {
         show: true,
         data: yData,
         offset: 80,
         position: "right",
         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: "right",
         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: "外圆",
      //    type: "scatter",
      //    emphasis: {
      //       scale: false
      //    },
      //    xAxisIndex: 1,
      //    symbolSize: 10,
      //    itemStyle: {
      //       color: "#f5d600",
      //       shadowColor: "rgba(255, 255, 255, 0.5)",
      //       shadowBlur: 5,
      //       borderWidth: 1,
      //       opacity: 1
      //    },
      //    z: 2,
      //    data: pData,
      //    animationDelay: 1500,
      //    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: "left",
            fontSize: 14,
            color: "#fff",
            formatter: function (data) {
               return xData[data.dataIndex];
            }
         },
         data: maxData
      }
   ]
};