Echarts在线免费图表

 
            
const data = {
   label: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
   value: [11, 22, 33, 44, 55, 66, 77, 88, 99, 21, 32, 43],
    value1: [99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99],
}
let dataZoomMove = {
   start: 0,
   end: 5
}
let dataZoomMoveTimer = null
option = {
   backgroundColor: "#051E52",
   tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(21, 154, 255, 0.32)",
      textStyle: {
         color: "#fff",
      },
      borderColor: "#159AFF",
      axisPointer: {
         lineStyle: {
            color: "transparent",
         },
      },
       formatter:'{b0}：{c0}',
   },
   dataZoom: [
      {
         show: false, // 为true 滚动条出现
         startValue: dataZoomMove.start,
         endValue: dataZoomMove.end,
         yAxisIndex: [0, 1], //关联多个y轴
      },
      {
         //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
         type: "inside",
         yAxisIndex: 0,
         zoomOnMouseWheel: false, //滚轮是否触发缩放
         moveOnMouseMove: true, //鼠标滚轮触发滚动
         moveOnMouseWheel: true,
      },
   ],
   grid: {
      containLabel: true,
      bottom: 20,
      left: 30,
      top: 20,
      right: 30,
   },
   xAxis: {
      type: "value",
      axisLabel: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
   },
   yAxis: [
      {
         type: "category",
         data: data.label,
         inverse: true,
         axisLabel: {
            inside: true,
            verticalAlign: "bottom",
            lineHeight: 36,
            margin: 4, //刻度标签与轴线之间的距离
            formatter: function (value) {
               let k = data.label.indexOf(value);
               let index = k < 9 ? (k + 1) : k + 1;
               return `{b|No.${index}} {a|${value}}`;
            },
            rich: {
               b: {
                  // borderColor: "#fff",
                  // borderWidth: 1,
                  padding: [-2, 1, 0, 1],
                  color: "#1370fb",
                  fontSize: 14,
               },
               a: {
                  fontSize: 14,
                  color: "#fff",
                  padding: [-2, 0, 0, 8],
               },
            },
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         },
      },

      {
         type: "category",
         data: data.label,
         inverse: true,
         axisLabel: {
            inside: true,// 数值和图表分离
            verticalAlign: "bottom",
            lineHeight: 34,
            margin: 2,
            formatter: function (value) {
               let k = data.label.indexOf(value);
               let index = k;
               return `{a|${data.value[index]}次}`;
            },
            rich: {
               a: {
                  fontSize: 16,
                  color: "#fff",
                  padding: [4, 0, 0, 0],
                  fontFamily: "DOUYU",
               },
            },
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         },
      },
   ],
   series: [
      {
         data: data.value,
         type: "bar",
          yAxisIndex: 0,
         barWidth: 12, // 柱子宽度
         MaxSize: 0,
         showBackground: false,
         barBorderRadius: [30, 0, 0, 30],
         backgroundStyle: {
            color: 'rgba(9, 68, 131, .2)',
         },
         label: {
            show: false,
            offset: [60, -17],
            color: '#fff',
            fontWeight: 500,
            position: 'left',
            align: 'left',
            fontSize: 14,
            formatter: function (params) {
               console.log(params)
               return params.data.name;
            }
         },
         itemStyle: {
            barBorderRadius: [3, 0, 0, 3],
            color: params => {
               return {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: '#1370fb',
                     },
                     {
                        offset: 1,
                        color: '#1370fb',
                     },
                  ],
               }
            }
         }
      }, {
            name: '外框',
            type: 'bar',
            yAxisIndex: 0,
           // barGap: '-100%',
            data: data.value1,
            barWidth: 2,
            itemStyle: {
                normal: {
                    color:'#1370fb',
                    barBorderRadius: 5,
                }
            },
            z: 0
        }
   ],
};
const startMoveDataZoom = () => {
   dataZoomMoveTimer = setInterval(() => {
      dataZoomMove.start += 1;
      dataZoomMove.end += 1;
      if (dataZoomMove.end > data.value.length - 1) {
         dataZoomMove.start = 0;
         dataZoomMove.end = 5;
      }
      myChart.setOption({
         dataZoom: [
            {
               type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
               startValue: dataZoomMove.start,
               endValue: dataZoomMove.end,
            },
         ],
      });
   }, 2500);
};
startMoveDataZoom()
let chartDom = myChart.getDom();
chartDom.addEventListener('mouseout', () => {
   if (dataZoomMoveTimer) return;
   let dataZoomMove_get = myChart.getOption().dataZoom[0];
   dataZoomMove.start = dataZoomMove_get.startValue;
   dataZoomMove.end = dataZoomMove_get.endValue;
   startMoveDataZoom();
})
chartDom.addEventListener('mouseover', () => {
   clearInterval(dataZoomMoveTimer);
   dataZoomMoveTimer = undefined;
})