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

全屏阅读
  • 基本信息

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"
            }
        },

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!