Echarts在线免费图表

 
            var nameList = ["广东", "湖南", "江西", "广西", "浙江", "福建", "湖北", "重庆", "云南", "河南"];// 教职工岗位
let blList = [100, 99, 98, 97, 96, 95, 94, 93, 92, 91];// 岗位对应人数

option = {
   dataZoom: [{
      type: 'slider',
      //backgroundColor: 'rgba(245,245,245)',
      backgroundColor: 'transparent',
      brushSelect: false,
      width: 7,
      show: true, //flase直接隐藏图形
      yAxisIndex: [0],
      //left: 'center', //滚动条靠左侧的百分比
      //bottom: 13,
      startValue: 0, //滚动条的起始位置
      endValue: 6, //滚动条的截止位置（按比例分割你的柱状图x轴长度）

      handleStyle: {
         color: '#E8E8E8',
         borderColor: '#E8E8E8',
      },
      fillerColor: '#E8E8E8',
      borderColor: 'transparent',
      showDetail: false,

      dataBackground: {
         areaStyle: {
            opacity: 0
         },
         lineStyle: {
            color: 'transparent'
         },
      },

   }],
   legend: {
      show: false,
   },
   grid: {
      left: "15%",
      right: "20%",
      bottom: "5%",
      top: "8%",
      containLabel: true,
   },
   xAxis: [
      {
         splitLine: {
            show: false,
         },
         type: "value",
         show: false,
      },
   ],
   yAxis: [
      {
         splitLine: {
            show: false,
         },
         axisLine: {//y轴
            show: false,
         },
         type: "category",
         axisTick: {
            show: false,
         },
         inverse: true, // 倒序
         boundaryGap: false, // 留白政策
         data: nameList,
         axisLabel: {
            color: "rgba(0, 0, 0, 0.65)",
            align: 'left',
            padding: [-10, 0, 0, -180],
            verticalAlign: "top",
            formatter: (value, index) => {
               let i = nameList.indexOf(value);
               console.log(i)
               if (i == 0) {
                  return [`{lg1|${i + 1}} ` + "{title|" + value + "} "].join("\n");
               } else if (i == 1) {
                  return [`{lg2|${i + 1}} ` + "{title|" + value + "} "].join("\n");
               } else if (i == 2) {
                  return [`{lg3|${i + 1}} ` + "{title|" + value + "} "].join("\n");
               } else {
                  return [`{lg|${i + 1}} ` + "{title|" + value + "} "].join("\n");
               }
            },
            rich: {
               lg1: {
                  backgroundColor: "rgba(240, 106, 57, 0.1)",
                  color: 'rgba(240, 106, 57, 1)',
                  borderRadius: [5,5,0,0],
                  padding: 5,
                  align: "center",
                  width: 32,
                  height: 32,
                  lineHeight: 32,
                  fontSize: 19,
                  fontFamily: 'Source Han Sans CN-Regular',
               },
               lg2: {
                  backgroundColor: "rgba(255, 176, 38, 0.1)",
                  color: 'rgba(255, 176, 38, 1)',
                  borderRadius: 5,
                  padding: 5,
                  align: "center",
                  width: 32,
                  height: 32,
                  lineHeight: 32,
                  fontSize: 19,
                  fontFamily: 'Source Han Sans CN-Regular',
               },
               lg3: {
                  backgroundColor: "rgba(51, 207, 201, 0.1)",
                  color: 'rgba(51, 207, 201, 1)',
                  borderRadius: 5,
                  padding: 5,
                  align: "center",
                  width: 32,
                  height: 32,
                  lineHeight: 32,
                  fontSize: 19,
                  fontFamily: 'Source Han Sans CN-Regular',
               },
               lg: {
                  backgroundColor: "rgba(57, 126, 240, 0.1)",
                  color: 'rgba(57, 126, 240, 1)',
                  borderRadius: 5,
                  padding: 5,
                  align: "center",
                  width: 32,
                  height: 32,
                  lineHeight: 32,
                  fontSize: 19,
                  fontFamily: 'Source Han Sans CN-Regular',
               },
               title: {
                  color: 'rgba(0,0,0,0.65)',
                  align: "right",
                  fontSize: 18,
                  fontFamily: 'Source Han Sans CN-Regular',
                  padding: [0, 0, 0, 21],
               },
            },
         },
      },
   ],
   series: [
      {
         name: "人数",
         type: "bar",
         barWidth: 13, // 柱子宽度
         showBackground: true,
         backgroundStyle: {
            color: 'rgba(57, 126, 240, 0)',
            borderColor: 'rgba(57, 126, 240, 0.04)',
            borderWidth: 20
         },
         label: {
            show: true,
            formatter: '{c}人',
            color: "rgba(0, 0, 0, 0.85)",
            fontFamily: "HarmonyOS Sans-Medium",
            fontSize: 14,
            position: 'right'
         },
         itemStyle: {

            barBorderRadius: [0, 3, 3, 0], // 圆角（左上、右上、右下、左下）
            color: {
               x: 0,
               y: 1,
               x2: 1,
               y2: 0,
               colorStops: [{
                  offset: 0,
                  color: 'rgba(57, 126, 240, 1)' // 0% 处的颜色
               }, {
                  offset: 1,
                  color: 'rgba(51, 207, 201, 1)' // 100% 处的颜色
               }],
            },
         },
         data: blList,
      },
   ],
};