echartsX过多

echarts柱形图X轴类的数据过多,部分类会被截去或者选择不全。
于是发现了dataZoom,可以加入滚动条。
附上代码:

var Chart2 = echarts.init(document.getElementById('Echarts2'));
    option2 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
            },
            formatter: "{a} <br/>{b}: {c} %"
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '16%',
            containLabel: true,
            width: 371
        },
        dataZoom: {
            show: true,
            start : 0,
            end:20,
            height:10,//滚动条高度
            backgroundColor:'#effbfe',//滚动条滚动区域背景色
            dataBackgroundColor:'#007acc',//有数据时候数据在滚动条上显示的颜色
            fillerColor:'#b7e9f8',//滚动条条条本身的颜色
            handleColor:'#56abe4',//控制滚动条长短(滚动条两边)的爪爪颜色
            handleSize:10//爪爪的宽度
        },
        xAxis: [
            {
                type: 'category',
                data: [@Html.Raw(Model.Chart2Title)],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value}%'
                }
            }
        ],
        series: [
            {
                name: '正确率',
                type: 'bar',
                barWidth: '30%',
                data: [@Html.Raw(Model.Chart2Value)],
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var colorList = ['#FF0000', '#FF8800', '#008800', '#00AAAA', '#0066FF', '#9900FF'];
                            return colorList[params.dataIndex];
                        },
                        label: {
                            show: true,
                            position: "top",
                            formatter: '{c}%'
                        }
                    }
                }
            }
        ]
    };
    Chart2.setOption(option2);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值