Echarts柱状图表格数据过多展示不全加滚动条

2,509 阅读1分钟

Echarts柱状图表格数据过多展示不全加滚动条在Echarts options配置中配置dataZoom项,代码如下:

    滚动配置
    // dataZoom: [
    //   {
    //     start: 1, //默认为0
    //     end: 100, //默认为100
    //     type: "slider",
    //     show: true,
    //     yAxisIndex: [0, 1],
    //     handleSize: 0, //滑动条的 左右2个滑动条的大小
    //     height: "100%", //组件高度
    //     left: 600, //左边的距离
    //     right: 8, //右边的距离
    //     top: 0, //上边边的距离
    //     borderColor: "rgba(43,48,67,0.8)",
    //     fillerColor: "#33384b", //滑动块的颜色
    //     backgroundColor: "rgba(13,33,117,0.5)", //两边未选中的滑动条区域的颜色
    //     showDataShadow: false, //是否显示数据阴影 默认auto
    //     showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
    //     realtime: true, //是否实时更新
    //     filterMode: "filter",
    //     maxValueSpan: 4, //显示数据的条数(默认显示10个)
    //     startValue: 0, // 从头开始。
    //     endValue: 4, // 最多六个
    //     minValueSpan: 4, // 放大到最少几个
    //   },
    //   //滑块的属性
    //   {
    //     type: "inside",
    //     show: true,
    //     zoomOnMouseWheel: true, //滚轮是否触发缩放
    //     moveOnMouseMove: true, //鼠标滚轮触发滚动
    //     moveOnMouseWheel: true,
    //     yAxisIndex: [0, 1],
    //     start: 1, //默认为1
    //     end: 100, //默认为100
    //   },
    // ],

Echarts柱状图的警示线(水平线)option的series中配置markLine配置项即可

         markLine:{
          data:[
              {
                type:"average",
                name:"平均值"
              }
            ],
            lineStyle:{
              color: "rgba(210, 213, 37, 1)",
              type:"solid",
              shadowColor:'rgba(195, 217, 49, 1)'
            },
            label:{
              fontSize:16,
              fontWeight: "normal",
              fontStyle: "oblique"
            }
        },