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
    评论
根据引用\[2\]和引用\[3\]的内容,ECharts图表组件内部有一个机制,用于统计xAxis坐标刻度的个数和图表宽度,从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。刻度间隔的相关属性是interval。默认情况下,interval属性的值为'auto',表示自动隐藏显示不下的刻度。如果想要全部显示刻度,可以将interval属性的值设置为0。另外,也可以通过设置一个具体的数字来指定刻度的间隔。这样可以根据需要调整x轴刻度的间隔,以解决刻度文字挤在一起的问题。 #### 引用[.reference_title] - *1* [ECharts设置x轴刻度间隔的两种方法](https://blog.csdn.net/DAO_HUNG/article/details/125654140)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [ECharts图表组件中级入门(Axis-axisLabel):图表坐标刻度过多如何设置刻度间隔(interval)以及配置说明](https://blog.csdn.net/Sky786905664/article/details/53306852)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值