Echarts在线免费图表

 
            let data = [1, 2, 3, 4, 5, 6];
let className = ["北京", "天津", "河北", "河南", "山东", "山西"];
option = {
   backgroundColor: '#fff',
   grid: {
      left: "5%",
      right: "8%",
      bottom: "5%",
      top: "10%",
      containLabel: true
   },
   xAxis: {
      show: false,
      type: "value"
   },
   yAxis: [
      {
         type: "category",
         inverse: true,
         axisLabel: {
            show: true,
            textStyle: {
            color: "red",
            fontSize: 14
            }
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         axisLine: {
            show: false
         },
         data: className
      }
   ],
   series: [
      {
         name: "员工出信息",
         type: "bar",
         zlevel: 1,
         label: {
            //数据显示的位置
            show: true, //数值是否显示
            // rotate: 60, //数值显示的角度
            position: "right", //数值相对于柱状图显示的位置
            textStyle: {
            color: "red", // 标签字体颜色
            fontSize: 14, // 标签字体大小
            fontStyle: "italic", // 标签字体斜体
            fontFamily: "baba" // 标签字体
            }
         },
         itemStyle: {
            normal: {
            barBorderRadius: 0,
            color: {
               type: "linear",
               colorStops: [
                  {
                  offset: 0,
                  color: "red"
                  },
                  {
                  offset: 1,
                  color: "rgba(255, 255, 255, 0)"
                  }
               ]
            }
            }
         },
         barWidth: 20,
         emphasis: {
            disabled: true,
            focus: "none"
         },
         data: data
      },
      {
         // name: "外圆",
         type: "scatter",
         emphasis: {
            scale: false
         },
         symbol: "rect",
         symbolSize: [4, 18], // 进度条白点
         itemStyle: {
            barBorderRadius: [30, 0, 0, 30],
            color: "red",
            shadowColor: "red",
            shadowBlur: 1,
            borderWidth: 1,
            opacity: 1
         },
         z: 2,
         data: data,
         animationDelay: 500
      }
   ]
};